From adb9e15b6ce3ea30b0949e98a572af67f0836ffc Mon Sep 17 00:00:00 2001
From: James Magahern <james@magahern.com>
Date: Sat, 2 May 2026 15:44:31 -0700
Subject: [PATCH] new look

---
 web/src/App.tsx                               | 201 ++++++++++++------
 web/src/components/auth/auth-screen.tsx       |  15 +-
 .../components/chat/chat-messages-panel.tsx   |  18 +-
 .../search/search-results-panel.tsx           |  20 +-
 web/src/components/ui/button.tsx              |  12 +-
 web/src/components/ui/input.tsx               |   2 +-
 web/src/components/ui/textarea.tsx            |   2 +-
 web/src/index.css                             |  76 +++++--
 8 files changed, 235 insertions(+), 111 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 863c20f..f7871f8 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -248,7 +248,7 @@ function ModelCombobox({ options, value, onChange, disabled = false }: ModelComb
 
   return (
     <div className="relative" ref={rootRef}>
-      <div className="flex h-9 min-w-56 items-center rounded-md border border-input bg-background px-2 text-sm">
+      <div className="flex h-10 min-w-56 items-center rounded-lg border border-violet-300/22 bg-background/72 px-3 text-sm shadow-[inset_0_1px_0_hsl(255_100%_92%_/_0.06)]">
         <input
           ref={inputRef}
           value={draftValue}
@@ -289,12 +289,12 @@ function ModelCombobox({ options, value, onChange, disabled = false }: ModelComb
         </button>
       </div>
       {open ? (
-        <div className="absolute right-0 z-50 mt-1 w-full rounded-md border border-border bg-background p-1 shadow-md">
+        <div className="absolute right-0 z-50 mt-2 w-full rounded-lg border border-violet-300/20 bg-[hsl(238_48%_7%)] p-1 shadow-2xl shadow-black/45">
           <div className="max-h-64 overflow-y-auto">
             {normalizedDraftValue && !hasExactOption ? (
               <button
                 type="button"
-                className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-muted"
+                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-violet-400/12"
                 onClick={commitDraftValue}
               >
                 <Check className={cn("h-4 w-4", normalizedDraftValue === value ? "opacity-100" : "opacity-0")} />
@@ -306,7 +306,7 @@ function ModelCombobox({ options, value, onChange, disabled = false }: ModelComb
                 <button
                   key={option}
                   type="button"
-                  className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-muted"
+                  className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-violet-400/12"
                   onClick={() => {
                     onChange(option);
                     setOpen(false);
@@ -378,6 +378,32 @@ function formatDate(value: string) {
   }).format(new Date(value));
 }
 
+function getSidebarSectionLabel(value: string) {
+  const date = new Date(value);
+  const now = new Date();
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+  const startOfItemDay = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+  const dayMs = 24 * 60 * 60 * 1000;
+  const dayDelta = Math.floor((startOfToday - startOfItemDay) / dayMs);
+
+  if (dayDelta <= 0) return "TODAY";
+  if (dayDelta < 7) return "LAST 7 DAYS";
+  return "EARLIER";
+}
+
+function buildSidebarSections(items: SidebarItem[]) {
+  return items.reduce<Array<{ label: string; items: SidebarItem[] }>>((sections, item) => {
+    const label = getSidebarSectionLabel(item.updatedAt);
+    const section = sections.find((candidate) => candidate.label === label);
+    if (section) {
+      section.items.push(item);
+    } else {
+      sections.push({ label, items: [item] });
+    }
+    return sections;
+  }, []);
+}
+
 export default function App() {
   const {
     authTokenInput,
@@ -422,6 +448,7 @@ export default function App() {
   const wasSendingRef = useRef(false);
   const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
+  const [sidebarQuery, setSidebarQuery] = useState("");
   const initialRouteSelectionRef = useRef<SidebarSelection | null>(readSidebarSelectionFromUrl());
   const hasSyncedSelectionHistoryRef = useRef(false);
 
@@ -442,6 +469,17 @@ export default function App() {
   }, [composer]);
 
   const sidebarItems = useMemo(() => buildSidebarItems(chats, searches), [chats, searches]);
+  const filteredSidebarItems = useMemo(() => {
+    const query = sidebarQuery.trim().toLowerCase();
+    if (!query) return sidebarItems;
+    return sidebarItems.filter((item) => {
+      const providerLabel = getProviderLabel(item.lastUsedProvider || item.initiatedProvider).toLowerCase();
+      return [item.title, item.initiatedModel, item.lastUsedModel, providerLabel]
+        .filter(Boolean)
+        .some((value) => String(value).toLowerCase().includes(query));
+    });
+  }, [sidebarItems, sidebarQuery]);
+  const sidebarSections = useMemo(() => buildSidebarSections(filteredSidebarItems), [filteredSidebarItems]);
 
   const resetWorkspaceState = () => {
     setChats([]);
@@ -1171,12 +1209,12 @@ export default function App() {
   }
 
   return (
-    <div className="h-full">
-      <div className="flex h-full w-full overflow-hidden bg-background">
+    <div className="app-grid-surface h-full p-0 md:p-2">
+      <div className="flex h-full w-full overflow-hidden bg-transparent md:gap-2">
         {isMobileSidebarOpen ? (
           <button
             type="button"
-            className="fixed inset-0 z-30 bg-black/45 md:hidden"
+            className="fixed inset-0 z-30 bg-black/70 backdrop-blur-sm md:hidden"
             onClick={() => setIsMobileSidebarOpen(false)}
             aria-label="Close sidebar"
           />
@@ -1184,22 +1222,37 @@ export default function App() {
 
         <aside
           className={cn(
-            "fixed inset-y-0 left-0 z-40 flex w-[85vw] max-w-80 shrink-0 flex-col border-r bg-[hsl(272_34%_14%)] transition-transform md:static md:z-auto md:w-80 md:max-w-none",
+            "glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none md:rounded-2xl md:border",
             isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
           )}
         >
-          <div className="grid grid-cols-2 gap-2 p-3">
-            <Button className="justify-start gap-2" onClick={handleCreateChat}>
+          <div className="px-4 pb-4 pt-5">
+            <div className="sybil-wordmark bg-[linear-gradient(90deg,#ff8df8,#9a6dff_54%,#67dfff)] bg-clip-text text-3xl text-transparent">
+              SYBIL
+            </div>
+          </div>
+
+          <div className="space-y-3 px-3 pb-3">
+            <Button className="h-11 w-full justify-start gap-3 text-[15px]" onClick={handleCreateChat}>
               <Plus className="h-4 w-4" />
               New chat
             </Button>
-            <Button className="justify-start gap-2" variant="secondary" onClick={handleCreateSearch}>
+            <Button className="h-10 w-full justify-start gap-3" variant="secondary" onClick={handleCreateSearch}>
               <Search className="h-4 w-4" />
               New search
             </Button>
+            <div className="relative">
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-violet-200/58" />
+              <input
+                value={sidebarQuery}
+                onInput={(event) => setSidebarQuery(event.currentTarget.value)}
+                placeholder="Search chats"
+                className="h-10 w-full rounded-lg border border-violet-300/18 bg-background/66 pl-9 pr-3 text-sm text-violet-50 outline-none shadow-[inset_0_1px_0_hsl(255_100%_92%_/_0.05)] placeholder:text-muted-foreground focus:border-violet-300/45 focus:ring-1 focus:ring-ring/70"
+              />
+            </div>
           </div>
-          <Separator />
-          <div className="flex-1 overflow-y-auto p-2">
+          <Separator className="bg-violet-300/10" />
+          <div className="flex-1 overflow-y-auto px-2 py-3">
             {isLoadingCollections && sidebarItems.length === 0 ? <p className="px-2 py-3 text-sm text-muted-foreground">Loading conversations...</p> : null}
             {!isLoadingCollections && sidebarItems.length === 0 ? (
               <div className="flex h-full flex-col items-center justify-center gap-2 p-5 text-center text-sm text-muted-foreground">
@@ -1207,45 +1260,60 @@ export default function App() {
                 Start a chat or run your first search.
               </div>
             ) : null}
-            {sidebarItems.map((item) => {
-              const active = selectedItem?.kind === item.kind && selectedItem.id === item.id;
-              const initiatedLabel = item.kind === "chat" && item.initiatedModel
-                ? `${getProviderLabel(item.initiatedProvider)}${item.initiatedProvider ? " · " : ""}${item.initiatedModel}`
-                : null;
-              return (
-                <button
-                  key={`${item.kind}-${item.id}`}
-                  className={cn(
-                    "mb-1 w-full rounded-lg px-3 py-2 text-left transition",
-                    active ? "bg-violet-500/30 text-violet-100" : "text-violet-200/85 hover:bg-violet-500/15"
-                  )}
-                  onClick={() => {
-                    setContextMenu(null);
-                    setDraftKind(null);
-                    setSelectedItem({ kind: item.kind, id: item.id });
-                    setIsMobileSidebarOpen(false);
-                  }}
-                  onContextMenu={(event) => openContextMenu(event, { kind: item.kind, id: item.id })}
-                  type="button"
-                >
-                  <div className="flex items-center gap-2">
-                    {item.kind === "chat" ? <MessageSquare className="h-3.5 w-3.5" /> : <Search className="h-3.5 w-3.5" />}
-                    <p className="truncate text-sm font-medium">{item.title}</p>
-                  </div>
-                  <div className="mt-1 flex items-center gap-2 text-xs">
-                    <p className={cn("shrink-0", active ? "text-violet-100/90" : "text-violet-300/60")}>{formatDate(item.updatedAt)}</p>
-                    {initiatedLabel ? (
-                      <p className={cn("ml-auto truncate text-right", active ? "text-violet-200/65" : "text-violet-300/45")}>{initiatedLabel}</p>
-                    ) : null}
-                  </div>
-                </button>
-              );
-            })}
+            {!isLoadingCollections && sidebarItems.length > 0 && filteredSidebarItems.length === 0 ? (
+              <p className="px-2 py-3 text-sm text-muted-foreground">No chats found.</p>
+            ) : null}
+            {sidebarSections.map((section) => (
+              <div key={section.label} className="mb-4">
+                <p className="px-3 pb-2 text-[11px] font-semibold text-violet-200/48">{section.label}</p>
+                {section.items.map((item) => {
+                  const active = selectedItem?.kind === item.kind && selectedItem.id === item.id;
+                  const initiatedLabel = item.kind === "chat" && item.initiatedModel
+                    ? `${getProviderLabel(item.initiatedProvider)}${item.initiatedProvider ? " · " : ""}${item.initiatedModel}`
+                    : null;
+                  return (
+                    <button
+                      key={`${item.kind}-${item.id}`}
+                      className={cn(
+                        "mb-1 w-full rounded-lg border px-3 py-2.5 text-left transition",
+                        active
+                          ? "border-violet-300/45 bg-[linear-gradient(135deg,hsl(258_86%_52%_/_0.58),hsl(277_78%_28%_/_0.55))] text-violet-50"
+                          : "border-transparent text-violet-100/78 hover:border-violet-300/18 hover:bg-violet-400/10"
+                      )}
+                      onClick={() => {
+                        setContextMenu(null);
+                        setDraftKind(null);
+                        setSelectedItem({ kind: item.kind, id: item.id });
+                        setIsMobileSidebarOpen(false);
+                      }}
+                      onContextMenu={(event) => openContextMenu(event, { kind: item.kind, id: item.id })}
+                      type="button"
+                    >
+                      <div className="flex items-center gap-2">
+                        <span
+                          className={cn(
+                            "flex h-5 w-5 shrink-0 items-center justify-center rounded-md border",
+                            active ? "border-cyan-200/35 bg-cyan-300/12 text-cyan-100" : "border-violet-300/18 text-violet-200/70"
+                          )}
+                        >
+                          {item.kind === "chat" ? <MessageSquare className="h-3.5 w-3.5" /> : <Search className="h-3.5 w-3.5" />}
+                        </span>
+                        <p className="truncate text-sm font-semibold">{item.title}</p>
+                        <p className={cn("ml-auto shrink-0 text-xs", active ? "text-violet-100/86" : "text-violet-200/50")}>{formatDate(item.updatedAt)}</p>
+                      </div>
+                      {initiatedLabel ? (
+                        <p className={cn("mt-1 truncate text-right text-xs", active ? "text-violet-100/62" : "text-violet-200/42")}>{initiatedLabel}</p>
+                      ) : null}
+                    </button>
+                  );
+                })}
+              </div>
+            ))}
           </div>
         </aside>
 
-        <main className="flex min-w-0 flex-1 flex-col">
-          <header className="flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3">
+        <main className="glass-panel relative flex min-w-0 flex-1 flex-col overflow-hidden border-violet-300/18 md:rounded-2xl md:border">
+          <header className="flex flex-wrap items-center justify-between gap-3 border-b border-violet-300/12 bg-[linear-gradient(180deg,hsl(243_48%_10%_/_0.86),hsl(236_48%_6%_/_0.66))] px-4 py-3 md:px-7">
             <div className="flex items-start gap-2">
               <Button
                 type="button"
@@ -1259,18 +1327,19 @@ export default function App() {
               </Button>
 
               <div>
-              <h1 className="text-sm font-semibold md:text-base">{selectedTitle}</h1>
-              <p className="text-xs text-muted-foreground">
-                Sybil Web{authMode ? ` (${authMode === "open" ? "open mode" : "token mode"})` : ""}
-                {isSearchMode ? " • Exa Search" : ""}
-              </p>
+                <h1 className="text-sm font-semibold text-violet-50 md:text-base">{selectedTitle}</h1>
+                <p className="mt-0.5 flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                  Sybil Web{authMode ? ` (${authMode === "open" ? "open mode" : "token mode"})` : ""}
+                  {isSearchMode ? " • Exa Search" : ""}
+                </p>
               </div>
             </div>
             <div className="flex w-full max-w-xl items-center gap-2 md:w-auto">
               {!isSearchMode ? (
                 <>
                   <select
-                    className="h-9 rounded-md border border-input bg-background px-2 text-sm"
+                    className="h-10 min-w-32 rounded-lg border border-violet-300/22 bg-background/72 px-3 text-sm text-violet-50 outline-none shadow-[inset_0_1px_0_hsl(255_100%_92%_/_0.06)] focus:border-violet-300/45 focus:ring-1 focus:ring-ring/70"
                     value={provider}
                     onChange={(event) => {
                       const nextProvider = event.currentTarget.value as Provider;
@@ -1299,7 +1368,7 @@ export default function App() {
                   />
                 </>
               ) : (
-                <div className="flex h-9 items-center rounded-md border border-input px-3 text-sm text-muted-foreground">
+                <div className="flex h-10 items-center rounded-lg border border-cyan-300/22 bg-cyan-300/8 px-3 text-sm text-cyan-100">
                   <Globe2 className="mr-2 h-4 w-4" />
                   Search mode
                 </div>
@@ -1309,7 +1378,7 @@ export default function App() {
 
           <div
             ref={transcriptContainerRef}
-            className={cn("flex-1 overflow-y-auto px-3 pt-6 md:px-10", isSearchMode ? "pb-6" : "pb-28 md:pb-40")}
+            className="flex-1 overflow-y-auto px-4 pt-8 md:px-10 lg:px-14 pb-36 md:pb-44"
             onScroll={() => {
               const container = transcriptContainerRef.current;
               if (!container) return;
@@ -1325,8 +1394,8 @@ export default function App() {
             <div ref={transcriptEndRef} />
           </div>
 
-          <footer className="border-t p-3 md:p-4">
-            <div className="mx-auto max-w-3xl rounded-xl border bg-background p-2 shadow-sm">
+          <footer className="pointer-events-none absolute inset-x-0 bottom-0 z-10 bg-[linear-gradient(to_top,hsl(235_50%_4%)_0%,hsl(235_50%_4%_/_0.92)_58%,transparent)] p-3 pt-14 md:p-6 md:pt-20">
+            <div className="pointer-events-auto mx-auto max-w-4xl rounded-2xl border border-violet-300/30 bg-[linear-gradient(135deg,hsl(235_48%_7%_/_0.96),hsl(258_48%_11%_/_0.94))] p-2 shadow-lg shadow-black/20">
               <Textarea
                 id="composer-input"
                 rows={1}
@@ -1343,13 +1412,13 @@ export default function App() {
                     void handleSend();
                   }
                 }}
-                placeholder={isSearchMode ? "Search the web" : "Message Sybil"}
-                className="max-h-40 min-h-0 resize-none overflow-y-auto border-0 shadow-none focus-visible:ring-0"
+                placeholder={isSearchMode ? "Search the web" : "Message Sybil..."}
+                className="max-h-40 min-h-0 resize-none overflow-y-auto border-0 bg-transparent px-3 py-3 text-base text-violet-50 shadow-none placeholder:text-violet-200/45 focus-visible:ring-0"
                 disabled={isSending}
               />
-              <div className={cn("flex items-center px-2 pb-1", error ? "justify-between" : "justify-end")}>
-                {error ? <p className="text-xs text-red-600">{error}</p> : null}
-                <Button onClick={() => void handleSend()} size="icon" disabled={isSending || !composer.trim()}>
+              <div className={cn("flex items-center gap-3 px-2 pb-1", error ? "justify-between" : "justify-end")}>
+                {error ? <p className="min-w-0 truncate text-xs text-rose-300">{error}</p> : null}
+                <Button className="h-10 w-10 rounded-lg" onClick={() => void handleSend()} size="icon" disabled={isSending || !composer.trim()}>
                   {isSearchMode ? <Search className="h-4 w-4" /> : <SendHorizontal className="h-4 w-4" />}
                 </Button>
               </div>
@@ -1360,13 +1429,13 @@ export default function App() {
       {contextMenu ? (
         <div
           ref={contextMenuRef}
-          className="fixed z-50 min-w-40 rounded-md border border-border bg-background p-1 shadow-md"
+          className="fixed z-50 min-w-40 rounded-lg border border-violet-300/20 bg-[hsl(238_48%_7%)] p-1 shadow-2xl shadow-black/45"
           style={{ left: contextMenu.x, top: contextMenu.y }}
           onContextMenu={(event) => event.preventDefault()}
         >
           <button
             type="button"
-            className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm text-red-600 transition hover:bg-muted disabled:text-muted-foreground"
+            className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-rose-300 transition hover:bg-rose-500/12 disabled:text-muted-foreground"
             onClick={() => void handleDeleteFromContextMenu()}
             disabled={isSending}
           >
diff --git a/web/src/components/auth/auth-screen.tsx b/web/src/components/auth/auth-screen.tsx
index 40fd1fb..d5dbb34 100644
--- a/web/src/components/auth/auth-screen.tsx
+++ b/web/src/components/auth/auth-screen.tsx
@@ -12,14 +12,20 @@ type Props = {
 
 export function AuthScreen({ authTokenInput, setAuthTokenInput, isSigningIn, authError, onSignIn }: Props) {
   return (
-    <div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top,#45215f_0%,#2a183d_45%,#191227_100%)] p-4">
-      <div className="w-full max-w-md rounded-2xl border bg-[hsl(276_32%_14%)] p-6 shadow-xl shadow-violet-950/45">
+    <div className="app-grid-surface flex h-full items-center justify-center p-4">
+      <div className="glass-panel w-full max-w-md rounded-2xl border border-violet-300/18 p-6">
+        <div className="mb-6">
+          <div className="sybil-wordmark bg-[linear-gradient(90deg,#ff8df8,#9a6dff_54%,#67dfff)] bg-clip-text text-3xl text-transparent">
+            SYBIL
+          </div>
+        </div>
+
         <div className="mb-5 flex items-start gap-3">
-          <div className="rounded-lg bg-violet-200 p-2 text-violet-900">
+          <div className="rounded-lg border border-cyan-300/25 bg-cyan-400/12 p-2 text-cyan-200">
             <ShieldCheck className="h-4 w-4" />
           </div>
           <div>
-            <h1 className="text-lg font-semibold">Sign in to Sybil</h1>
+            <h1 className="text-lg font-semibold text-violet-50">Sign in to Sybil</h1>
             <p className="mt-1 text-sm text-muted-foreground">Use your backend admin token.</p>
           </div>
         </div>
@@ -38,6 +44,7 @@ export function AuthScreen({ authTokenInput, setAuthTokenInput, isSigningIn, aut
             value={authTokenInput}
             onInput={(event) => setAuthTokenInput(event.currentTarget.value)}
             disabled={isSigningIn}
+            className="bg-[hsl(235_48%_6%_/_0.84)] text-violet-50"
           />
           <Button className="w-full" type="submit" disabled={isSigningIn}>
             {isSigningIn ? "Signing in..." : "Sign in"}
diff --git a/web/src/components/chat/chat-messages-panel.tsx b/web/src/components/chat/chat-messages-panel.tsx
index a145dda..8f596c9 100644
--- a/web/src/components/chat/chat-messages-panel.tsx
+++ b/web/src/components/chat/chat-messages-panel.tsx
@@ -42,7 +42,7 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
   return (
     <>
       {isLoading && messages.length === 0 ? <p className="text-sm text-muted-foreground">Loading messages...</p> : null}
-      <div className="mx-auto max-w-3xl space-y-6">
+      <div className="mx-auto max-w-4xl space-y-6">
         {messages.map((message) => {
           const toolLogMetadata = asToolLogMetadata(message.metadata);
           if (message.role === "tool" && toolLogMetadata) {
@@ -53,13 +53,13 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
               <div key={message.id} className="flex justify-start">
                 <div
                   className={cn(
-                    "inline-flex max-w-[85%] items-center gap-2 rounded-md border px-3 py-2 text-xs leading-5",
+                    "inline-flex max-w-[85%] items-center gap-3 rounded-lg border px-3.5 py-2 text-sm leading-5 shadow-[inset_0_1px_0_hsl(180_100%_88%_/_0.06)]",
                     isFailed
-                      ? "border-rose-500/40 bg-rose-950/20 text-rose-200"
-                      : "border-cyan-500/35 bg-cyan-950/20 text-cyan-100"
+                      ? "border-rose-500/40 bg-rose-950/18 text-rose-200"
+                      : "border-cyan-400/34 bg-cyan-950/18 text-cyan-100"
                   )}
                 >
-                  <Icon className="h-3.5 w-3.5 shrink-0" />
+                  <Icon className="h-4 w-4 shrink-0 text-cyan-300" />
                   <span>{getToolSummary(message, toolLogMetadata)}</span>
                 </div>
               </div>
@@ -73,7 +73,9 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
               <div
                 className={cn(
                   "max-w-[85%]",
-                  isUser ? "rounded-2xl bg-violet-900/80 px-4 py-3 text-sm leading-6 text-fuchsia-50" : "text-base leading-7 text-fuchsia-100"
+                  isUser
+                    ? "rounded-xl border border-violet-300/24 bg-[linear-gradient(135deg,hsl(258_86%_48%_/_0.86),hsl(278_72%_29%_/_0.86))] px-4 py-3 text-sm leading-6 text-fuchsia-50 shadow-sm"
+                    : "text-base leading-7 text-violet-50"
                 )}
               >
                 {isPendingAssistant ? (
@@ -85,7 +87,7 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
                 ) : (
                   <MarkdownContent
                     markdown={message.content}
-                    className={cn("[&_a]:text-inherit [&_a]:underline", isUser ? "leading-[1.78] text-fuchsia-50" : "leading-[1.82] text-fuchsia-100")}
+                    className={cn("[&_a]:text-inherit [&_a]:underline", isUser ? "leading-[1.78] text-fuchsia-50" : "leading-[1.82] text-violet-50")}
                   />
                 )}
               </div>
@@ -94,7 +96,7 @@ export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
         })}
         {isSending && !hasPendingAssistant ? (
           <div className="flex justify-start">
-            <div className="max-w-[85%] text-base leading-7 text-fuchsia-100">
+            <div className="max-w-[85%] text-base leading-7 text-violet-50">
               <span className="inline-flex items-center gap-1" aria-label="Assistant is typing" role="status">
                 <span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" />
                 <span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:140ms]" />
diff --git a/web/src/components/search/search-results-panel.tsx b/web/src/components/search/search-results-panel.tsx
index dc11c70..8490c3a 100644
--- a/web/src/components/search/search-results-panel.tsx
+++ b/web/src/components/search/search-results-panel.tsx
@@ -139,7 +139,7 @@ export function SearchResultsPanel({
       {search?.query ? (
         <div className="mb-5">
           <p className="text-sm text-muted-foreground">Results for</p>
-          <h2 className="mt-1 break-words text-xl font-semibold">{search.query}</h2>
+          <h2 className="mt-1 break-words text-xl font-semibold text-violet-50">{search.query}</h2>
           <p className="mt-1 text-xs text-muted-foreground">
             {search.results.length} result{search.results.length === 1 ? "" : "s"}
             {search.latencyMs ? ` • ${search.latencyMs} ms` : ""}
@@ -148,8 +148,8 @@ export function SearchResultsPanel({
       ) : null}
 
       {(isRunning || !!search?.answerText || !!search?.answerError) && (
-        <section className="mb-6 rounded-xl border border-violet-400/35 bg-[hsl(276_31%_15%)] p-4">
-          <p className="text-xs font-semibold uppercase tracking-wide text-violet-300/90">Answer</p>
+        <section className="mb-6 rounded-xl border border-violet-300/24 bg-[linear-gradient(135deg,hsl(240_46%_8%_/_0.94),hsl(260_40%_12%_/_0.88))] p-4 shadow-[inset_0_1px_0_hsl(255_100%_92%_/_0.06)]">
+          <p className="text-xs font-semibold uppercase text-violet-300/90">Answer</p>
           {(isAnswerLoading || hasAnswerText) ? (
             <div className="mt-2">
               <div className="relative">
@@ -172,7 +172,7 @@ export function SearchResultsPanel({
                   )}
                 </div>
                 {!isAnswerExpanded && (isExpandable || isAnswerLoading) ? (
-                  <div className="pointer-events-none absolute inset-x-0 bottom-0 h-7 bg-gradient-to-t from-[hsl(276_31%_15%)] to-transparent" />
+                  <div className="pointer-events-none absolute inset-x-0 bottom-0 h-7 bg-gradient-to-t from-[hsl(252_42%_10%)] to-transparent" />
                 ) : null}
               </div>
               <div className="mt-2 h-5">
@@ -199,7 +199,7 @@ export function SearchResultsPanel({
                     href={citation.href}
                     target={openLinksInNewTab ? "_blank" : undefined}
                     rel={openLinksInNewTab ? "noreferrer" : undefined}
-                    className="max-w-full truncate rounded-md border border-violet-400/40 px-2 py-1 text-xs text-violet-200 hover:bg-violet-500/20"
+                    className="max-w-full truncate rounded-md border border-violet-300/28 bg-violet-300/8 px-2 py-1 text-xs text-violet-200 hover:bg-violet-500/20"
                   >
                     <span className="mr-1 rounded bg-violet-900/70 px-1 py-0.5 text-[10px] text-violet-100">{citation.index}</span>
                     {citation.label}
@@ -225,23 +225,23 @@ export function SearchResultsPanel({
             <article
               key={result.id}
               className={cn(
-                "rounded-lg border border-border bg-[hsl(276_30%_13%)] px-4 py-4 shadow-sm transition-colors",
-                index === activeResultIndex && "border-violet-300 ring-1 ring-violet-300/80"
+                "rounded-lg border border-violet-300/16 bg-[linear-gradient(135deg,hsl(238_44%_7%_/_0.92),hsl(250_34%_10%_/_0.86))] px-4 py-4 shadow-sm transition-colors",
+                index === activeResultIndex && "border-violet-300/55 ring-1 ring-violet-300/70"
               )}
             >
-              <p className="truncate text-xs text-violet-300/85">{formatHost(result.url)}</p>
+              <p className="truncate text-xs text-cyan-200/85">{formatHost(result.url)}</p>
               <a
                 href={result.url}
                 target={openLinksInNewTab ? "_blank" : undefined}
                 rel={openLinksInNewTab ? "noreferrer" : undefined}
-                className="mt-1 block break-words text-lg font-medium text-violet-300 hover:underline"
+                className="mt-1 block break-words text-lg font-medium text-violet-200 hover:underline"
               >
                 {result.title || result.url}
               </a>
               {(result.publishedDate || result.author) && (
                 <p className="mt-1 text-xs text-muted-foreground">{[result.publishedDate, result.author].filter(Boolean).join(" • ")}</p>
               )}
-              {result.url ? <p className="mt-2 break-all text-sm leading-6 text-violet-100/90">{result.url}</p> : null}
+              {result.url ? <p className="mt-2 break-all text-sm leading-6 text-violet-100/82">{result.url}</p> : null}
             </article>
           );
         })}
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index b7756b1..818adac 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -3,14 +3,16 @@ import type { JSX } from "preact";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default:
+          "border border-violet-300/35 bg-[linear-gradient(135deg,hsl(252_92%_64%_/_0.95),hsl(274_84%_35%_/_0.95))] text-primary-foreground shadow-sm hover:border-violet-200/55 hover:brightness-110",
+        secondary:
+          "border border-violet-300/18 bg-secondary/78 text-secondary-foreground shadow-[inset_0_1px_0_hsl(255_100%_92%_/_0.06)] hover:border-violet-300/32 hover:bg-secondary",
+        outline: "border border-input bg-background/76 hover:border-violet-300/45 hover:bg-accent/65 hover:text-accent-foreground",
+        ghost: "text-muted-foreground hover:bg-accent/65 hover:text-accent-foreground",
       },
       size: {
         default: "h-10 px-4 py-2",
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
index 4875e19..431eac6 100644
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -5,7 +5,7 @@ export function Input({ className, ...props }: JSX.InputHTMLAttributes<HTMLInput
   return (
     <input
       className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "flex h-9 w-full rounded-md border border-input bg-background/78 px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
         className
       )}
       {...props}
diff --git a/web/src/components/ui/textarea.tsx b/web/src/components/ui/textarea.tsx
index 9794398..90bf5b6 100644
--- a/web/src/components/ui/textarea.tsx
+++ b/web/src/components/ui/textarea.tsx
@@ -5,7 +5,7 @@ export function Textarea({ className, ...props }: JSX.TextareaHTMLAttributes<HTM
   return (
     <textarea
       className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background/78 px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
         className
       )}
       {...props}
diff --git a/web/src/index.css b/web/src/index.css
index d45ce37..a8067ed 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,26 +1,31 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@700;800;900&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 :root {
-  --background: 282 33% 8%;
-  --foreground: 300 35% 95%;
-  --muted: 287 24% 16%;
-  --muted-foreground: 297 16% 72%;
-  --border: 287 24% 24%;
-  --input: 287 24% 24%;
-  --ring: 264 76% 70%;
-  --primary: 266 72% 67%;
-  --primary-foreground: 296 45% 12%;
-  --secondary: 277 24% 19%;
-  --secondary-foreground: 302 42% 94%;
-  --accent: 279 24% 22%;
-  --accent-foreground: 305 45% 94%;
-  --radius: 0.65rem;
+  color-scheme: dark;
+  --background: 235 45% 4%;
+  --foreground: 258 36% 96%;
+  --muted: 246 30% 13%;
+  --muted-foreground: 247 18% 68%;
+  --border: 251 35% 20%;
+  --input: 252 42% 24%;
+  --ring: 258 92% 70%;
+  --primary: 264 93% 66%;
+  --primary-foreground: 265 55% 98%;
+  --secondary: 244 32% 14%;
+  --secondary-foreground: 254 38% 94%;
+  --accent: 188 86% 50%;
+  --accent-foreground: 230 45% 8%;
+  --radius: 0.5rem;
 }
 
 * {
   @apply border-border;
+  scrollbar-color: hsl(263 92% 68% / 0.42) transparent;
+  scrollbar-width: thin;
 }
 
 html,
@@ -31,8 +36,47 @@ body,
 
 body {
   @apply bg-background text-foreground antialiased;
-  background-image: radial-gradient(circle at top, hsl(274 42% 18%) 0%, hsl(271 34% 12%) 42%, hsl(266 32% 7%) 100%);
-  font-family: "Soehne", "Avenir Next", "Segoe UI", sans-serif;
+  background-color: hsl(var(--background));
+  background-image:
+    linear-gradient(90deg, hsl(187 92% 49% / 0.08), transparent 24%, hsl(264 92% 59% / 0.12) 74%, transparent),
+    linear-gradient(180deg, hsl(250 60% 16% / 0.68), hsl(235 45% 4%) 48%, hsl(235 54% 3%));
+  font-family: "Inter", "Avenir Next", "Segoe UI", sans-serif;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color-scheme: dark;
+}
+
+::selection {
+  background: hsl(264 92% 68% / 0.45);
+  color: hsl(258 36% 98%);
+}
+
+.sybil-wordmark {
+  font-family: "Orbitron", "Inter", sans-serif;
+  font-weight: 900;
+  letter-spacing: 0;
+  line-height: 1;
+}
+
+.app-grid-surface {
+  background-image:
+    linear-gradient(hsl(244 48% 20% / 0.18) 1px, transparent 1px),
+    linear-gradient(90deg, hsl(244 48% 20% / 0.14) 1px, transparent 1px);
+  background-size: 48px 48px;
+}
+
+.glass-panel {
+  background:
+    linear-gradient(180deg, hsl(243 42% 12% / 0.88), hsl(236 48% 5% / 0.92)),
+    hsl(236 48% 6%);
+  box-shadow:
+    inset 0 1px 0 hsl(252 90% 86% / 0.08),
+    0 14px 36px hsl(240 80% 2% / 0.28);
 }
 
 .md-content {