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>
2026-03-02 20:00:45 +00:00
parent 776738a983
commit bd362dc586
19 changed files with 1059 additions and 149 deletions
@@ -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>
+  );
+};