apteva 0.1.0

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

@@ -0,0 +1,96 @@
+import React, { useState, useRef, useEffect } from "react";
+
+interface SelectOption {
+  value: string;
+  label: string;
+  recommended?: boolean;
+}
+
+interface SelectProps {
+  value: string;
+  options: SelectOption[];
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function Select({ value, options, onChange, placeholder = "Select..." }: SelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const selectedOption = options.find(o => o.value === value);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 text-left flex items-center justify-between focus:outline-none focus:border-[#f97316] text-[#e0e0e0] hover:border-[#333] transition"
+      >
+        <span className={selectedOption ? "text-[#e0e0e0]" : "text-[#666]"}>
+          {selectedOption ? (
+            <>
+              {selectedOption.label}
+              {selectedOption.recommended && (
+                <span className="text-[#f97316] text-xs ml-2">(Recommended)</span>
+              )}
+            </>
+          ) : placeholder}
+        </span>
+        <ChevronIcon isOpen={isOpen} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute z-50 w-full mt-1 bg-[#111] border border-[#222] rounded shadow-lg max-h-60 overflow-auto">
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => {
+                onChange(option.value);
+                setIsOpen(false);
+              }}
+              className={`w-full px-3 py-2 text-left flex items-center justify-between hover:bg-[#1a1a1a] transition ${
+                option.value === value ? "bg-[#1a1a1a] text-[#f97316]" : "text-[#e0e0e0]"
+              }`}
+            >
+              <span>
+                {option.label}
+                {option.recommended && (
+                  <span className="text-[#f97316] text-xs ml-2">(Recommended)</span>
+                )}
+              </span>
+              {option.value === value && (
+                <svg className="w-4 h-4 text-[#f97316]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ChevronIcon({ isOpen }: { isOpen: boolean }) {
+  return (
+    <svg
+      className={`w-4 h-4 text-[#666] transition-transform ${isOpen ? "rotate-180" : ""}`}
+      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/common/index.ts

@@ -0,0 +1,4 @@
+export { LoadingSpinner } from "./LoadingSpinner";
+export { Modal } from "./Modal";
+export { Select } from "./Select";
+export { CheckIcon, CloseIcon, DashboardIcon, AgentsIcon, SettingsIcon } from "./Icons";

package/src/web/components/dashboard/Dashboard.tsx

@@ -0,0 +1,136 @@
+import React from "react";
+import type { Agent, Provider, Route } from "../../types";
+
+interface DashboardProps {
+  agents: Agent[];
+  loading: boolean;
+  runningCount: number;
+  configuredProviders: Provider[];
+  onNavigate: (route: Route) => void;
+  onSelectAgent: (agent: Agent) => void;
+}
+
+export function Dashboard({
+  agents,
+  loading,
+  runningCount,
+  configuredProviders,
+  onNavigate,
+  onSelectAgent,
+}: DashboardProps) {
+  return (
+    <div className="flex-1 overflow-auto p-6">
+      {/* Stats Cards */}
+      <div className="grid grid-cols-3 gap-4 mb-6">
+        <StatCard label="Total Agents" value={agents.length} />
+        <StatCard label="Running" value={runningCount} color="text-[#3b82f6]" />
+        <StatCard label="Providers" value={configuredProviders.length} color="text-[#f97316]" />
+      </div>
+
+      <div className="grid grid-cols-2 gap-6">
+        {/* Agents List */}
+        <DashboardCard
+          title="Agents"
+          actionLabel="View All"
+          onAction={() => onNavigate("agents")}
+        >
+          {loading ? (
+            <div className="p-4 text-center text-[#666]">Loading...</div>
+          ) : agents.length === 0 ? (
+            <div className="p-4 text-center text-[#666]">No agents yet</div>
+          ) : (
+            <div className="divide-y divide-[#1a1a1a]">
+              {agents.slice(0, 5).map((agent) => (
+                <div
+                  key={agent.id}
+                  onClick={() => onSelectAgent(agent)}
+                  className="px-4 py-3 hover:bg-[#1a1a1a] cursor-pointer flex items-center justify-between"
+                >
+                  <div>
+                    <p className="font-medium">{agent.name}</p>
+                    <p className="text-sm text-[#666]">{agent.provider}</p>
+                  </div>
+                  <span
+                    className={`w-2 h-2 rounded-full ${
+                      agent.status === "running" ? "bg-[#3b82f6]" : "bg-[#444]"
+                    }`}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </DashboardCard>
+
+        {/* Configured Providers */}
+        <DashboardCard
+          title="Providers"
+          actionLabel="Manage"
+          onAction={() => onNavigate("settings")}
+        >
+          {configuredProviders.length === 0 ? (
+            <div className="p-4 text-center text-[#666]">
+              <p>No providers configured</p>
+              <button
+                onClick={() => onNavigate("settings")}
+                className="text-[#f97316] hover:underline mt-1"
+              >
+                Add API Key
+              </button>
+            </div>
+          ) : (
+            <div className="divide-y divide-[#1a1a1a]">
+              {configuredProviders.map((provider) => (
+                <div key={provider.id} className="px-4 py-3 flex items-center justify-between">
+                  <div>
+                    <p className="font-medium">{provider.name}</p>
+                    <p className="text-sm text-[#666]">{provider.models.length} models</p>
+                  </div>
+                  <span className="text-green-400 text-sm">{provider.keyHint}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </DashboardCard>
+      </div>
+    </div>
+  );
+}
+
+interface StatCardProps {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+function StatCard({ label, value, color }: StatCardProps) {
+  return (
+    <div className="bg-[#111] rounded p-4 border border-[#1a1a1a]">
+      <p className="text-sm text-[#666] mb-1">{label}</p>
+      <p className={`text-2xl font-semibold ${color || ''}`}>{value}</p>
+    </div>
+  );
+}
+
+interface DashboardCardProps {
+  title: string;
+  actionLabel: string;
+  onAction: () => void;
+  children: React.ReactNode;
+}
+
+function DashboardCard({ title, actionLabel, onAction, children }: DashboardCardProps) {
+  return (
+    <div className="bg-[#111] rounded border border-[#1a1a1a] overflow-hidden">
+      <div className="px-4 py-3 border-b border-[#1a1a1a] flex items-center justify-between">
+        <h3 className="font-semibold">{title}</h3>
+        <button
+          onClick={onAction}
+          className="text-sm text-[#3b82f6] hover:text-[#60a5fa]"
+        >
+          {actionLabel}
+        </button>
+      </div>
+      {children}
+    </div>
+  );
+}

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

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

package/src/web/components/index.ts

@@ -0,0 +1,11 @@
+// Common components
+export { LoadingSpinner, Modal, Select, CheckIcon, CloseIcon, DashboardIcon, AgentsIcon, SettingsIcon } from "./common";
+
+// Layout components
+export { Header, Sidebar, ErrorBanner } from "./layout";
+
+// Feature components
+export { OnboardingWizard } from "./onboarding";
+export { SettingsPage } from "./settings";
+export { AgentCard, CreateAgentModal, ChatPanel, AgentsView } from "./agents";
+export { Dashboard } from "./dashboard";

package/src/web/components/layout/ErrorBanner.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { CloseIcon } from "../common/Icons";
+
+interface ErrorBannerProps {
+  message: string;
+  onDismiss: () => void;
+}
+
+export function ErrorBanner({ message, onDismiss }: ErrorBannerProps) {
+  return (
+    <div className="bg-red-500/10 border-b border-red-500/30 px-6 py-3 text-red-400 text-sm flex items-center justify-between">
+      <span>{message}</span>
+      <button onClick={onDismiss} className="hover:text-red-300">
+        <CloseIcon className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}

package/src/web/components/layout/Header.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface HeaderProps {
+  onNewAgent: () => void;
+  canCreateAgent: boolean;
+}
+
+export function Header({ onNewAgent, canCreateAgent }: HeaderProps) {
+  return (
+    <header className="border-b border-[#1a1a1a] px-6 py-4 flex-shrink-0">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-[#f97316]">&gt;_</span>
+          <span className="text-xl tracking-wider">apteva</span>
+        </div>
+        <button
+          onClick={onNewAgent}
+          disabled={!canCreateAgent}
+          className="bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 disabled:cursor-not-allowed text-black px-4 py-2 rounded font-medium transition"
+        >
+          + New Agent
+        </button>
+      </div>
+    </header>
+  );
+}

package/src/web/components/layout/Sidebar.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { DashboardIcon, AgentsIcon, SettingsIcon } from "../common/Icons";
+import type { Route } from "../../types";
+
+interface SidebarProps {
+  route: Route;
+  agentCount: number;
+  onNavigate: (route: Route) => void;
+}
+
+export function Sidebar({ route, agentCount, onNavigate }: SidebarProps) {
+  return (
+    <aside className="w-56 border-r border-[#1a1a1a] flex-shrink-0 p-4">
+      <nav className="space-y-1">
+        <NavButton
+          icon={<DashboardIcon />}
+          label="Dashboard"
+          active={route === "dashboard"}
+          onClick={() => onNavigate("dashboard")}
+        />
+        <NavButton
+          icon={<AgentsIcon />}
+          label="Agents"
+          active={route === "agents"}
+          onClick={() => onNavigate("agents")}
+          badge={agentCount > 0 ? String(agentCount) : undefined}
+        />
+        <NavButton
+          icon={<SettingsIcon />}
+          label="Settings"
+          active={route === "settings"}
+          onClick={() => onNavigate("settings")}
+        />
+      </nav>
+    </aside>
+  );
+}
+
+interface NavButtonProps {
+  icon: React.ReactNode;
+  label: string;
+  active: boolean;
+  onClick: () => void;
+  badge?: string;
+}
+
+function NavButton({ icon, label, active, onClick, badge }: NavButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={`w-full flex items-center gap-3 px-3 py-2 rounded font-medium transition ${
+        active
+          ? "bg-[#111] text-[#e0e0e0]"
+          : "text-[#666] hover:bg-[#111] hover:text-[#888]"
+      }`}
+    >
+      {icon}
+      {label}
+      {badge && (
+        <span className="ml-auto bg-[#333] text-[#888] text-xs px-2 py-0.5 rounded-full">
+          {badge}
+        </span>
+      )}
+    </button>
+  );
+}

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

@@ -0,0 +1,3 @@
+export { Header } from "./Header";
+export { Sidebar } from "./Sidebar";
+export { ErrorBanner } from "./ErrorBanner";