apteva 0.1.0

package/src/web/components/onboarding/OnboardingWizard.tsx

@@ -0,0 +1,344 @@
+import React, { useState, useEffect } from "react";
+import { CheckIcon } from "../common/Icons";
+import type { Provider } from "../../types";
+
+interface OnboardingWizardProps {
+  onComplete: () => void;
+}
+
+export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
+  const [step, setStep] = useState(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);
+
+  useEffect(() => {
+    fetch("/api/providers")
+      .then(res => res.json())
+      .then(data => setProviders(data.providers || []));
+  }, []);
+
+  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" },
+        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" },
+        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");
+        const data = await res.json();
+        setProviders(data.providers || []);
+        setSelectedProvider(null);
+      }
+    } catch (e) {
+      setError("Failed to save key");
+    }
+    setSaving(false);
+  };
+
+  const completeOnboarding = async () => {
+    await fetch("/api/onboarding/complete", { method: "POST" });
+    onComplete();
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0a0a0a] text-[#e0e0e0] font-mono 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-[#f97316] text-3xl">&gt;_</span>
+            <span className="text-3xl tracking-wider">apteva</span>
+          </div>
+          <p className="text-[#666]">Run AI agents locally</p>
+        </div>
+
+        {/* Progress */}
+        <div className="flex items-center justify-center gap-2 mb-8">
+          <div className={`w-3 h-3 rounded-full ${step >= 1 ? 'bg-[#f97316]' : 'bg-[#333]'}`} />
+          <div className={`w-16 h-0.5 ${step >= 2 ? 'bg-[#f97316]' : 'bg-[#333]'}`} />
+          <div className={`w-3 h-3 rounded-full ${step >= 2 ? 'bg-[#f97316]' : 'bg-[#333]'}`} />
+        </div>
+
+        <div className="bg-[#111] rounded-lg border border-[#1a1a1a] p-8">
+          {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-[#666] 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-[#f97316] bg-[#f97316]/5 mb-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium">{selectedProviderData.name}</p>
+                <p className="text-sm text-[#666]">
+                  {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-[#0a0a0a] border border-[#333] rounded px-4 py-3 focus:outline-none focus:border-[#f97316] 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-[#333] hover:border-[#666] px-4 py-3 rounded font-medium transition"
+          >
+            Back
+          </button>
+          <button
+            onClick={onSaveKey}
+            disabled={!apiKey || saving}
+            className="flex-1 bg-[#f97316] hover:bg-[#fb923c] 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-[#666] 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-[#222] hover:bg-[#333] 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-[#f97316] bg-[#f97316]/5'
+          : 'border-[#222] hover:border-[#333]'
+      }`}
+    >
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="font-medium">{provider.name}</p>
+          <p className="text-sm text-[#666]">
+            {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-[#666] 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-[#0a0a0a] rounded">
+            <CheckIcon className="w-5 h-5 text-green-400" />
+            <span>{provider.name}</span>
+            <span className="text-[#666] text-sm">({provider.keyHint})</span>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex gap-3">
+        <button
+          onClick={onAddMore}
+          className="flex-1 border border-[#333] hover:border-[#f97316] px-4 py-3 rounded font-medium transition"
+        >
+          Add More
+        </button>
+        <button
+          onClick={onComplete}
+          className="flex-1 bg-[#f97316] hover:bg-[#fb923c] text-black px-4 py-3 rounded font-medium transition"
+        >
+          Start Using Apteva
+        </button>
+      </div>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,285 @@
+import React, { useState, useEffect } from "react";
+import { CheckIcon } from "../common/Icons";
+import type { Provider } from "../../types";
+
+type SettingsTab = "providers";
+
+export function SettingsPage() {
+  const [activeTab, setActiveTab] = useState<SettingsTab>("providers");
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Settings Sidebar */}
+      <div className="w-48 border-r border-[#1a1a1a] p-4">
+        <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")}
+          />
+          {/* Future settings tabs can be added here */}
+        </nav>
+      </div>
+
+      {/* Settings Content */}
+      <div className="flex-1 overflow-auto p-6">
+        {activeTab === "providers" && <ProvidersSettings />}
+      </div>
+    </div>
+  );
+}
+
+function SettingsNavItem({
+  label,
+  active,
+  onClick
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`w-full text-left px-3 py-2 rounded text-sm transition ${
+        active
+          ? "bg-[#1a1a1a] text-[#e0e0e0]"
+          : "text-[#666] hover:bg-[#111] hover:text-[#888]"
+      }`}
+    >
+      {label}
+    </button>
+  );
+}
+
+function ProvidersSettings() {
+  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 fetchProviders = async () => {
+    const res = await fetch("/api/providers");
+    const data = await res.json();
+    setProviders(data.providers || []);
+  };
+
+  useEffect(() => {
+    fetchProviders();
+  }, []);
+
+  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" },
+        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" },
+        body: JSON.stringify({ key: apiKey }),
+      });
+
+      if (!saveRes.ok) {
+        const data = await saveRes.json();
+        setError(data.error || "Failed to save key");
+      } else {
+        setSuccess("API key saved!");
+        setApiKey("");
+        setSelectedProvider(null);
+        fetchProviders();
+      }
+    } catch (e) {
+      setError("Failed to save key");
+    }
+    setSaving(false);
+  };
+
+  const deleteKey = async (providerId: string) => {
+    if (!confirm("Are you sure you want to remove this API key?")) return;
+    await fetch(`/api/keys/${providerId}`, { method: "DELETE" });
+    fetchProviders();
+  };
+
+  const configuredCount = providers.filter(p => p.hasKey).length;
+
+  return (
+    <div className="max-w-4xl">
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold mb-1">AI Providers</h1>
+        <p className="text-[#666]">
+          Manage your API keys for AI providers. {configuredCount} of {providers.length} configured.
+        </p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        {providers.map(provider => (
+          <ProviderKeyCard
+            key={provider.id}
+            provider={provider}
+            isEditing={selectedProvider === provider.id}
+            apiKey={apiKey}
+            saving={saving}
+            testing={testing}
+            error={selectedProvider === provider.id ? error : null}
+            success={selectedProvider === provider.id ? success : null}
+            onStartEdit={() => {
+              setSelectedProvider(provider.id);
+              setError(null);
+              setSuccess(null);
+            }}
+            onCancelEdit={() => {
+              setSelectedProvider(null);
+              setApiKey("");
+              setError(null);
+            }}
+            onApiKeyChange={setApiKey}
+            onSave={saveKey}
+            onDelete={() => deleteKey(provider.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface ProviderKeyCardProps {
+  provider: Provider;
+  isEditing: boolean;
+  apiKey: string;
+  saving: boolean;
+  testing: boolean;
+  error: string | null;
+  success: string | null;
+  onStartEdit: () => void;
+  onCancelEdit: () => void;
+  onApiKeyChange: (key: string) => void;
+  onSave: () => void;
+  onDelete: () => void;
+}
+
+function ProviderKeyCard({
+  provider,
+  isEditing,
+  apiKey,
+  saving,
+  testing,
+  error,
+  success,
+  onStartEdit,
+  onCancelEdit,
+  onApiKeyChange,
+  onSave,
+  onDelete,
+}: ProviderKeyCardProps) {
+  return (
+    <div className={`bg-[#111] border rounded-lg p-4 ${
+      provider.hasKey ? 'border-green-500/20' : 'border-[#1a1a1a]'
+    }`}>
+      <div className="flex items-center justify-between mb-2">
+        <div>
+          <h3 className="font-medium">{provider.name}</h3>
+          <p className="text-sm text-[#666]">{provider.models.length} models</p>
+        </div>
+        {provider.hasKey ? (
+          <span className="text-green-400 text-xs flex items-center gap-1 bg-green-500/10 px-2 py-1 rounded">
+            <CheckIcon className="w-3 h-3" />
+            {provider.keyHint}
+          </span>
+        ) : (
+          <span className="text-[#666] text-xs bg-[#1a1a1a] px-2 py-1 rounded">
+            Not configured
+          </span>
+        )}
+      </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"
+              >
+                Get API key
+              </a>
+              <button
+                onClick={onStartEdit}
+                className="text-sm text-[#f97316] hover:text-[#fb923c]"
+              >
+                + Add key
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

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

package/src/web/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useAgents } from "./useAgents";
+export { useProviders } from "./useProviders";
+export { useOnboarding } from "./useOnboarding";

package/src/web/hooks/useAgents.ts

@@ -0,0 +1,62 @@
+import { useState, useEffect, useCallback } from "react";
+import type { Agent } from "../types";
+
+export function useAgents(enabled: boolean) {
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchAgents = useCallback(async () => {
+    const res = await fetch("/api/agents");
+    const data = await res.json();
+    setAgents(data.agents || []);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    if (enabled) {
+      fetchAgents();
+    }
+  }, [enabled, fetchAgents]);
+
+  const createAgent = async (agent: {
+    name: string;
+    model: string;
+    provider: string;
+    systemPrompt: string;
+  }) => {
+    await fetch("/api/agents", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(agent),
+    });
+    await fetchAgents();
+  };
+
+  const deleteAgent = async (id: string) => {
+    await fetch(`/api/agents/${id}`, { method: "DELETE" });
+    await fetchAgents();
+  };
+
+  const toggleAgent = async (agent: Agent): Promise<{ error?: string }> => {
+    const action = agent.status === "running" ? "stop" : "start";
+    const res = await fetch(`/api/agents/${agent.id}/${action}`, { method: "POST" });
+    const data = await res.json();
+    await fetchAgents();
+    if (!res.ok && data.error) {
+      return { error: data.error };
+    }
+    return {};
+  };
+
+  const runningCount = agents.filter(a => a.status === "running").length;
+
+  return {
+    agents,
+    loading,
+    runningCount,
+    fetchAgents,
+    createAgent,
+    deleteAgent,
+    toggleAgent,
+  };
+}