apteva 0.4.41 → 0.4.44

package/src/web/App.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo, lazy, Suspense } from "react";
 import { createRoot } from "react-dom/client";
+import { Chat } from "@apteva/apteva-kit";
 import "@apteva/apteva-kit/styles.css";
 
 // Types
@@ -7,7 +8,7 @@ import type { Agent, Provider, Route, NewAgentForm } from "./types";
 import { DEFAULT_FEATURES } from "./types";
 
 // Context
-import { TelemetryProvider, AuthProvider, ProjectProvider, useAuth, useProjects, useAgentStatusChange, useTaskChange } from "./context";
+import { TelemetryProvider, AuthProvider, ProjectProvider, ThemeProvider, useTheme, useAuth, useProjects, useAgentStatusChange, useTaskChange } from "./context";
 
 // Hooks
 import { useAgents, useProviders, useOnboarding } from "./hooks";
@@ -240,7 +241,7 @@ function AppContent() {
   }
 
   return (
-    <div className="h-screen bg-[#0a0a0a] text-[#e0e0e0] font-mono flex flex-col overflow-hidden">
+    <div className="h-screen font-mono flex flex-col overflow-hidden" style={{ backgroundColor: "var(--color-bg)", color: "var(--color-text)" }}>
       <Header onMenuClick={() => setMobileMenuOpen(true)} agents={agents} />
 
       {startError && (
@@ -342,18 +343,95 @@ function AppContent() {
   );
 }
 
+// ==================== Share Page (public, no auth) ====================
+function SharePage({ token }: { token: string }) {
+  const { theme } = useTheme();
+  const [status, setStatus] = useState<"checking" | "online" | "offline">("checking");
+  const [agentName, setAgentName] = useState("Agent");
+
+  useEffect(() => {
+    const check = async () => {
+      try {
+        const res = await fetch(`/share/${token}/info`);
+        if (res.ok) {
+          const data = await res.json();
+          setAgentName(data.name || "Agent");
+          setStatus(data.status === "running" ? "online" : "offline");
+        } else {
+          setStatus("offline");
+        }
+      } catch {
+        setStatus("offline");
+      }
+    };
+    check();
+    const interval = setInterval(check, 15000);
+    return () => clearInterval(interval);
+  }, [token]);
+
+  if (status === "checking") {
+    return (
+      <div className="min-h-[100dvh] flex items-center justify-center" style={{ backgroundColor: "var(--color-bg)" }}>
+        <div className="text-sm" style={{ color: "var(--color-text-muted)" }}>Connecting...</div>
+      </div>
+    );
+  }
+
+  if (status === "offline") {
+    return (
+      <div className="min-h-[100dvh] flex items-center justify-center" style={{ backgroundColor: "var(--color-bg)" }}>
+        <div className="text-center">
+          <div className="w-2.5 h-2.5 rounded-full mx-auto mb-3" style={{ backgroundColor: "var(--color-text-muted)" }} />
+          <div className="text-base font-semibold mb-1.5" style={{ color: "var(--color-text)" }}>{agentName}</div>
+          <div className="text-sm" style={{ color: "var(--color-text-muted)" }}>This agent is currently offline</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-[100dvh] flex items-center justify-center p-0 md:p-4" style={{ backgroundColor: "var(--color-bg)" }}>
+      <div className="w-full max-w-[640px] h-[100dvh] md:h-[calc(100dvh-32px)] md:max-h-[800px] md:rounded-xl overflow-hidden md:border flex flex-col" style={{ backgroundColor: "var(--color-bg)", borderColor: "var(--color-border)" }}>
+        <Chat
+          agentId="default"
+          apiUrl={`/share/${token}`}
+          placeholder="Type a message..."
+          variant="terminal"
+          theme={theme.id as "light" | "dark"}
+          headerTitle={agentName}
+          enableMarkdown
+          enableWidgets
+          availableWidgets={["form", "kpi"]}
+        />
+      </div>
+    </div>
+  );
+}
+
 // Wrapper component that provides all contexts
 function App() {
+  // Check if this is a /share/:token URL — render public share page without auth
+  const shareMatch = window.location.pathname.match(/^\/share\/([a-f0-9]{32})$/);
+  if (shareMatch) {
+    return (
+      <ThemeProvider>
+        <SharePage token={shareMatch[1]} />
+      </ThemeProvider>
+    );
+  }
+
   return (
-    <AuthProvider>
-      <ProjectProvider>
-        <MetaAgentProvider>
-          <TelemetryProvider>
-            <AppContent />
-          </TelemetryProvider>
-        </MetaAgentProvider>
-      </ProjectProvider>
-    </AuthProvider>
+    <ThemeProvider>
+      <AuthProvider>
+        <ProjectProvider>
+          <MetaAgentProvider>
+            <TelemetryProvider>
+              <AppContent />
+            </TelemetryProvider>
+          </MetaAgentProvider>
+        </ProjectProvider>
+      </AuthProvider>
+    </ThemeProvider>
   );
 }
 

package/src/web/components/activity/ActivityPage.tsx

@@ -199,7 +199,7 @@ export function ActivityPage({ agents, loading, onNavigate }: ActivityPageProps)
   }, [timeline]);
 
   if (loading) {
-    return <div className="flex-1 flex items-center justify-center text-[#666]">Loading...</div>;
+    return <div className="flex-1 flex items-center justify-center text-[var(--color-text-muted)]">Loading...</div>;
   }
 
   const runningCount = filteredAgents.filter(a => a.status === "running").length;
@@ -211,7 +211,7 @@ export function ActivityPage({ agents, loading, onNavigate }: ActivityPageProps)
         <div className="flex items-center justify-between gap-4">
           <div>
             <h1 className="text-xl font-semibold">Activity</h1>
-            <p className="text-sm text-[#666] mt-0.5">
+            <p className="text-sm text-[var(--color-text-muted)] mt-0.5">
               {runningCount} of {filteredAgents.length} agents running
             </p>
           </div>
@@ -232,7 +232,7 @@ export function ActivityPage({ agents, loading, onNavigate }: ActivityPageProps)
       {/* Timeline */}
       <div className="flex-1 overflow-auto px-6 pb-6">
         {timeline.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-20 text-[#555]">
+          <div className="flex flex-col items-center justify-center py-20 text-[var(--color-text-faint)]">
             <p className="text-lg mb-2">No activity yet</p>
             <p className="text-sm">Agent activity will appear here in real-time.</p>
           </div>
@@ -241,26 +241,26 @@ export function ActivityPage({ agents, loading, onNavigate }: ActivityPageProps)
             {groupedTimeline.map(group => (
               <div key={group.label}>
                 {/* Date header */}
-                <div className="sticky top-0 z-10 bg-[#0a0a0a]/95 backdrop-blur-sm py-2 mb-1">
-                  <span className="text-xs font-semibold text-[#666] uppercase tracking-wider">
+                <div className="sticky top-0 z-10 bg-[var(--color-bg)] backdrop-blur-sm py-2 mb-1">
+                  <span className="text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider">
                     {group.label}
                   </span>
                 </div>
 
                 {/* Events */}
-                <div className="relative ml-3 border-l border-[#1a1a1a]">
+                <div className="relative ml-3 border-l border-[var(--color-border)]">
                   {group.events.map(evt => {
                     const isNew = !seenIds.has(evt.id);
                     if (isNew) seenIds.add(evt.id); // mark seen after first render
                     const agentName = agentNameMap.get(evt.agent_id) || evt.agent_id.slice(0, 8);
                     const dotColor = evt.level === "error"
                       ? "bg-red-400"
-                      : CATEGORY_COLORS[evt.category] || "bg-[#555]";
+                      : CATEGORY_COLORS[evt.category] || "bg-[var(--color-text-faint)]";
 
                     return (
                       <div
                         key={evt.id}
-                        className={`relative pl-6 pr-3 py-2.5 hover:bg-[#111]/50 transition-colors ${
+                        className={`relative pl-6 pr-3 py-2.5 hover:bg-[var(--color-surface-hover)] transition-colors ${
                           isNew ? "animate-slideIn" : ""
                         }`}
                       >
@@ -272,19 +272,19 @@ export function ActivityPage({ agents, loading, onNavigate }: ActivityPageProps)
                             <p className={`text-sm ${evt.level === "error" ? "text-red-400" : ""}`}>
                               {describeEvent(evt, agentName)}
                             </p>
-                            <div className="flex items-center gap-2 text-[11px] text-[#555] mt-0.5">
-                              <span className="text-[#888] font-medium">{agentName}</span>
-                              <span className="text-[#333]">&middot;</span>
-                              <span className="text-[#555]">{evt.category}</span>
+                            <div className="flex items-center gap-2 text-[11px] text-[var(--color-text-faint)] mt-0.5">
+                              <span className="text-[var(--color-text-secondary)] font-medium">{agentName}</span>
+                              <span className="text-[var(--color-border-light)]">&middot;</span>
+                              <span className="text-[var(--color-text-faint)]">{evt.category}</span>
                               {evt.duration_ms != null && evt.duration_ms > 0 && (
                                 <>
-                                  <span className="text-[#333]">&middot;</span>
+                                  <span className="text-[var(--color-border-light)]">&middot;</span>
                                   <span>{evt.duration_ms < 1000 ? `${evt.duration_ms}ms` : `${(evt.duration_ms / 1000).toFixed(1)}s`}</span>
                                 </>
                               )}
                             </div>
                           </div>
-                          <span className="text-[11px] text-[#555] shrink-0 pt-0.5">
+                          <span className="text-[11px] text-[var(--color-text-faint)] shrink-0 pt-0.5">
                             {timeAgo(evt.timestamp)}
                           </span>
                         </div>

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

@@ -34,21 +34,21 @@ export const AgentCard = React.memo(function AgentCard({ agent, selected, onSele
   return (
     <div
       onClick={onSelect}
-      className={`bg-[#111] rounded p-5 border transition cursor-pointer flex flex-col h-full ${
+      className={`bg-[var(--color-surface)] rounded p-5 border transition cursor-pointer flex flex-col h-full ${
         selected
-          ? 'border-[#f97316]'
-          : 'border-[#1a1a1a] hover:border-[#333]'
+          ? 'border-[var(--color-accent)]'
+          : 'border-[var(--color-border)] hover:border-[var(--color-border-light)]'
       }`}
     >
       <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]">
+          <p className="text-sm text-[var(--color-text-muted)]">
             {agent.provider} / {agent.model}
-            {agent.port && <span className="text-[#444]"> · :{agent.port}</span>}
+            {agent.port && <span className="text-[var(--color-text-faint)]"> · :{agent.port}</span>}
           </p>
           {showProject && project && (
-            <p className="text-sm text-[#666] flex items-center gap-1.5 mt-1">
+            <p className="text-sm text-[var(--color-text-muted)] flex items-center gap-1.5 mt-1">
               <span className="w-2 h-2 rounded-full" style={{ backgroundColor: project.color }} />
               {project.name}
             </p>
@@ -62,7 +62,7 @@ export const AgentCard = React.memo(function AgentCard({ agent, selected, onSele
           {enabledFeatures.map(({ key, icon: Icon, label }) => (
             <span
               key={key}
-              className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-[#f97316]/10 text-[#f97316]/70 text-xs"
+              className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-[var(--color-accent-10)] text-[var(--color-accent-70)] text-xs"
               title={label}
             >
               <Icon className="w-3 h-3" />
@@ -84,7 +84,7 @@ export const AgentCard = React.memo(function AgentCard({ agent, selected, onSele
                 className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${
                   isAvailable
                     ? "bg-green-500/10 text-green-400"
-                    : "bg-[#222] text-[#666]"
+                    : "bg-[var(--color-surface-raised)] text-[var(--color-text-muted)]"
                 }`}
                 title={`MCP: ${server.name} (${isAvailable ? "available" : server.status})`}
               >
@@ -105,7 +105,7 @@ export const AgentCard = React.memo(function AgentCard({ agent, selected, onSele
               className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${
                 skill.enabled
                   ? "bg-purple-500/10 text-purple-400"
-                  : "bg-[#222] text-[#666]"
+                  : "bg-[var(--color-surface-raised)] text-[var(--color-text-muted)]"
               }`}
               title={`Skill: ${skill.name} v${skill.version}`}
             >
@@ -125,7 +125,7 @@ export const AgentCard = React.memo(function AgentCard({ agent, selected, onSele
               className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${
                 sub.enabled
                   ? "bg-cyan-500/10 text-cyan-400"
-                  : "bg-[#222] text-[#666]"
+                  : "bg-[var(--color-surface-raised)] text-[var(--color-text-muted)]"
               }`}
               title={`Trigger: ${sub.trigger_slug.replace(/_/g, " ")}`}
             >
@@ -136,7 +136,7 @@ export const AgentCard = React.memo(function AgentCard({ agent, selected, onSele
         </div>
       )}
 
-      <p className="text-sm text-[#666] line-clamp-2 mb-4 flex-1">
+      <p className="text-sm text-[var(--color-text-muted)] line-clamp-2 mb-4 flex-1">
         {agent.systemPrompt}
       </p>
 
@@ -145,9 +145,9 @@ export const AgentCard = React.memo(function AgentCard({ agent, selected, onSele
         disabled={agent.status === "starting" || agent.status === "stopping"}
         className={`w-full px-3 py-1.5 rounded text-sm font-medium transition mt-auto ${
           agent.status === "starting" || agent.status === "stopping"
-            ? "bg-[#333] text-[#666] cursor-wait"
+            ? "bg-[var(--color-surface-raised)] text-[var(--color-text-muted)] cursor-wait"
             : agent.status === "running"
-              ? "bg-[#f97316]/20 text-[#f97316] hover:bg-[#f97316]/30"
+              ? "bg-red-500/15 text-red-500 hover:bg-red-500/25 border border-red-500/20"
               : "bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30"
         }`}
       >
@@ -175,7 +175,7 @@ function StatusBadge({ status, isActive, activityLabel }: { status: Agent["statu
           ? "bg-yellow-500/20 text-yellow-400 animate-pulse"
           : status === "running"
             ? "bg-[#3b82f6]/20 text-[#3b82f6]"
-            : "bg-[#333] text-[#666]"
+            : "bg-[var(--color-surface-raised)] text-[var(--color-text-muted)]"
       }`}
     >
       {status}