apteva 0.1.0

package/src/web/App.tsx

@@ -0,0 +1,218 @@
+import React, { useState, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import "@apteva/apteva-kit/styles.css";
+
+// Types
+import type { Agent, Provider, Route, NewAgentForm } from "./types";
+
+// Hooks
+import { useAgents, useProviders, useOnboarding } from "./hooks";
+
+// Components
+import {
+  LoadingSpinner,
+  Header,
+  Sidebar,
+  ErrorBanner,
+  OnboardingWizard,
+  SettingsPage,
+  CreateAgentModal,
+  AgentsView,
+  Dashboard,
+} from "./components";
+
+function App() {
+  // Onboarding state
+  const { isComplete: onboardingComplete, setIsComplete: setOnboardingComplete } = useOnboarding();
+
+  // Data hooks
+  const {
+    agents,
+    loading,
+    runningCount,
+    fetchAgents,
+    createAgent,
+    deleteAgent,
+    toggleAgent,
+  } = useAgents(onboardingComplete === true);
+
+  const {
+    providers,
+    configuredProviders,
+    fetchProviders,
+  } = useProviders(onboardingComplete === true);
+
+  // UI state
+  const [showCreate, setShowCreate] = useState(false);
+  const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
+  const [route, setRoute] = useState<Route>("dashboard");
+  const [startError, setStartError] = useState<string | null>(null);
+
+  // Form state
+  const [newAgent, setNewAgent] = useState<NewAgentForm>({
+    name: "",
+    model: "",
+    provider: "",
+    systemPrompt: "You are a helpful assistant.",
+  });
+
+  // Set default provider when providers are loaded
+  useEffect(() => {
+    if (configuredProviders.length > 0 && !newAgent.provider) {
+      const defaultProvider = configuredProviders[0];
+      const defaultModel = defaultProvider.models.find(m => m.recommended)?.value || defaultProvider.models[0]?.value || "";
+      setNewAgent(prev => ({
+        ...prev,
+        provider: defaultProvider.id,
+        model: defaultModel,
+      }));
+    }
+  }, [configuredProviders, newAgent.provider]);
+
+  // Update selected agent when agents list changes
+  useEffect(() => {
+    if (selectedAgent) {
+      const updated = agents.find(a => a.id === selectedAgent.id);
+      if (updated) {
+        setSelectedAgent(updated);
+      } else {
+        setSelectedAgent(null);
+      }
+    }
+  }, [agents, selectedAgent]);
+
+  const handleProviderChange = (providerId: string) => {
+    const provider = providers.find(p => p.id === providerId);
+    const defaultModel = provider?.models.find(m => m.recommended)?.value || provider?.models[0]?.value || "";
+    setNewAgent(prev => ({
+      ...prev,
+      provider: providerId,
+      model: defaultModel,
+    }));
+  };
+
+  const handleCreateAgent = async () => {
+    if (!newAgent.name) return;
+    await createAgent(newAgent);
+    const defaultProvider = configuredProviders[0];
+    const defaultModel = defaultProvider?.models.find(m => m.recommended)?.value || defaultProvider?.models[0]?.value || "";
+    setNewAgent({
+      name: "",
+      model: defaultModel,
+      provider: defaultProvider?.id || "",
+      systemPrompt: "You are a helpful assistant.",
+    });
+    setShowCreate(false);
+  };
+
+  const handleToggleAgent = async (agent: Agent, e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    setStartError(null);
+    const result = await toggleAgent(agent);
+    if (result.error) {
+      setStartError(result.error);
+    }
+  };
+
+  const handleDeleteAgent = async (id: string, e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    if (selectedAgent?.id === id) {
+      setSelectedAgent(null);
+    }
+    await deleteAgent(id);
+  };
+
+  const handleSelectAgent = (agent: Agent) => {
+    setSelectedAgent(agent);
+    setStartError(null);
+    setRoute("agents");
+  };
+
+  const handleNavigate = (newRoute: Route) => {
+    setRoute(newRoute);
+    setSelectedAgent(null);
+  };
+
+  const handleOnboardingComplete = () => {
+    setOnboardingComplete(true);
+    fetchProviders();
+  };
+
+  // Show loading while checking onboarding
+  if (onboardingComplete === null) {
+    return <LoadingSpinner fullScreen />;
+  }
+
+  // Show onboarding if not complete
+  if (!onboardingComplete) {
+    return <OnboardingWizard onComplete={handleOnboardingComplete} />;
+  }
+
+  return (
+    <div className="min-h-screen bg-[#0a0a0a] text-[#e0e0e0] font-mono flex flex-col">
+      <Header
+        onNewAgent={() => setShowCreate(true)}
+        canCreateAgent={configuredProviders.length > 0}
+      />
+
+      {startError && (
+        <ErrorBanner message={startError} onDismiss={() => setStartError(null)} />
+      )}
+
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar
+          route={route}
+          agentCount={agents.length}
+          onNavigate={handleNavigate}
+        />
+
+        <main className="flex-1 overflow-hidden flex">
+          {route === "settings" && <SettingsPage />}
+
+          {route === "agents" && (
+            <AgentsView
+              agents={agents}
+              loading={loading}
+              selectedAgent={selectedAgent}
+              onSelectAgent={handleSelectAgent}
+              onCloseAgent={() => setSelectedAgent(null)}
+              onToggleAgent={handleToggleAgent}
+              onDeleteAgent={handleDeleteAgent}
+            />
+          )}
+
+          {route === "dashboard" && (
+            <Dashboard
+              agents={agents}
+              loading={loading}
+              runningCount={runningCount}
+              configuredProviders={configuredProviders}
+              onNavigate={handleNavigate}
+              onSelectAgent={handleSelectAgent}
+            />
+          )}
+        </main>
+      </div>
+
+      {showCreate && (
+        <CreateAgentModal
+          form={newAgent}
+          providers={providers}
+          configuredProviders={configuredProviders}
+          onFormChange={setNewAgent}
+          onProviderChange={handleProviderChange}
+          onCreate={handleCreateAgent}
+          onClose={() => setShowCreate(false)}
+          onGoToSettings={() => {
+            setShowCreate(false);
+            setRoute("settings");
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+// Mount the app
+const root = createRoot(document.getElementById("root")!);
+root.render(<App />);

package/src/web/components/agents/AgentCard.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import type { Agent } from "../../types";
+
+interface AgentCardProps {
+  agent: Agent;
+  selected: boolean;
+  onSelect: () => void;
+  onToggle: (e?: React.MouseEvent) => void;
+  onDelete: (e?: React.MouseEvent) => void;
+}
+
+export function AgentCard({ agent, selected, onSelect, onToggle, onDelete }: AgentCardProps) {
+  return (
+    <div
+      onClick={onSelect}
+      className={`bg-[#111] rounded p-5 border transition cursor-pointer ${
+        selected
+          ? 'border-[#f97316]'
+          : 'border-[#1a1a1a] hover:border-[#333]'
+      }`}
+    >
+      <div className="flex items-start justify-between mb-3">
+        <div>
+          <h3 className="font-semibold text-lg">{agent.name}</h3>
+          <p className="text-sm text-[#666]">
+            {agent.provider} / {agent.model}
+            {agent.port && <span className="text-[#444]"> · :{agent.port}</span>}
+          </p>
+        </div>
+        <StatusBadge status={agent.status} />
+      </div>
+
+      <p className="text-sm text-[#666] line-clamp-2 mb-4">
+        {agent.systemPrompt}
+      </p>
+
+      <div className="flex gap-2">
+        <button
+          onClick={onToggle}
+          className={`flex-1 px-3 py-1.5 rounded text-sm font-medium transition ${
+            agent.status === "running"
+              ? "bg-[#f97316]/20 text-[#f97316] hover:bg-[#f97316]/30"
+              : "bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30"
+          }`}
+        >
+          {agent.status === "running" ? "Stop" : "Start"}
+        </button>
+        <button
+          onClick={onDelete}
+          className="px-3 py-1.5 rounded text-sm font-medium bg-red-500/20 text-red-400 hover:bg-red-500/30 transition"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: Agent["status"] }) {
+  return (
+    <span
+      className={`px-2 py-1 rounded text-xs font-medium ${
+        status === "running"
+          ? "bg-[#3b82f6]/20 text-[#3b82f6]"
+          : "bg-[#333] text-[#666]"
+      }`}
+    >
+      {status}
+    </span>
+  );
+}

package/src/web/components/agents/AgentsView.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { AgentCard } from "./AgentCard";
+import { ChatPanel } from "./ChatPanel";
+import { LoadingSpinner } from "../common/LoadingSpinner";
+import type { Agent } from "../../types";
+
+interface AgentsViewProps {
+  agents: Agent[];
+  loading: boolean;
+  selectedAgent: Agent | null;
+  onSelectAgent: (agent: Agent) => void;
+  onCloseAgent: () => void;
+  onToggleAgent: (agent: Agent, e?: React.MouseEvent) => void;
+  onDeleteAgent: (id: string, e?: React.MouseEvent) => void;
+}
+
+export function AgentsView({
+  agents,
+  loading,
+  selectedAgent,
+  onSelectAgent,
+  onCloseAgent,
+  onToggleAgent,
+  onDeleteAgent,
+}: AgentsViewProps) {
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Agents list */}
+      <div className={`${selectedAgent ? 'w-1/2 border-r border-[#1a1a1a]' : 'flex-1'} overflow-auto p-6 transition-all`}>
+        {loading ? (
+          <LoadingSpinner message="Loading agents..." />
+        ) : agents.length === 0 ? (
+          <EmptyState />
+        ) : (
+          <div className={`grid gap-4 ${selectedAgent ? 'grid-cols-1 xl:grid-cols-2' : 'md:grid-cols-2 xl:grid-cols-3'}`}>
+            {agents.map((agent) => (
+              <AgentCard
+                key={agent.id}
+                agent={agent}
+                selected={selectedAgent?.id === agent.id}
+                onSelect={() => onSelectAgent(agent)}
+                onToggle={(e) => onToggleAgent(agent, e)}
+                onDelete={(e) => onDeleteAgent(agent.id, e)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Chat Panel */}
+      {selectedAgent && (
+        <ChatPanel
+          agent={selectedAgent}
+          onClose={onCloseAgent}
+          onStartAgent={(e) => onToggleAgent(selectedAgent, e)}
+        />
+      )}
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="text-center py-20 text-[#666]">
+      <p className="text-lg">No agents yet</p>
+      <p className="text-sm mt-1">Create your first agent to get started</p>
+    </div>
+  );
+}

package/src/web/components/agents/ChatPanel.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Chat } from "@apteva/apteva-kit";
+import { CloseIcon } from "../common/Icons";
+import type { Agent } from "../../types";
+
+interface ChatPanelProps {
+  agent: Agent;
+  onClose: () => void;
+  onStartAgent: (e?: React.MouseEvent) => void;
+}
+
+export function ChatPanel({ agent, onClose, onStartAgent }: ChatPanelProps) {
+  if (agent.status === "running" && agent.port) {
+    return (
+      <div className="w-1/2 flex flex-col overflow-hidden">
+        <div className="flex-1 flex flex-col overflow-hidden relative">
+          <button
+            onClick={onClose}
+            className="absolute top-3 right-3 z-10 text-[#666] hover:text-[#e0e0e0] transition"
+          >
+            <CloseIcon />
+          </button>
+          <Chat
+            agentId="default"
+            apiUrl={`/api/agents/${agent.id}`}
+            placeholder="Message this agent..."
+            context={agent.systemPrompt}
+            variant="terminal"
+            headerTitle={agent.name}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-1/2 flex flex-col overflow-hidden">
+      <div className="border-b border-[#1a1a1a] p-4 flex items-center justify-between">
+        <div>
+          <h2 className="font-semibold">{agent.name}</h2>
+          <p className="text-sm text-[#666]">{agent.provider} / {agent.model}</p>
+        </div>
+        <button
+          onClick={onClose}
+          className="text-[#666] hover:text-[#e0e0e0] transition"
+        >
+          <CloseIcon />
+        </button>
+      </div>
+      <div className="flex-1 flex items-center justify-center text-[#666]">
+        <div className="text-center">
+          <p className="text-lg mb-2">Agent is not running</p>
+          <button
+            onClick={onStartAgent}
+            className="bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30 px-4 py-2 rounded font-medium transition"
+          >
+            Start Agent
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/web/components/agents/CreateAgentModal.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import { Modal } from "../common/Modal";
+import { Select } from "../common/Select";
+import type { Provider, NewAgentForm } from "../../types";
+
+interface CreateAgentModalProps {
+  form: NewAgentForm;
+  providers: Provider[];
+  configuredProviders: Provider[];
+  onFormChange: (form: NewAgentForm) => void;
+  onProviderChange: (providerId: string) => void;
+  onCreate: () => void;
+  onClose: () => void;
+  onGoToSettings: () => void;
+}
+
+export function CreateAgentModal({
+  form,
+  providers,
+  configuredProviders,
+  onFormChange,
+  onProviderChange,
+  onCreate,
+  onClose,
+  onGoToSettings,
+}: CreateAgentModalProps) {
+  const selectedProvider = providers.find(p => p.id === form.provider);
+
+  const providerOptions = configuredProviders.map(p => ({
+    value: p.id,
+    label: p.name,
+  }));
+
+  const modelOptions = selectedProvider?.models.map(m => ({
+    value: m.value,
+    label: m.label,
+    recommended: m.recommended,
+  })) || [];
+
+  return (
+    <Modal>
+      <h2 className="text-xl font-semibold mb-4">Create New Agent</h2>
+
+      {configuredProviders.length === 0 ? (
+        <NoProvidersMessage onGoToSettings={onGoToSettings} />
+      ) : (
+        <>
+          <div className="space-y-4">
+            <FormField label="Name">
+              <input
+                type="text"
+                value={form.name}
+                onChange={(e) => onFormChange({ ...form, name: e.target.value })}
+                className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 focus:outline-none focus:border-[#f97316] text-[#e0e0e0]"
+                placeholder="My Agent"
+              />
+            </FormField>
+
+            <FormField label="Provider">
+              <Select
+                value={form.provider}
+                options={providerOptions}
+                onChange={onProviderChange}
+                placeholder="Select provider..."
+              />
+            </FormField>
+
+            <FormField label="Model">
+              <Select
+                value={form.model}
+                options={modelOptions}
+                onChange={(value) => onFormChange({ ...form, model: value })}
+                placeholder="Select model..."
+              />
+            </FormField>
+
+            <FormField label="System Prompt">
+              <textarea
+                value={form.systemPrompt}
+                onChange={(e) => onFormChange({ ...form, systemPrompt: e.target.value })}
+                className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 h-24 resize-none focus:outline-none focus:border-[#f97316] text-[#e0e0e0]"
+              />
+            </FormField>
+          </div>
+
+          <div className="flex gap-3 mt-6">
+            <button
+              onClick={onClose}
+              className="flex-1 border border-[#333] hover:border-[#f97316] hover:text-[#f97316] px-4 py-2 rounded font-medium transition"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={onCreate}
+              disabled={!form.name}
+              className="flex-1 bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 text-black px-4 py-2 rounded font-medium transition"
+            >
+              Create
+            </button>
+          </div>
+        </>
+      )}
+    </Modal>
+  );
+}
+
+function FormField({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <label className="block text-sm text-[#666] mb-1">{label}</label>
+      {children}
+    </div>
+  );
+}
+
+function NoProvidersMessage({ onGoToSettings }: { onGoToSettings: () => void }) {
+  return (
+    <div className="text-center py-6">
+      <p className="text-[#666] mb-4">No API keys configured. Add a provider key first.</p>
+      <button
+        onClick={onGoToSettings}
+        className="bg-[#f97316] hover:bg-[#fb923c] text-black px-4 py-2 rounded font-medium transition"
+      >
+        Go to Settings
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,4 @@
+export { AgentCard } from "./AgentCard";
+export { CreateAgentModal } from "./CreateAgentModal";
+export { ChatPanel } from "./ChatPanel";
+export { AgentsView } from "./AgentsView";

package/src/web/components/common/Icons.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+interface IconProps {
+  className?: string;
+}
+
+export function CheckIcon({ className = "w-4 h-4" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+    </svg>
+  );
+}
+
+export function CloseIcon({ className = "w-5 h-5" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  );
+}
+
+export function DashboardIcon({ className = "w-5 h-5" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
+      />
+    </svg>
+  );
+}
+
+export function AgentsIcon({ className = "w-5 h-5" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+      />
+    </svg>
+  );
+}
+
+export function SettingsIcon({ className = "w-5 h-5" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+      />
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  );
+}

package/src/web/components/common/LoadingSpinner.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+interface LoadingSpinnerProps {
+  message?: string;
+  fullScreen?: boolean;
+}
+
+export function LoadingSpinner({ message = "Loading...", fullScreen = false }: LoadingSpinnerProps) {
+  const content = (
+    <div className="flex items-center gap-3 text-[#666]">
+      <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+          fill="none"
+        />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+      <span>{message}</span>
+    </div>
+  );
+
+  if (fullScreen) {
+    return (
+      <div className="min-h-screen bg-[#0a0a0a] text-[#e0e0e0] font-mono flex items-center justify-center">
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-center py-20">
+      {content}
+    </div>
+  );
+}

package/src/web/components/common/Modal.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+interface ModalProps {
+  children: React.ReactNode;
+  onClose?: () => void;
+}
+
+export function Modal({ children, onClose }: ModalProps) {
+  return (
+    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
+      <div className="bg-[#111] rounded p-6 w-full max-w-md border border-[#1a1a1a]">
+        {children}
+      </div>
+    </div>
+  );
+}