apteva 0.2.11 → 0.3.7

package/src/web/components/meta-agent/MetaAgent.tsx

@@ -0,0 +1,222 @@
+import React, { useState, useEffect, createContext, useContext, type ReactNode } from "react";
+import { Chat } from "@apteva/apteva-kit";
+import { useAuth } from "../../context";
+
+interface MetaAgentStatus {
+  enabled: boolean;
+  available?: boolean;
+  reason?: string;
+  agent?: {
+    id: string;
+    name: string;
+    status: "stopped" | "running";
+    port: number | null;
+    provider: string;
+    model: string;
+  };
+}
+
+interface MetaAgentContextValue {
+  status: MetaAgentStatus | null;
+  isOpen: boolean;
+  isStarting: boolean;
+  error: string | null;
+  isAvailable: boolean;
+  isRunning: boolean;
+  agent: MetaAgentStatus["agent"] | undefined;
+  toggle: () => void;
+  close: () => void;
+  startAgent: () => Promise<void>;
+}
+
+const MetaAgentContext = createContext<MetaAgentContextValue | null>(null);
+
+export function useMetaAgent() {
+  return useContext(MetaAgentContext);
+}
+
+export function MetaAgentProvider({ children }: { children: ReactNode }) {
+  const { authFetch, isAuthenticated, isLoading: authLoading } = useAuth();
+  const [status, setStatus] = useState<MetaAgentStatus | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch meta agent status
+  const fetchStatus = async () => {
+    try {
+      const res = await authFetch("/api/meta-agent/status");
+      const data = await res.json();
+      setStatus(data);
+    } catch (e) {
+      console.error("[MetaAgent] Failed to fetch status:", e);
+    }
+  };
+
+  useEffect(() => {
+    // Only fetch when authenticated
+    if (!authLoading && isAuthenticated) {
+      fetchStatus();
+    }
+  }, [authFetch, isAuthenticated, authLoading]);
+
+  // Start the meta agent
+  const startAgent = async () => {
+    setIsStarting(true);
+    setError(null);
+    try {
+      const res = await authFetch("/api/meta-agent/start", { method: "POST" });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.error || "Failed to start assistant");
+      } else {
+        await fetchStatus();
+      }
+    } catch (e) {
+      setError("Failed to start assistant");
+    }
+    setIsStarting(false);
+  };
+
+  const isAvailable = !!(status?.enabled && status?.available);
+  const agent = status?.agent;
+  const isRunning = !!(agent?.status === "running" && agent?.port);
+
+  const value: MetaAgentContextValue = {
+    status,
+    isOpen,
+    isStarting,
+    error,
+    isAvailable,
+    isRunning,
+    agent,
+    toggle: () => setIsOpen(!isOpen),
+    close: () => setIsOpen(false),
+    startAgent,
+  };
+
+  return (
+    <MetaAgentContext.Provider value={value}>
+      {children}
+    </MetaAgentContext.Provider>
+  );
+}
+
+// Header button component - to be used in Header.tsx
+export function MetaAgentButton() {
+  const ctx = useMetaAgent();
+  if (!ctx?.isAvailable) return null;
+
+  return (
+    <button
+      onClick={ctx.toggle}
+      className={`hidden md:flex items-center gap-2 px-3 py-2 rounded transition ${
+        ctx.isOpen
+          ? "bg-[#f97316] text-white"
+          : "bg-[#151515] hover:bg-[#1a1a1a] text-[#888] hover:text-white"
+      }`}
+      title="Apteva Assistant"
+    >
+      <AssistantIcon className="w-5 h-5" />
+      <span className="text-sm">Assistant</span>
+      {ctx.isRunning && (
+        <span className="w-2 h-2 rounded-full bg-green-400" />
+      )}
+    </button>
+  );
+}
+
+// Chat panel component - renders as a right-side drawer
+export function MetaAgentPanel() {
+  const ctx = useMetaAgent();
+  if (!ctx?.isAvailable || !ctx.isOpen) return null;
+
+  const { agent, isRunning, error, isStarting, startAgent, close } = ctx;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="hidden md:block fixed inset-0 bg-black/20 z-40"
+        onClick={close}
+      />
+
+      {/* Drawer Panel */}
+      <div className="hidden md:flex fixed top-0 right-0 h-full w-[480px] lg:w-[540px] bg-[#0a0a0a] border-l border-[#1a1a1a] shadow-2xl z-50 flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-[#1a1a1a] bg-[#111]">
+          <div className="flex items-center gap-2">
+            <div className={`w-2 h-2 rounded-full ${isRunning ? "bg-green-400" : "bg-[#444]"}`} />
+            <span className="font-medium text-sm">Apteva Assistant</span>
+          </div>
+          <button
+            onClick={close}
+            className="text-[#666] hover:text-[#888] transition"
+          >
+            <CloseIcon />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-h-0 flex flex-col">
+          {isRunning ? (
+            <Chat
+              agentId="default"
+              apiUrl={`/api/agents/${agent!.id}`}
+              placeholder="Ask me anything about Apteva..."
+              variant="terminal"
+              showHeader={false}
+            />
+          ) : (
+            <div className="flex-1 flex flex-col items-center justify-center p-6 text-center">
+              <AssistantIcon className="w-12 h-12 text-[#333] mb-4" />
+              <h3 className="font-medium mb-2">Apteva Assistant</h3>
+              <p className="text-sm text-[#666] mb-6">
+                I can help you navigate Apteva, create agents, set up MCP servers, and more.
+              </p>
+              {error && (
+                <p className="text-sm text-red-400 mb-4">{error}</p>
+              )}
+              <button
+                onClick={startAgent}
+                disabled={isStarting}
+                className="bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 text-white px-6 py-2 rounded font-medium transition"
+              >
+                {isStarting ? "Starting..." : "Start Assistant"}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function AssistantIcon({ className = "w-6 h-6" }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
+      />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  );
+}
+
+function MinimizeIcon() {
+  return (
+    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+    </svg>
+  );
+}

package/src/web/components/settings/SettingsPage.tsx

@@ -7,41 +7,56 @@ import type { Provider } from "../../types";
 type SettingsTab = "providers" | "projects" | "updates" | "data";
 
 export function SettingsPage() {
+  const { projectsEnabled } = useProjects();
   const [activeTab, setActiveTab] = useState<SettingsTab>("providers");
 
+  const tabs: { key: SettingsTab; label: string }[] = [
+    { key: "providers", label: "Providers" },
+    ...(projectsEnabled ? [{ key: "projects" as SettingsTab, label: "Projects" }] : []),
+    { key: "updates", label: "Updates" },
+    { key: "data", label: "Data" },
+  ];
+
   return (
-    <div className="flex-1 flex overflow-hidden">
-      {/* Settings Sidebar */}
-      <div className="w-48 border-r border-[#1a1a1a] p-4">
+    <div className="flex-1 flex flex-col md:flex-row overflow-hidden">
+      {/* Mobile: Horizontal scrolling tabs */}
+      <div className="md:hidden border-b border-[#1a1a1a] bg-[#0a0a0a]">
+        <div className="flex overflow-x-auto" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+          {tabs.map(tab => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={`flex-shrink-0 px-4 py-3 text-sm font-medium border-b-2 transition ${
+                activeTab === tab.key
+                  ? "border-[#f97316] text-[#f97316]"
+                  : "border-transparent text-[#666] hover:text-[#888]"
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Desktop: Settings Sidebar */}
+      <div className="hidden md:block w-48 border-r border-[#1a1a1a] p-4 flex-shrink-0">
         <h2 className="text-sm font-medium text-[#666] uppercase tracking-wider mb-3">Settings</h2>
         <nav className="space-y-1">
-          <SettingsNavItem
-            label="Providers"
-            active={activeTab === "providers"}
-            onClick={() => setActiveTab("providers")}
-          />
-          <SettingsNavItem
-            label="Projects"
-            active={activeTab === "projects"}
-            onClick={() => setActiveTab("projects")}
-          />
-          <SettingsNavItem
-            label="Updates"
-            active={activeTab === "updates"}
-            onClick={() => setActiveTab("updates")}
-          />
-          <SettingsNavItem
-            label="Data"
-            active={activeTab === "data"}
-            onClick={() => setActiveTab("data")}
-          />
+          {tabs.map(tab => (
+            <SettingsNavItem
+              key={tab.key}
+              label={tab.label}
+              active={activeTab === tab.key}
+              onClick={() => setActiveTab(tab.key)}
+            />
+          ))}
         </nav>
       </div>
 
       {/* Settings Content */}
-      <div className="flex-1 overflow-auto p-6">
+      <div className="flex-1 overflow-auto p-4 md:p-6">
         {activeTab === "providers" && <ProvidersSettings />}
-        {activeTab === "projects" && <ProjectsSettings />}
+        {activeTab === "projects" && projectsEnabled && <ProjectsSettings />}
         {activeTab === "updates" && <UpdatesSettings />}
         {activeTab === "data" && <DataSettings />}
       </div>
@@ -121,11 +136,22 @@ function ProvidersSettings() {
         body: JSON.stringify({ key: apiKey }),
       });
 
+      const saveData = await saveRes.json();
       if (!saveRes.ok) {
-        const data = await saveRes.json();
-        setError(data.error || "Failed to save key");
+        setError(saveData.error || "Failed to save key");
       } else {
-        setSuccess("API key saved!");
+        // Build success message including agent restart info
+        let msg = "API key saved!";
+        if (saveData.restartedAgents && saveData.restartedAgents.length > 0) {
+          const successCount = saveData.restartedAgents.filter((a: { success: boolean }) => a.success).length;
+          const failCount = saveData.restartedAgents.length - successCount;
+          if (failCount === 0) {
+            msg += ` Restarted ${successCount} agent${successCount > 1 ? 's' : ''} with new key.`;
+          } else {
+            msg += ` Restarted ${successCount}/${saveData.restartedAgents.length} agents.`;
+          }
+        }
+        setSuccess(msg);
         setApiKey("");
         setSelectedProvider(null);
         fetchProviders();
@@ -148,10 +174,34 @@ function ProvidersSettings() {
   const llmConfiguredCount = llmProviders.filter(p => p.hasKey).length;
   const intConfiguredCount = integrations.filter(p => p.hasKey).length;
 
+  // Auto-dismiss success message after 5 seconds
+  useEffect(() => {
+    if (success && !selectedProvider) {
+      const timer = setTimeout(() => setSuccess(null), 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [success, selectedProvider]);
+
   return (
     <>
     {ConfirmDialog}
     <div className="space-y-10">
+      {/* Global Success Banner */}
+      {success && !selectedProvider && (
+        <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-4 flex items-center justify-between">
+          <div className="flex items-center gap-2 text-green-400">
+            <CheckIcon className="w-5 h-5" />
+            <span>{success}</span>
+          </div>
+          <button
+            onClick={() => setSuccess(null)}
+            className="text-green-400 hover:text-green-300"
+          >
+            <CloseIcon className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+
       {/* AI Providers Section */}
       <div>
         <div className="mb-6">
@@ -768,73 +818,79 @@ function ProviderKeyCard({
         )}
       </div>
 
-      {provider.hasKey ? (
-        <div className="flex items-center justify-between mt-3 pt-3 border-t border-[#1a1a1a]">
-          <a
-            href={provider.docsUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-sm text-[#3b82f6] hover:underline"
-          >
-            View docs
-          </a>
-          <button
-            onClick={onDelete}
-            className="text-red-400 hover:text-red-300 text-sm"
-          >
-            Remove key
-          </button>
-        </div>
-      ) : (
-        <div className="mt-3 pt-3 border-t border-[#1a1a1a]">
-          {isEditing ? (
-            <div className="space-y-3">
-              <input
-                type="password"
-                value={apiKey}
-                onChange={e => onApiKeyChange(e.target.value)}
-                placeholder="Enter API key..."
-                autoFocus
-                className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 focus:outline-none focus:border-[#f97316]"
-              />
-              {error && <p className="text-red-400 text-sm">{error}</p>}
-              {success && <p className="text-green-400 text-sm">{success}</p>}
-              <div className="flex gap-2">
-                <button
-                  onClick={onCancelEdit}
-                  className="flex-1 px-3 py-1.5 border border-[#333] rounded text-sm hover:border-[#666]"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={onSave}
-                  disabled={!apiKey || saving}
-                  className="flex-1 px-3 py-1.5 bg-[#f97316] text-black rounded text-sm font-medium disabled:opacity-50"
-                >
-                  {testing ? "Validating..." : saving ? "Saving..." : "Save"}
-                </button>
-              </div>
-            </div>
-          ) : (
-            <div className="flex items-center justify-between">
-              <a
-                href={provider.docsUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-[#3b82f6] hover:underline"
+      <div className="mt-3 pt-3 border-t border-[#1a1a1a]">
+        {isEditing ? (
+          <div className="space-y-3">
+            <input
+              type="password"
+              value={apiKey}
+              onChange={e => onApiKeyChange(e.target.value)}
+              placeholder={provider.hasKey ? "Enter new API key..." : "Enter API key..."}
+              autoFocus
+              className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 focus:outline-none focus:border-[#f97316]"
+            />
+            {error && <p className="text-red-400 text-sm">{error}</p>}
+            {success && <p className="text-green-400 text-sm">{success}</p>}
+            <div className="flex gap-2">
+              <button
+                onClick={onCancelEdit}
+                className="flex-1 px-3 py-1.5 border border-[#333] rounded text-sm hover:border-[#666]"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={onSave}
+                disabled={!apiKey || saving}
+                className="flex-1 px-3 py-1.5 bg-[#f97316] text-black rounded text-sm font-medium disabled:opacity-50"
               >
-                Get API key
-              </a>
+                {testing ? "Validating..." : saving ? "Saving..." : "Save"}
+              </button>
+            </div>
+          </div>
+        ) : provider.hasKey ? (
+          <div className="flex items-center justify-between">
+            <a
+              href={provider.docsUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-[#3b82f6] hover:underline"
+            >
+              View docs
+            </a>
+            <div className="flex items-center gap-3">
               <button
                 onClick={onStartEdit}
-                className="text-sm text-[#f97316] hover:text-[#fb923c]"
+                className="text-sm text-[#888] hover:text-[#e0e0e0]"
+              >
+                Update key
+              </button>
+              <button
+                onClick={onDelete}
+                className="text-red-400 hover:text-red-300 text-sm"
               >
-                + Add key
+                Remove
               </button>
             </div>
-          )}
-        </div>
-      )}
+          </div>
+        ) : (
+          <div className="flex items-center justify-between">
+            <a
+              href={provider.docsUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-[#3b82f6] hover:underline"
+            >
+              Get API key
+            </a>
+            <button
+              onClick={onStartEdit}
+              className="text-sm text-[#f97316] hover:text-[#fb923c]"
+            >
+              + Add key
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 }
@@ -874,73 +930,79 @@ function IntegrationKeyCard({
         )}
       </div>
 
-      {provider.hasKey ? (
-        <div className="flex items-center justify-between mt-3 pt-3 border-t border-[#1a1a1a]">
-          <a
-            href={provider.docsUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-sm text-[#3b82f6] hover:underline"
-          >
-            View docs
-          </a>
-          <button
-            onClick={onDelete}
-            className="text-red-400 hover:text-red-300 text-sm"
-          >
-            Remove key
-          </button>
-        </div>
-      ) : (
-        <div className="mt-3 pt-3 border-t border-[#1a1a1a]">
-          {isEditing ? (
-            <div className="space-y-3">
-              <input
-                type="password"
-                value={apiKey}
-                onChange={e => onApiKeyChange(e.target.value)}
-                placeholder="Enter API key..."
-                autoFocus
-                className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 focus:outline-none focus:border-[#f97316]"
-              />
-              {error && <p className="text-red-400 text-sm">{error}</p>}
-              {success && <p className="text-green-400 text-sm">{success}</p>}
-              <div className="flex gap-2">
-                <button
-                  onClick={onCancelEdit}
-                  className="flex-1 px-3 py-1.5 border border-[#333] rounded text-sm hover:border-[#666]"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={onSave}
-                  disabled={!apiKey || saving}
-                  className="flex-1 px-3 py-1.5 bg-[#f97316] text-black rounded text-sm font-medium disabled:opacity-50"
-                >
-                  {testing ? "Validating..." : saving ? "Saving..." : "Save"}
-                </button>
-              </div>
-            </div>
-          ) : (
-            <div className="flex items-center justify-between">
-              <a
-                href={provider.docsUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-[#3b82f6] hover:underline"
+      <div className="mt-3 pt-3 border-t border-[#1a1a1a]">
+        {isEditing ? (
+          <div className="space-y-3">
+            <input
+              type="password"
+              value={apiKey}
+              onChange={e => onApiKeyChange(e.target.value)}
+              placeholder={provider.hasKey ? "Enter new API key..." : "Enter API key..."}
+              autoFocus
+              className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 focus:outline-none focus:border-[#f97316]"
+            />
+            {error && <p className="text-red-400 text-sm">{error}</p>}
+            {success && <p className="text-green-400 text-sm">{success}</p>}
+            <div className="flex gap-2">
+              <button
+                onClick={onCancelEdit}
+                className="flex-1 px-3 py-1.5 border border-[#333] rounded text-sm hover:border-[#666]"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={onSave}
+                disabled={!apiKey || saving}
+                className="flex-1 px-3 py-1.5 bg-[#f97316] text-black rounded text-sm font-medium disabled:opacity-50"
               >
-                Get API key
-              </a>
+                {testing ? "Validating..." : saving ? "Saving..." : "Save"}
+              </button>
+            </div>
+          </div>
+        ) : provider.hasKey ? (
+          <div className="flex items-center justify-between">
+            <a
+              href={provider.docsUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-[#3b82f6] hover:underline"
+            >
+              View docs
+            </a>
+            <div className="flex items-center gap-3">
               <button
                 onClick={onStartEdit}
-                className="text-sm text-[#f97316] hover:text-[#fb923c]"
+                className="text-sm text-[#888] hover:text-[#e0e0e0]"
+              >
+                Update key
+              </button>
+              <button
+                onClick={onDelete}
+                className="text-red-400 hover:text-red-300 text-sm"
               >
-                + Add key
+                Remove
               </button>
             </div>
-          )}
-        </div>
-      )}
+          </div>
+        ) : (
+          <div className="flex items-center justify-between">
+            <a
+              href={provider.docsUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-[#3b82f6] hover:underline"
+            >
+              Get API key
+            </a>
+            <button
+              onClick={onStartEdit}
+              className="text-sm text-[#f97316] hover:text-[#fb923c]"
+            >
+              + Add key
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 }