apteva 0.4.57 → 0.7.0

package/src/web/components/mcp/index.ts

@@ -1 +0,0 @@
-export { McpPage } from "./McpPage";

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

@@ -1,245 +0,0 @@
-import React, { useState, useEffect, useMemo, useCallback, createContext, useContext, type ReactNode } from "react";
-import { Chat } from "@apteva/apteva-kit";
-import { useAuth, useProjects, useTriggerRefresh, useTheme, useUIMode } 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-[var(--color-accent)] text-white"
-          : "bg-[var(--color-bg-secondary)] hover:bg-[var(--color-surface-raised)] text-[var(--color-text-secondary)] 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 { theme } = useTheme();
-  const { t } = useUIMode();
-  const ctx = useMetaAgent();
-  const { currentProjectId, currentProject } = useProjects();
-  const triggerRefresh = useTriggerRefresh();
-  if (!ctx?.isAvailable || !ctx.isOpen) return null;
-
-  const { agent, isRunning, error, isStarting, startAgent, close } = ctx;
-
-  // Build context string for the meta agent
-  const chatContext = useMemo(() => {
-    const parts: string[] = [];
-    if (currentProject) {
-      parts.push(`Current project: "${currentProject.name}" (id: ${currentProject.id})`);
-    } else if (currentProjectId === "unassigned") {
-      parts.push("Viewing: unassigned agents (no project)");
-    } else {
-      parts.push("Viewing: All Projects");
-    }
-    return parts.join("\n");
-  }, [currentProjectId, currentProject]);
-
-  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-[var(--color-bg)] border-l border-[var(--color-border)] shadow-2xl z-50 flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--color-border)] bg-[var(--color-surface)]">
-          <div className="flex items-center gap-2">
-            <div className={`w-2 h-2 rounded-full ${isRunning ? "bg-green-400" : "bg-[var(--color-scrollbar)]"}`} />
-            <span className="font-medium text-sm">Apteva Assistant</span>
-          </div>
-          <button
-            onClick={close}
-            className="text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] 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"
-              theme={theme.id as "light" | "dark"}
-              showHeader={false}
-              context={chatContext}
-              onToolResult={triggerRefresh}
-            />
-          ) : (
-            <div className="flex-1 flex flex-col items-center justify-center p-6 text-center">
-              <AssistantIcon className="w-12 h-12 text-[var(--color-border-light)] mb-4" />
-              <h3 className="font-medium mb-2">Apteva Assistant</h3>
-              <p className="text-sm text-[var(--color-text-muted)] mb-6">
-                {t(
-                  "I can help you navigate Apteva, create agents, set up MCP servers, and more.",
-                  "I can help you hire employees, assign them work, and manage your team."
-                )}
-              </p>
-              {error && (
-                <p className="text-sm text-red-400 mb-4">{error}</p>
-              )}
-              <button
-                onClick={startAgent}
-                disabled={isStarting}
-                className="bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] 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/onboarding/OnboardingWizard.tsx

@@ -1,404 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { CheckIcon } from "../common/Icons";
-import { CreateAccountStep } from "../auth";
-import type { Provider } from "../../types";
-
-interface OnboardingWizardProps {
-  onComplete: () => void;
-  needsAccount?: boolean; // Whether to show account creation step
-}
-
-export function OnboardingWizard({ onComplete, needsAccount = false }: OnboardingWizardProps) {
-  // Step 0 = account creation (if needed), Step 1 = add keys, Step 2 = complete
-  const [step, setStep] = useState(needsAccount ? 0 : 1);
-  const [providers, setProviders] = useState<Provider[]>([]);
-  const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
-  const [apiKey, setApiKey] = useState("");
-  const [saving, setSaving] = useState(false);
-  const [testing, setTesting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState<string | null>(null);
-  const [accountCreated, setAccountCreated] = useState(false);
-
-  // Get auth token from session storage (set during account creation)
-  const getAuthHeaders = (): Record<string, string> => {
-    const token = sessionStorage.getItem("accessToken");
-    return token ? { Authorization: `Bearer ${token}` } : {};
-  };
-
-  useEffect(() => {
-    // Don't fetch providers until after account is created (if needed)
-    if (needsAccount && !accountCreated && step === 0) return;
-
-    fetch("/api/providers", { headers: getAuthHeaders() })
-      .then(res => res.json())
-      .then(data => {
-        // Only show LLM providers in onboarding, not integrations
-        const llmProviders = (data.providers || []).filter((p: Provider) => p.type === "llm");
-        setProviders(llmProviders);
-      });
-  }, [accountCreated, step, needsAccount]);
-
-  const configuredProviders = providers.filter(p => p.hasKey);
-
-  const saveKey = async () => {
-    if (!selectedProvider || !apiKey) return;
-    setSaving(true);
-    setError(null);
-    setSuccess(null);
-
-    try {
-      setTesting(true);
-      const testRes = await fetch(`/api/keys/${selectedProvider}/test`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json", ...getAuthHeaders() },
-        body: JSON.stringify({ key: apiKey }),
-      });
-      const testData = await testRes.json();
-      setTesting(false);
-
-      if (!testData.valid) {
-        setError(testData.error || "API key is invalid");
-        setSaving(false);
-        return;
-      }
-
-      const saveRes = await fetch(`/api/keys/${selectedProvider}`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json", ...getAuthHeaders() },
-        body: JSON.stringify({ key: apiKey }),
-      });
-      const saveData = await saveRes.json();
-
-      if (!saveRes.ok) {
-        setError(saveData.error || "Failed to save key");
-      } else {
-        setSuccess("API key saved successfully!");
-        setApiKey("");
-        const res = await fetch("/api/providers", { headers: getAuthHeaders() });
-        const data = await res.json();
-        setProviders(data.providers || []);
-        setSelectedProvider(null);
-      }
-    } catch (e) {
-      setError("Failed to save key");
-    }
-    setSaving(false);
-  };
-
-  const completeOnboarding = async () => {
-    // Create a default project for the user
-    try {
-      const projectRes = await fetch("/api/projects", {
-        method: "POST",
-        headers: { "Content-Type": "application/json", ...getAuthHeaders() },
-        body: JSON.stringify({
-          name: "My Project",
-          description: "Default project for organizing agents",
-          color: "#f97316", // Orange - matches brand color
-        }),
-      });
-
-      if (projectRes.ok) {
-        const data = await projectRes.json();
-        // Set this project as the current project in localStorage
-        if (data.project?.id) {
-          localStorage.setItem("apteva_current_project", data.project.id);
-        }
-      }
-    } catch (e) {
-      // Don't block onboarding if project creation fails
-      console.error("Failed to create default project:", e);
-    }
-
-    await fetch("/api/onboarding/complete", { method: "POST", headers: getAuthHeaders() });
-    onComplete();
-  };
-
-  const handleAccountCreated = () => {
-    setAccountCreated(true);
-    setStep(1);
-  };
-
-  // Calculate total steps and current progress
-  const totalSteps = needsAccount ? 3 : 2;
-  const currentStep = needsAccount ? step : step - 1;
-
-  return (
-    <div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] flex items-center justify-center p-8">
-      <div className="w-full max-w-2xl">
-        {/* Logo */}
-        <div className="text-center mb-8">
-          <div className="flex items-center justify-center gap-2 mb-2">
-            <span className="text-[var(--color-accent)] text-3xl">&gt;_</span>
-            <span className="text-3xl tracking-wider">apteva</span>
-          </div>
-          <p className="text-[var(--color-text-muted)]">Run AI agents locally</p>
-        </div>
-
-        {/* Progress */}
-        <div className="flex items-center justify-center gap-2 mb-8">
-          {needsAccount && (
-            <>
-              <div className={`w-3 h-3 rounded-full ${step >= 0 ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-surface-raised)]'}`} />
-              <div className={`w-16 h-0.5 ${step >= 1 ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-surface-raised)]'}`} />
-            </>
-          )}
-          <div className={`w-3 h-3 rounded-full ${step >= 1 ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-surface-raised)]'}`} />
-          <div className={`w-16 h-0.5 ${step >= 2 ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-surface-raised)]'}`} />
-          <div className={`w-3 h-3 rounded-full ${step >= 2 ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-surface-raised)]'}`} />
-        </div>
-
-        <div className="bg-[var(--color-surface)] card p-8">
-          {step === 0 && needsAccount && (
-            <CreateAccountStep onComplete={handleAccountCreated} />
-          )}
-
-          {step === 1 && (
-            <Step1AddKeys
-              providers={providers}
-              configuredProviders={configuredProviders}
-              selectedProvider={selectedProvider}
-              apiKey={apiKey}
-              saving={saving}
-              testing={testing}
-              error={error}
-              success={success}
-              onSelectProvider={setSelectedProvider}
-              onApiKeyChange={setApiKey}
-              onSaveKey={saveKey}
-              onContinue={() => setStep(2)}
-            />
-          )}
-
-          {step === 2 && (
-            <Step2Complete
-              configuredProviders={configuredProviders}
-              onAddMore={() => setStep(1)}
-              onComplete={completeOnboarding}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-interface Step1Props {
-  providers: Provider[];
-  configuredProviders: Provider[];
-  selectedProvider: string | null;
-  apiKey: string;
-  saving: boolean;
-  testing: boolean;
-  error: string | null;
-  success: string | null;
-  onSelectProvider: (id: string | null) => void;
-  onApiKeyChange: (key: string) => void;
-  onSaveKey: () => void;
-  onContinue: () => void;
-}
-
-function Step1AddKeys({
-  providers,
-  configuredProviders,
-  selectedProvider,
-  apiKey,
-  saving,
-  testing,
-  error,
-  success,
-  onSelectProvider,
-  onApiKeyChange,
-  onSaveKey,
-  onContinue,
-}: Step1Props) {
-  const selectedProviderData = providers.find(p => p.id === selectedProvider);
-
-  // When a provider is selected, show focused view with just that provider
-  if (selectedProvider && selectedProviderData) {
-    return (
-      <>
-        <h2 className="text-2xl font-semibold mb-2">Add {selectedProviderData.name} Key</h2>
-        <p className="text-[var(--color-text-muted)] mb-6">
-          Enter your API key below. It will be encrypted and stored locally.
-        </p>
-
-        <div className="mb-6">
-          <div className="p-4 rounded border border-[var(--color-accent)] bg-[var(--color-accent-5)] mb-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-medium">{selectedProviderData.name}</p>
-                <p className="text-sm text-[var(--color-text-muted)]">
-                  {selectedProviderData.models.length} models available
-                </p>
-              </div>
-              <a
-                href={selectedProviderData.docsUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-[#3b82f6] hover:underline"
-              >
-                Get API Key
-              </a>
-            </div>
-          </div>
-
-          <div className="space-y-3">
-            <input
-              type="password"
-              value={apiKey}
-              onChange={e => onApiKeyChange(e.target.value)}
-              placeholder="Enter your API key..."
-              autoFocus
-              className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-4 py-3 focus:outline-none focus:border-[var(--color-accent)] text-lg"
-            />
-            {error && <p className="text-red-400 text-sm">{error}</p>}
-            {success && <p className="text-green-400 text-sm">{success}</p>}
-          </div>
-        </div>
-
-        <div className="flex gap-3">
-          <button
-            onClick={() => {
-              onSelectProvider(null);
-              onApiKeyChange("");
-            }}
-            className="flex-1 border border-[var(--color-border-light)] hover:border-[var(--color-text-muted)] px-4 py-3 rounded font-medium transition"
-          >
-            Back
-          </button>
-          <button
-            onClick={onSaveKey}
-            disabled={!apiKey || saving}
-            className="flex-1 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed text-black px-4 py-3 rounded font-medium transition"
-          >
-            {testing ? "Testing..." : saving ? "Saving..." : "Save API Key"}
-          </button>
-        </div>
-      </>
-    );
-  }
-
-  // Default view: show all providers
-  return (
-    <>
-      <h2 className="text-2xl font-semibold mb-2">Welcome to apteva</h2>
-      <p className="text-[var(--color-text-muted)] mb-6">
-        To get started, you'll need to add at least one AI provider API key.
-        Your keys are encrypted and stored locally.
-      </p>
-
-      <div className="space-y-3 mb-6">
-        {providers.map(provider => (
-          <ProviderCard
-            key={provider.id}
-            provider={provider}
-            selected={false}
-            onSelect={() => !provider.hasKey && onSelectProvider(provider.id)}
-          />
-        ))}
-      </div>
-
-      <button
-        onClick={onContinue}
-        disabled={configuredProviders.length === 0}
-        className="w-full bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] disabled:opacity-50 disabled:cursor-not-allowed px-4 py-3 rounded font-medium transition"
-      >
-        {configuredProviders.length === 0
-          ? "Add at least one API key to continue"
-          : `Continue with ${configuredProviders.length} provider${configuredProviders.length > 1 ? 's' : ''}`
-        }
-      </button>
-    </>
-  );
-}
-
-interface ProviderCardProps {
-  provider: Provider;
-  selected: boolean;
-  onSelect: () => void;
-}
-
-function ProviderCard({ provider, selected, onSelect }: ProviderCardProps) {
-  return (
-    <div
-      onClick={onSelect}
-      className={`p-4 rounded border transition cursor-pointer ${
-        provider.hasKey
-          ? 'border-green-500/30 bg-green-500/5'
-          : selected
-          ? 'border-[var(--color-accent)] bg-[var(--color-accent-5)]'
-          : 'border-[var(--color-border-light)] hover:border-[var(--color-border-light)]'
-      }`}
-    >
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="font-medium">{provider.name}</p>
-          <p className="text-sm text-[var(--color-text-muted)]">
-            {provider.models.length} models available
-          </p>
-        </div>
-        {provider.hasKey ? (
-          <span className="text-green-400 text-sm flex items-center gap-1">
-            <CheckIcon />
-            Configured ({provider.keyHint})
-          </span>
-        ) : (
-          <a
-            href={provider.docsUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            onClick={e => e.stopPropagation()}
-            className="text-sm text-[#3b82f6] hover:underline"
-          >
-            Get API Key
-          </a>
-        )}
-      </div>
-    </div>
-  );
-}
-
-interface Step2Props {
-  configuredProviders: Provider[];
-  onAddMore: () => void;
-  onComplete: () => void;
-}
-
-function Step2Complete({ configuredProviders, onAddMore, onComplete }: Step2Props) {
-  return (
-    <>
-      <h2 className="text-2xl font-semibold mb-2">You're all set!</h2>
-      <p className="text-[var(--color-text-muted)] mb-6">
-        You've configured {configuredProviders.length} provider{configuredProviders.length > 1 ? 's' : ''}.
-        You can add more providers later in Settings.
-      </p>
-
-      <div className="space-y-2 mb-6">
-        {configuredProviders.map(provider => (
-          <div key={provider.id} className="flex items-center gap-3 p-3 bg-[var(--color-bg)] rounded">
-            <CheckIcon className="w-5 h-5 text-green-400" />
-            <span>{provider.name}</span>
-            <span className="text-[var(--color-text-muted)] text-sm">({provider.keyHint})</span>
-          </div>
-        ))}
-      </div>
-
-      <div className="flex gap-3">
-        <button
-          onClick={onAddMore}
-          className="flex-1 border border-[var(--color-border-light)] hover:border-[var(--color-accent)] px-4 py-3 rounded font-medium transition"
-        >
-          Add More
-        </button>
-        <button
-          onClick={onComplete}
-          className="flex-1 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-black px-4 py-3 rounded font-medium transition"
-        >
-          Start Using apteva
-        </button>
-      </div>
-    </>
-  );
-}

package/src/web/components/onboarding/index.ts

@@ -1 +0,0 @@
-export { OnboardingWizard } from "./OnboardingWizard";