apify tool, tools API + automation UI, integrations config, super admin restrictions

- apify tool: TOOL.md definition, index.ts implementation with auto-auth via OFFICER_APIFY_TOKEN, output_path for large datasets
- tools API: /tools routes (list, detail, chat, create, delete) mirroring tasks pattern
- automation UI: tools tab in sidebar, NewTool component, tool detail view
- apify integration: settings page for enterprise API key config, pi-bridge passes env var to containers
- tiktok-trends task: rewritten as agent instructions using apify tool with output_path, scripted report generation for 50KB read limit
- restrict edit/delete of native/global capabilities to Super Admin only (backend + frontend)
- tools authoring guide: TOOLS.md with full spec for TOOL.md frontmatter, index.ts execute signature, patterns

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/apps/officer-web/Screens/Dashboard/Automation/AutomationRightPanel.tsx

@@ -8,6 +8,7 @@ import { NewPipeline } from './NewPipeline';
 import { NewCron } from './NewCron';
 import { NewService } from './NewService';
 import { NewWorkflow } from './NewWorkflow';
+import { NewTool } from './NewTool';
 
 export type AutomationSelection = {
   kind: string;
@@ -28,6 +29,7 @@ const newComponentMap: Record<string, React.ComponentType<{ selection: NonNullab
   Cron: NewCron,
   Service: NewService,
   Workflow: NewWorkflow,
+  Tool: NewTool,
 };
 
 export const AutomationRightPanel = () => {

src/apps/officer-web/Screens/Dashboard/Automation/AutomationSidebar.tsx

@@ -1,4 +1,4 @@
-import { Box, Clock, Cpu, GitBranch, ListTodo, Server, Sparkles, Workflow } from 'lucide-react';
+import { Box, Clock, Cpu, GitBranch, ListTodo, Server, Sparkles, Workflow, Wrench } from 'lucide-react';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import type { AutomationSelection } from './AutomationRightPanel';
 
@@ -6,6 +6,7 @@ const capabilityItems = [
   { id: 'processes', label: 'Processes', icon: Cpu, kind: 'Process', endpoint: '/processes', queryKey: 'processes' },
   { id: 'tasks', label: 'Tasks', icon: ListTodo, kind: 'Task', endpoint: '/tasks', queryKey: 'tasks' },
   { id: 'skills', label: 'Skills', icon: Sparkles, kind: 'Skill', endpoint: '/skills', queryKey: 'skills' },
+  { id: 'tools', label: 'Tools', icon: Wrench, kind: 'Tool', endpoint: '/tools', queryKey: 'tools' },
   { id: 'pipelines', label: 'Pipelines', icon: Workflow, kind: 'Pipeline', endpoint: '/pipelines', queryKey: 'pipelines' },
   { id: 'crons', label: 'Crons', icon: Clock, kind: 'Cron', endpoint: '/crons', queryKey: 'crons' },
   { id: 'services', label: 'Services', icon: Server, kind: 'Service', endpoint: '/services', queryKey: 'services' },

src/apps/officer-web/Screens/Dashboard/Automation/CapabilityDetailView.tsx

@@ -8,6 +8,7 @@ import { ArrowLeft, Pencil, Play, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 import { useClient } from 'hooks/useClient';
+import { useAuth } from 'hooks/useAuth';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import { Card } from '@/components/Card';
 import { FrontmatterBlock } from '../CapabilityPage';
@@ -73,6 +74,7 @@ type CapabilityDetailViewProps = {
 export const CapabilityDetailView = ({ kind, endpoint, queryKey, dirName, editing }: CapabilityDetailViewProps) => {
   const client = useClient();
   const qc = useQueryClient();
+  const { user } = useAuth();
   const [selection, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
   const [deleteConfirm, setDeleteConfirm] = useState(false);
   const [showInputForm, setShowInputForm] = useState(false);
@@ -149,18 +151,22 @@ export const CapabilityDetailView = ({ kind, endpoint, queryKey, dirName, editin
                   <Play className="h-3.5 w-3.5 text-duck-teal" />
                 </button>
               )}
-              <button
-                onClick={toggleEditing}
-                className={`p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors ${editing ? 'bg-duck-teal/10' : ''}`}
-              >
-                <Pencil className={`h-3.5 w-3.5 ${editing ? 'text-duck-teal' : 'text-duck-dark/50 dark:text-foreground/50'}`} />
-              </button>
-              <button
-                onClick={() => setDeleteConfirm(true)}
-                className="p-1 rounded hover:bg-red-50 cursor-pointer transition-colors"
-              >
-                <Trash2 className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50 hover:text-red-500" />
-              </button>
+              {(detail.scope === 'user' || user?.role === 'Super Admin') && (
+                <>
+                  <button
+                    onClick={toggleEditing}
+                    className={`p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors ${editing ? 'bg-duck-teal/10' : ''}`}
+                  >
+                    <Pencil className={`h-3.5 w-3.5 ${editing ? 'text-duck-teal' : 'text-duck-dark/50 dark:text-foreground/50'}`} />
+                  </button>
+                  <button
+                    onClick={() => setDeleteConfirm(true)}
+                    className="p-1 rounded hover:bg-red-50 cursor-pointer transition-colors"
+                  >
+                    <Trash2 className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50 hover:text-red-500" />
+                  </button>
+                </>
+              )}
             </>
           )}
         </div>
@@ -275,7 +281,7 @@ export const CapabilityDetailView = ({ kind, endpoint, queryKey, dirName, editin
           onOpenChange={(open) => {
             if (!open) setRunPrompt(null);
           }}
-          task={{ dirName, name: detail.name, description: detail.description ?? '', scope: detail.scope ?? 'user', triggers: [], filePath: detail.filePath }}
+          task={{ dirName, name: detail.name, description: detail.description ?? '', scope: detail.scope === 'user' ? 'user' : 'global', triggers: [], filePath: detail.filePath }}
           promptOverride={runPrompt}
         />
       )}

src/apps/officer-web/Screens/Dashboard/Automation/NewTool.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { X } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { useClient } from 'hooks/useClient';
+import { usePanelChannel } from 'hooks/usePanelChannel';
+import type { AutomationSelection } from './AutomationRightPanel';
+
+type NewToolProps = {
+  selection: NonNullable<AutomationSelection>;
+};
+
+export const NewTool = ({ selection }: NewToolProps) => {
+  const client = useClient();
+  const qc = useQueryClient();
+  const [, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleCreate = async () => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    setSubmitting(true);
+    try {
+      const res = await client.post<{ name: string; dirName: string }>(selection.endpoint, { name: trimmed });
+      await qc.invalidateQueries({ queryKey: [selection.queryKey] });
+      setSelection({
+        kind: selection.kind,
+        endpoint: selection.endpoint,
+        queryKey: selection.queryKey,
+        dirName: res.dirName,
+        isNew: true,
+        editing: true,
+        description: description.trim() || undefined,
+      });
+    } catch {
+      toast.error('Failed to create tool');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
+        <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1">New Tool</span>
+        <button
+          onClick={() => setSelection(null)}
+          className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
+        >
+          <X className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50" />
+        </button>
+      </div>
+      <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-4">
+        <div className="flex flex-col gap-1.5">
+          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Name</label>
+          <input
+            value={name}
+            onChange={(ev) => setName(ev.target.value)}
+            onKeyDown={(ev) => {
+              if (ev.key === 'Enter') {
+                ev.preventDefault();
+                handleCreate();
+              }
+            }}
+            placeholder="Tool name..."
+            autoFocus
+            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
+          />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Description</label>
+          <textarea
+            value={description}
+            onChange={(ev) => setDescription(ev.target.value)}
+            placeholder="Describe what this tool does..."
+            rows={4}
+            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30 resize-none"
+          />
+        </div>
+        <div className="flex justify-end">
+          <Button
+            onClick={handleCreate}
+            disabled={!name.trim() || submitting}
+            className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90 cursor-pointer"
+          >
+            {submitting ? 'Creating...' : 'Create'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/CapabilityPage.tsx

@@ -8,6 +8,7 @@ import { ArrowLeft, Pencil, Plus, Check, X, Trash2, Search, ChevronRight } from
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 import { useClient } from 'hooks/useClient';
+import { useAuth } from 'hooks/useAuth';
 import { Card } from '@/components/Card';
 import { usePiChat, EmbeddableChat } from 'officerdev';
 type CapabilitySummary = {
@@ -249,6 +250,7 @@ export const CapabilityList = ({ kind, endpoint, queryKey, selected, onSelect, o
 export const CapabilityPage = ({ kind, endpoint, queryKey }: CapabilityPageProps) => {
   const client = useClient();
   const qc = useQueryClient();
+  const { user } = useAuth();
   const [selected, setSelected] = useState<string | null>(null);
   const [editing, setEditing] = useState(false);
   const [isNew, setIsNew] = useState(false);
@@ -330,7 +332,7 @@ export const CapabilityPage = ({ kind, endpoint, queryKey }: CapabilityPageProps
               <span className="text-sm font-medium text-duck-dark/70 flex-1">
                 {detail?.name ?? `Select a ${kind.toLowerCase()}`}
               </span>
-              {detail && (
+              {detail && (detail.scope === 'user' || user?.role === 'Super Admin') && (
                 <>
                   <button
                     onClick={() => setEditing((e) => !e)}

src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/ApifyConfig.tsx

@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react';
+import { toast } from 'sonner';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { useClient } from 'hooks/useClient';
+
+type ApifyConfigData = {
+  apiToken: string;
+};
+
+type ApifyStatus = {
+  configured: boolean;
+};
+
+export const ApifyConfig = () => {
+  const client = useClient();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [apiToken, setApiToken] = useState('');
+  const [status, setStatus] = useState<ApifyStatus | null>(null);
+
+  useEffect(() => {
+    Promise.all([
+      client.get<ApifyConfigData>('/integrations/apify/config').then((data) => {
+        if (data?.apiToken) setApiToken(data.apiToken);
+      }),
+      client.get<ApifyStatus>('/integrations/apify/status').then(setStatus),
+    ])
+      .catch(() => {})
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  const handleSave = async () => {
+    if (isSaving) return;
+    setIsSaving(true);
+    try {
+      await client.put('/integrations/apify/config', { apiToken: apiToken.trim() });
+      toast.success('Apify API token saved');
+      setStatus({ configured: !!apiToken.trim() });
+    } catch {
+      toast.error('Failed to save Apify API token');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) return null;
+
+  return (
+    <div className="grid gap-5">
+      {status && (
+        <div className="flex items-center gap-2 rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-3">
+          <div className={`h-2.5 w-2.5 rounded-full shrink-0 ${status.configured ? 'bg-green-500' : 'bg-duck-dark/20 dark:bg-foreground/20'}`} />
+          <span className="text-sm text-duck-dark dark:text-foreground">
+            {status.configured ? 'API token configured' : 'Not configured'}
+          </span>
+        </div>
+      )}
+
+      <div className="grid gap-5">
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70 dark:text-foreground/70">API Token</span>
+          <Input
+            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="password"
+            value={apiToken}
+            onChange={(ev) => setApiToken(ev.target.value)}
+            placeholder="apify_api_..."
+          />
+          <span className="text-xs text-duck-dark/40 dark:text-foreground/40">
+            Get your token at{' '}
+            <a href="https://console.apify.com/account/integrations" target="_blank" rel="noopener noreferrer" className="text-duck-teal underline">
+              console.apify.com/account/integrations
+            </a>
+          </span>
+        </Label>
+
+        <Button
+          type="button"
+          onClick={handleSave}
+          disabled={isSaving || !apiToken.trim()}
+          className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+        >
+          {isSaving ? 'Saving...' : 'Save'}
+        </Button>
+      </div>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/index.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Puzzle, KeyRound, UserCircle, MessageCircle, Globe } from 'lucide-react';
+import { Puzzle, KeyRound, UserCircle, MessageCircle, Globe, Wrench } from 'lucide-react';
 import type { LayoutNode, PanelComponents } from 'officerdev';
 import { WorkspaceLayout } from 'officerdev';
 import { useAuth } from 'hooks/useAuth';
@@ -16,6 +16,7 @@ import { TelegramAccount } from './TelegramAccount';
 import { WhatsAppBotConfig } from './WhatsAppBotConfig';
 import { WhatsAppAccount } from './WhatsAppAccount';
 import { BrowserRelay } from './BrowserRelay';
+import { ApifyConfig } from './ApifyConfig';
 
 const GLOBAL_KEY = 'INTEGRATIONS_SETTINGS_SELECTED';
 const TAB_KEY = 'INTEGRATIONS_SETTINGS_TAB';
@@ -49,6 +50,13 @@ const enterpriseSections: SettingsSection[] = [
     description: 'WhatsApp Web connection',
     content: <WhatsAppBotConfig />,
   },
+  {
+    key: 'apify',
+    icon: Wrench,
+    title: 'Apify',
+    description: 'API token for web scraping actors',
+    content: <ApifyConfig />,
+  },
 ];
 
 const personalSections: SettingsSection[] = [