@mndrk/agx 2.0.22 → 2.0.24

package/cloud-runtime/standalone/components/chat-ui/ThreadView.tsx

@@ -7,7 +7,7 @@ import type { StreamingEntry } from "@/hooks/useGroupChat";
 import type { TaskDraftMessage } from "@/types/tasks";
 import type { AgentProcessEntry } from "@/lib/agent-process-registry";
 import { Markdown } from "./Markdown";
-import { Copy, Trash2, ChevronLeft, User, Link, MessageSquareText } from "lucide-react";
+import { Copy, Trash2, User, Link, MessageSquareText, Sparkles } from "lucide-react";
 import { MessageAttachments } from "./MessageAttachments";
 import { agentAvatarUrl } from "./ParticipantBar";
 import { MessageReactionsBar } from "./MessageReactionsBar";
@@ -97,11 +97,14 @@ export function ThreadView({
     };
 
     return (
-        <div className="flex flex-col h-full overflow-hidden bg-slate-50">
+        <div className="flex flex-col h-full overflow-hidden bg-[var(--app-shell-bg)] transition-colors">
             {/* Active processes bar */}
             {activeProcesses.length > 0 && (
-                <div className="flex items-center justify-end gap-2 px-4 py-2 border-b border-slate-200 bg-white/80 backdrop-blur-sm">
-                    <span className="text-[11px] text-slate-400 uppercase tracking-wide font-medium">Working</span>
+                <div className="flex items-center justify-between gap-3 px-4 py-2 border-b border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] backdrop-blur-md transition-colors">
+                    <div className="inline-flex items-center gap-2 text-[11px] font-medium text-[var(--app-shell-muted)]">
+                        <Sparkles className="h-3.5 w-3.5 text-indigo-500" strokeWidth={1.75} />
+                        <span className="uppercase tracking-[0.16em]">Working</span>
+                    </div>
                     <div className="flex items-center -space-x-1.5">
                         {activeProcesses.map((proc) => {
                             const p = participantMap[proc.agentId];
@@ -110,9 +113,9 @@ export function ThreadView({
                                     <img
                                         src={agentAvatarUrl(proc.agentId, 24, p?.color)}
                                         alt={p?.name || proc.agentId}
-                                        className="w-6 h-6 rounded-full border-2 border-white shadow-sm"
+                                        className="w-6 h-6 rounded-full border-2 border-[var(--app-shell-surface)] shadow-sm"
                                     />
-                                    <span className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-green-400 rounded-full border-2 border-white animate-pulse" />
+                                    <span className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-green-400 rounded-full border-2 border-[var(--app-shell-surface)] animate-pulse" />
                                 </div>
                             );
                         })}
@@ -136,46 +139,46 @@ export function ThreadView({
                             >
                                 <div className="flex-shrink-0 mt-1">
                                     {isUser ? (
-                                        <div className="w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center text-slate-600 shadow-sm">
-                                            <User size={20} />
+                                        <div className="w-9 h-9 bg-[var(--app-shell-subtle)] rounded-full flex items-center justify-center text-[var(--app-shell-muted)] shadow-sm">
+                                            <User className="w-5 h-5" />
                                         </div>
                                     ) : (
-                                        <NextLink href={`/agents/${p?.id || msg.participantId || "assistant"}`} className="hover:ring-2 hover:ring-blue-300 rounded-full transition-shadow">
+                                        <NextLink href={`/agents/${p?.id || msg.participantId || "assistant"}`} className="hover:ring-2 hover:ring-[var(--ring)] rounded-full transition-shadow">
                                             <img
-                                                src={p ? agentAvatarUrl(p.id, 40, p.color) : agentAvatarUrl(msg.participantId || "assistant", 40)}
+                                                src={p ? agentAvatarUrl(p.id, 36, p.color) : agentAvatarUrl(msg.participantId || "assistant", 36)}
                                                 alt={p?.name || msg.participantId || "Assistant"}
-                                                className="w-10 h-10 rounded-full shadow-sm border border-slate-100 object-cover bg-slate-100"
+                                                className="w-9 h-9 rounded-full shadow-sm border border-[var(--app-shell-border)] object-cover bg-[var(--app-shell-subtle)]"
                                             />
                                         </NextLink>
                                     )}
                                 </div>
 
                                 <div className="flex-1 space-y-1.5 max-w-full overflow-hidden">
-                                    <div className="flex items-center gap-2">
+                                    <div className="flex items-center gap-2 mb-2">
                                         {isUser ? (
-                                            <span className="font-bold text-sm text-slate-900">You</span>
+                                            <span className="font-bold text-sm text-[var(--foreground)]">You</span>
                                         ) : (
                                             <NextLink
                                                 href={`/agents/${p?.id || msg.participantId || "assistant"}`}
-                                                className="font-bold text-sm text-slate-900 hover:underline"
+                                                className="font-bold text-sm text-[var(--foreground)] hover:underline"
                                                 style={p?.color ? { color: p.color } : undefined}
                                             >
                                                 {p?.name || msg.participantId || "Assistant"}
                                             </NextLink>
                                         )}
                                         {msg.rootMessageId === undefined && msg.id === rootMessageId && (
-                                            <span className="text-[10px] px-1.5 py-0.5 bg-slate-100 text-slate-500 rounded font-mono uppercase">
+                                            <span className="text-[10px] px-1.5 py-0.5 bg-[var(--app-shell-elevated)] text-[var(--app-shell-muted)] rounded font-mono uppercase">
                                                 ROOT
                                             </span>
                                         )}
-                                        <span className="text-[11px] text-slate-400">{formatTimestamp(msg.timestamp)}</span>
+                                        <span className="text-[11px] text-[var(--app-shell-soft-text)]">{formatTimestamp(msg.timestamp)}</span>
                                     </div>
 
                                     <div
-                                        className={`rounded-2xl p-4 text-[15px] leading-relaxed shadow-sm border ${isUser
-                                            ? "bg-slate-100 text-slate-700 border-slate-200"
-                                            : "bg-white text-slate-700 border-slate-200"
-                                            } ${msg.id === highlightedMessageId ? "ring-2 ring-indigo-400" : ""}`}
+                                        className={`rounded-2xl p-4 text-[15px] leading-relaxed transition-all shadow-sm border ${isUser
+                                            ? "bg-[var(--app-shell-subtle)] text-[var(--foreground)] border-[var(--app-shell-border)]"
+                                            : "bg-[var(--app-shell-surface)] text-[var(--foreground)] border-[var(--app-shell-border)] hover:shadow-md hover:border-[var(--app-shell-border-strong)]"
+                                            } ${msg.id === highlightedMessageId ? "ring-2 ring-[var(--ring)]" : ""}`}
                                     >
                                         <Markdown content={stripMarkers(msg.content)} isUser={isUser} />
                                         {msg.attachments && msg.attachments.length > 0 && (
@@ -190,13 +193,13 @@ export function ThreadView({
                                     </div>
 
                                     {/* Actions on hover */}
-                                    <div className="absolute top-8 -right-2 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 bg-white border border-slate-200 rounded-lg shadow-sm p-1 z-10 translate-x-full">
+                                    <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] rounded-xl shadow-sm p-1 z-10 backdrop-blur-sm">
                                         {msg.id === rootMessageId && (
                                             <button
                                                 onClick={() => {
                                                     navigator.clipboard.writeText(msg.id);
                                                 }}
-                                                className="p-1.5 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded"
+                                                className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--primary)] hover:bg-[var(--app-shell-subtle)] rounded transition-colors"
                                                 title="Copy message ID"
                                             >
                                                 <Link size={14} />
@@ -205,7 +208,7 @@ export function ThreadView({
                                         {msg.id === rootMessageId && onCopyThread && (
                                             <button
                                                 onClick={() => onCopyThread(msg.id)}
-                                                className="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded"
+                                                className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)] rounded transition-colors"
                                                 title="Copy Thread"
                                             >
                                                 <MessageSquareText size={14} />
@@ -215,7 +218,7 @@ export function ThreadView({
                                             onClick={() => {
                                                 navigator.clipboard.writeText(msg.content);
                                             }}
-                                            className="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded"
+                                            className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)] rounded transition-colors"
                                             title="Copy as Markdown"
                                         >
                                             <Copy size={14} />
@@ -223,7 +226,7 @@ export function ThreadView({
                                         {msg.id === rootMessageId && onDeleteThreadRoot && (
                                             <button
                                                 onClick={() => onDeleteThreadRoot(msg.id)}
-                                                className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded"
+                                                className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--destructive)] hover:bg-[var(--destructive-muted)] rounded transition-colors"
                                                 title="Delete Thread"
                                             >
                                                 <Trash2 size={14} />
@@ -244,11 +247,11 @@ export function ThreadView({
                             return (
                                 <div key={`streaming-${pid}`} className="flex gap-4 group relative">
                                     <div className="flex-shrink-0 mt-1">
-                                        <NextLink href={`/agents/${sp?.id || pid}`} className="hover:ring-2 hover:ring-blue-300 rounded-full transition-shadow">
+                                        <NextLink href={`/agents/${sp?.id || pid}`} className="hover:ring-2 hover:ring-[var(--ring)] rounded-full transition-shadow">
                                             <img
-                                                src={sp ? agentAvatarUrl(sp.id, 40, sp.color) : agentAvatarUrl(pid, 40)}
+                                                src={sp ? agentAvatarUrl(sp.id, 36, sp.color) : agentAvatarUrl(pid, 36)}
                                                 alt={sp?.name || pid}
-                                                className="w-10 h-10 rounded-full shadow-sm border border-slate-100 object-cover bg-slate-100"
+                                                className="w-9 h-9 rounded-full shadow-sm border border-[var(--app-shell-border)] object-cover bg-[var(--app-shell-subtle)]"
                                             />
                                         </NextLink>
                                     </div>
@@ -256,21 +259,21 @@ export function ThreadView({
                                         <div className="flex items-center gap-2">
                                             <NextLink
                                                 href={`/agents/${sp?.id || pid}`}
-                                                className="font-bold text-sm text-slate-900 hover:underline"
+                                                className="font-bold text-sm text-[var(--foreground)] hover:underline"
                                                 style={sp?.color ? { color: sp.color } : undefined}
                                             >
                                                 {sp?.name || pid}
                                             </NextLink>
                                             {!hasContent && (
                                                 <span className="inline-flex items-center gap-[3px]">
-                                                    <span className="w-1.5 h-1.5 rounded-full bg-slate-400 animate-[pulse-dot_1.4s_ease-in-out_infinite]" />
-                                                    <span className="w-1.5 h-1.5 rounded-full bg-slate-400 animate-[pulse-dot_1.4s_ease-in-out_0.2s_infinite]" />
-                                                    <span className="w-1.5 h-1.5 rounded-full bg-slate-400 animate-[pulse-dot_1.4s_ease-in-out_0.4s_infinite]" />
+                                                    <span className="w-1.5 h-1.5 rounded-full bg-[var(--app-shell-muted)] animate-[pulse-dot_1.4s_ease-in-out_infinite]" />
+                                                    <span className="w-1.5 h-1.5 rounded-full bg-[var(--app-shell-muted)] animate-[pulse-dot_1.4s_ease-in-out_0.2s_infinite]" />
+                                                    <span className="w-1.5 h-1.5 rounded-full bg-[var(--app-shell-muted)] animate-[pulse-dot_1.4s_ease-in-out_0.4s_infinite]" />
                                                 </span>
                                             )}
                                         </div>
                                         {hasContent && (
-                                            <div className="rounded-2xl p-4 text-[15px] leading-relaxed shadow-sm border bg-white text-slate-700 border-slate-200">
+                                            <div className="rounded-2xl p-4 text-[15px] leading-relaxed shadow-sm border bg-[var(--app-shell-surface)] text-[var(--foreground)] border-[var(--app-shell-border)]">
                                                 <Markdown content={stripMarkers(entry.content)} isUser={false} />
                                             </div>
                                         )}

package/cloud-runtime/standalone/components/chat-ui/TypingIndicator.tsx

@@ -15,9 +15,9 @@ interface Props {
 function PulsatingDots() {
   return (
     <span className="inline-flex items-center gap-[3px] ml-1">
-      <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 animate-[pulse-dot_1.4s_ease-in-out_infinite]" />
-      <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 animate-[pulse-dot_1.4s_ease-in-out_0.2s_infinite]" />
-      <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 animate-[pulse-dot_1.4s_ease-in-out_0.4s_infinite]" />
+      <span className="w-1.5 h-1.5 rounded-full bg-[var(--muted-foreground)] animate-[pulse-dot_1.4s_ease-in-out_infinite]" />
+      <span className="w-1.5 h-1.5 rounded-full bg-[var(--muted-foreground)] animate-[pulse-dot_1.4s_ease-in-out_0.2s_infinite]" />
+      <span className="w-1.5 h-1.5 rounded-full bg-[var(--muted-foreground)] animate-[pulse-dot_1.4s_ease-in-out_0.4s_infinite]" />
     </span>
   );
 }
@@ -33,7 +33,7 @@ export function TypingIndicator({
 
   return (
     <div className="flex gap-4 py-4 group transition-colors animate-in fade-in slide-in-from-bottom-2 duration-300">
-      <Link href={`/agents/${participantId}`} className="w-9 h-9 rounded-full bg-slate-100 overflow-hidden shrink-0 shadow-sm border border-slate-100 hover:ring-2 hover:ring-blue-300 transition-shadow">
+      <Link href={`/agents/${participantId}`} className="w-9 h-9 rounded-full bg-[var(--muted)] overflow-hidden shrink-0 shadow-sm border border-[var(--border)] hover:ring-2 hover:ring-blue-300 transition-shadow">
         <img src={agentAvatarUrl(participantId, 36, participantColor)} alt="" className="w-full h-full object-cover" />
       </Link>
 
@@ -42,12 +42,12 @@ export function TypingIndicator({
           <Link href={`/agents/${participantId}`} className="font-bold text-[15px] hover:underline" style={{ color: participantColor }}>
             {participantName}
           </Link>
-          <span className="text-[10px] uppercase tracking-wider text-slate-400 font-bold opacity-0 group-hover:opacity-100 transition-opacity">
+          <span className="text-[10px] uppercase tracking-wider text-[var(--muted-foreground)] font-bold opacity-0 group-hover:opacity-100 transition-opacity">
             Streaming
           </span>
         </div>
 
-        <div className="text-[15px] text-slate-800 leading-relaxed min-h-[1.5rem] flex items-center">
+        <div className="text-[15px] text-[var(--foreground)] leading-relaxed min-h-[1.5rem] flex items-center">
           {hasContent ? (
             <div className="flex-1">
               <Markdown content={cleanContent} />
@@ -56,7 +56,7 @@ export function TypingIndicator({
               </span>
             </div>
           ) : (
-            <div className="flex items-center gap-2 text-slate-400 italic">
+            <div className="flex items-center gap-2 text-[var(--muted-foreground)] italic">
               <span className="text-sm font-medium">working</span>
               <PulsatingDots />
             </div>

package/cloud-runtime/standalone/components/errors/StartupGuardWrapper.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useState, type ReactNode } from "react";
+import DatabaseConfigError from "./DatabaseConfigError";
+import type { StartupError, StartupErrorKind } from "@/lib/startup";
+
+interface DbStatusResponse {
+  version: string;
+  checks: { label: string; value: string; status: "pass" | "fail" | "warn" }[];
+  error?: string;
+}
+
+/** Maps db-status check labels to StartupErrorKind */
+function mapCheckToError(check: { label: string; value: string }): StartupError {
+  const kindMap: Record<string, StartupErrorKind> = {
+    "SQLite Version": "version_mismatch",
+    journal_mode: "pragma_error",
+    foreign_keys: "pragma_error",
+    busy_timeout: "pragma_error",
+    synchronous: "pragma_error",
+    cache_size: "pragma_error",
+    "JSON1 Extension": "missing_extension",
+    "FTS5 Extension": "missing_extension",
+    Filesystem: "filesystem_error",
+  };
+
+  const kind = kindMap[check.label] || "pragma_error";
+
+  const fixes: Record<string, string> = {
+    "SQLite Version": "brew install sqlite3 && npm rebuild better-sqlite3",
+    journal_mode: "Ensure the database is on a local filesystem with no exclusive locks",
+    foreign_keys: "PRAGMA foreign_keys = ON",
+    "JSON1 Extension": "Rebuild SQLite with JSON1 enabled, or use a system SQLite that includes it",
+    Filesystem: "Move the database file to a local SSD. WAL mode requires reliable fsync.",
+  };
+
+  return {
+    kind,
+    message: `${check.label}: expected to pass, got '${check.value}'`,
+    found: check.value,
+    fix: fixes[check.label],
+  };
+}
+
+export default function StartupGuardWrapper({ children }: { children: ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+  const [state, setState] = useState<"loading" | "ok" | "error">("loading");
+  const [errors, setErrors] = useState<StartupError[]>([]);
+
+  // Only run after mount to avoid SSR issues
+  useEffect(() => {
+    setMounted(true);
+
+    fetch("/api/system/db-status")
+      .then((res) => res.json())
+      .then((data: DbStatusResponse) => {
+        const failures = (data.checks || [])
+          .filter((c) => c.status === "fail")
+          .map(mapCheckToError);
+
+        if (failures.length > 0) {
+          setErrors(failures);
+          setState("error");
+        } else if (data.error && !data.checks?.length) {
+          setErrors([{ kind: "pragma_error", message: data.error }]);
+          setState("error");
+        } else {
+          setState("ok");
+        }
+      })
+      .catch(() => {
+        // API unreachable — don't block the app, just proceed
+        setState("ok");
+      });
+  }, []);
+
+  // During SSR, just render children
+  if (!mounted) {
+    return <>{children}</>;
+  }
+
+  // Show loading state only after mount
+  if (state === "loading") {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[var(--background)]">
+        <span className="spinner w-8 h-8 border-3 border-[var(--primary)] border-t-transparent rounded-full" />
+      </div>
+    );
+  }
+
+  if (state === "error") {
+    return <DatabaseConfigError errors={errors} />;
+  }
+
+  return <>{children}</>;
+}