From 1ab32562049fdb51de7ffc3a7cc8af19f721a306 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@t3.gg>
Date: Mon, 9 Feb 2026 01:27:01 -0800
Subject: [PATCH] light mode round 2

---
 apps/renderer/index.html                      |   2 +-
 apps/renderer/package.json                    |   1 +
 apps/renderer/src/App.tsx                     |   6 +-
 apps/renderer/src/components/ChatMarkdown.tsx |   2 +-
 apps/renderer/src/components/ChatView.tsx     |  86 +++----
 apps/renderer/src/components/DiffPanel.tsx    |  18 +-
 apps/renderer/src/components/Sidebar.tsx      |  70 ++++--
 apps/renderer/src/hooks/useTheme.ts           |  90 ++++++++
 apps/renderer/src/index.css                   | 213 ++++++++++++++++--
 bun.lock                                      |   3 +
 10 files changed, 394 insertions(+), 97 deletions(-)
 create mode 100644 apps/renderer/src/hooks/useTheme.ts

diff --git a/apps/renderer/index.html b/apps/renderer/index.html
index 7084d1a08b198f7188a00f59ff3d6328c62f9d3f..c2c8793a7c00635add4a75de3659a3449480ce04 100644
--- a/apps/renderer/index.html
+++ b/apps/renderer/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Electron Todo</title>
   </head>
-  <body class="bg-slate-100">
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/apps/renderer/package.json b/apps/renderer/package.json
index b91d3d1dae74e61b449a2bf191f3475f41342506..d5780ee5d54ccaf2c6aa532368f98c99ac201fb9 100644
--- a/apps/renderer/package.json
+++ b/apps/renderer/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@acme/contracts": "workspace:*",
     "highlight.js": "^11.11.1",
+    "lucide-react": "^0.563.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
diff --git a/apps/renderer/src/App.tsx b/apps/renderer/src/App.tsx
index 252e1cd4455782b1abe2754a3a823eb4e26a8ce7..a525c7caebec9c3705211e7722daca99c8cecbd1 100644
--- a/apps/renderer/src/App.tsx
+++ b/apps/renderer/src/App.tsx
@@ -31,10 +31,10 @@ function Layout() {
 
   if (!api) {
     return (
-      <div className="flex h-screen flex-col bg-[#0c0c0c] text-[#e0e0e0]">
+      <div className="flex h-screen flex-col bg-background text-foreground">
         <div className="drag-region h-[52px] shrink-0" />
         <div className="flex flex-1 items-center justify-center">
-          <p className="text-sm text-[#a0a0a0]/60">
+          <p className="text-sm text-muted-foreground">
             Native bridge unavailable. Launch through Electron.
           </p>
         </div>
@@ -43,7 +43,7 @@ function Layout() {
   }
 
   return (
-    <div className="flex h-screen overflow-hidden bg-[#0c0c0c] text-[#e0e0e0]">
+    <div className="flex h-screen overflow-hidden bg-background text-foreground">
       <EventRouter />
       <Sidebar />
       <ChatView />
diff --git a/apps/renderer/src/components/ChatMarkdown.tsx b/apps/renderer/src/components/ChatMarkdown.tsx
index 1d51a76851897ea6d488f956681013d31d2928bd..5104ddced5e66cfd9c8d77207f41406f36bdf69d 100644
--- a/apps/renderer/src/components/ChatMarkdown.tsx
+++ b/apps/renderer/src/components/ChatMarkdown.tsx
@@ -15,7 +15,7 @@ const markdownComponents: Components = {
 
 export default function ChatMarkdown({ text }: ChatMarkdownProps) {
   return (
-    <div className="chat-markdown text-sm leading-relaxed text-[#d0d0d0]">
+    <div className="chat-markdown text-sm leading-relaxed text-foreground/80">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[[rehypeHighlight, { detect: true, ignoreMissing: true }]]}
diff --git a/apps/renderer/src/components/ChatView.tsx b/apps/renderer/src/components/ChatView.tsx
index 8c1d89eee625be703300d77c1041480780538af3..78abc66f944b339e16eb326eb9d76e22eca49b76 100644
--- a/apps/renderer/src/components/ChatView.tsx
+++ b/apps/renderer/src/components/ChatView.tsx
@@ -47,10 +47,10 @@ function editorLabel(editor: (typeof EDITORS)[number]): string {
 const LAST_EDITOR_KEY = "codething:last-editor";
 
 function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
-  if (tone === "error") return "text-rose-300/50";
-  if (tone === "tool") return "text-[#8a8a8a]";
-  if (tone === "thinking") return "text-[#707070]";
-  return "text-[#606060]";
+  if (tone === "error") return "text-rose-300/50 dark:text-rose-300/50";
+  if (tone === "tool") return "text-muted-foreground/70";
+  if (tone === "thinking") return "text-muted-foreground/50";
+  return "text-muted-foreground/40";
 }
 
 interface PendingApprovalCard {
@@ -488,7 +488,7 @@ export default function ChatView() {
   // Empty state: no active thread
   if (!activeThread) {
     return (
-      <div className="flex flex-1 flex-col bg-[#0c0c0c] text-[#a0a0a0]/40">
+      <div className="flex flex-1 flex-col bg-background text-muted-foreground/40">
         <div className="drag-region h-[52px] shrink-0" />
         <div className="flex flex-1 items-center justify-center">
           <div className="text-center">
@@ -500,11 +500,11 @@ export default function ChatView() {
   }
 
   return (
-    <div className="flex flex-1 flex-col bg-[#0c0c0c]">
+    <div className="flex flex-1 flex-col bg-background">
       {/* Top bar */}
-      <header className="drag-region flex items-center justify-between border-b border-white/8 px-5 pt-[28px] pb-3">
+      <header className="drag-region flex items-center justify-between border-b border-border px-5 pt-[28px] pb-3">
         <div className="flex items-center gap-3">
-          <h2 className="text-sm font-medium text-[#e0e0e0]">
+          <h2 className="text-sm font-medium text-foreground">
             {activeThread.title}
           </h2>
         </div>
@@ -514,23 +514,23 @@ export default function ChatView() {
             <div className="relative" ref={editorMenuRef}>
               <button
                 type="button"
-                className="rounded-md px-2 py-1 text-[10px] text-[#a0a0a0]/40 transition-colors duration-150 hover:text-[#a0a0a0]/60"
+                className="rounded-md px-2 py-1 text-[10px] text-muted-foreground/40 transition-colors duration-150 hover:text-muted-foreground/60"
                 onClick={() => setIsEditorMenuOpen((v) => !v)}
               >
                 Open in&hellip;
               </button>
               {isEditorMenuOpen && (
-                <div className="absolute right-0 top-full z-50 mt-1 min-w-[120px] rounded-md border border-white/[0.08] bg-[#1b1b1d] py-1 shadow-xl">
+                <div className="absolute right-0 top-full z-50 mt-1 min-w-[120px] rounded-md border border-border bg-popover py-1 shadow-xl">
                   {EDITORS.map((editor) => (
                     <button
                       key={editor.id}
                       type="button"
-                      className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-[#e0e0e0] hover:bg-white/[0.06]"
+                      className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-foreground hover:bg-accent"
                       onClick={() => openInEditor(editor.id)}
                     >
                       {editorLabel(editor)}
                       {editor.id === lastEditor && (
-                        <kbd className="ml-auto text-[9px] text-[#a0a0a0]/40">
+                        <kbd className="ml-auto text-[9px] text-muted-foreground/40">
                           {navigator.platform.includes("Mac")
                             ? "\u2318O"
                             : "Ctrl+O"}
@@ -547,8 +547,8 @@ export default function ChatView() {
             type="button"
             className={`rounded-md px-2 py-1 text-[10px] transition-colors duration-150 ${
               state.diffOpen
-                ? "bg-white/10 text-white"
-                : "text-[#a0a0a0]/40 hover:text-[#a0a0a0]/60"
+                ? "bg-accent text-foreground"
+                : "text-muted-foreground/40 hover:text-muted-foreground/60"
             }`}
             onClick={() => dispatch({ type: "TOGGLE_DIFF" })}
           >
@@ -591,7 +591,7 @@ export default function ChatView() {
                 <div className="mt-2 flex flex-wrap gap-1.5">
                   <button
                     type="button"
-                    className="rounded-md border border-white/[0.15] bg-white/[0.08] px-2 py-1 text-[11px] text-[#e8e8e8] transition-colors duration-150 hover:bg-white/[0.13] disabled:cursor-not-allowed disabled:opacity-50"
+                    className="rounded-md border border-border bg-accent px-2 py-1 text-[11px] text-foreground transition-colors duration-150 hover:bg-accent/80 disabled:cursor-not-allowed disabled:opacity-50"
                     disabled={isResponding}
                     onClick={() =>
                       void onRespondToApproval(approval.requestId, "accept")
@@ -614,7 +614,7 @@ export default function ChatView() {
                   </button>
                   <button
                     type="button"
-                    className="rounded-md border border-white/[0.15] px-2 py-1 text-[11px] text-[#d8d8d8] transition-colors duration-150 hover:bg-white/[0.06] disabled:cursor-not-allowed disabled:opacity-50"
+                    className="rounded-md border border-border px-2 py-1 text-[11px] text-foreground/90 transition-colors duration-150 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
                     disabled={isResponding}
                     onClick={() =>
                       void onRespondToApproval(approval.requestId, "decline")
@@ -643,7 +643,7 @@ export default function ChatView() {
       <div className="flex-1 overflow-y-auto px-5 py-4">
         {activeThread.messages.length === 0 && !isWorking ? (
           <div className="flex h-full items-center justify-center">
-            <p className="text-sm text-[#a0a0a0]/30">Send a message to start the conversation.</p>
+            <p className="text-sm text-muted-foreground/30">Send a message to start the conversation.</p>
           </div>
         ) : (
           <div className="mx-auto max-w-3xl space-y-4">
@@ -654,18 +654,18 @@ export default function ChatView() {
                   (completionDividerBeforeEntryId === timelineEntry.id ||
                     timelineEntries[index - 1]?.kind === "work") && (
                     <div className="my-3 flex items-center gap-3">
-                      <span className="h-px flex-1 bg-white/[0.1]" />
-                      <span className="rounded-full border border-white/[0.12] bg-[#121212] px-2.5 py-1 text-[10px] uppercase tracking-[0.14em] text-[#9a9a9a]/80">
+                      <span className="h-px flex-1 bg-border" />
+                      <span className="rounded-full border border-border bg-background px-2.5 py-1 text-[10px] uppercase tracking-[0.14em] text-muted-foreground/80">
                         {completionSummary
                           ? `Response • ${completionSummary}`
                           : "Response"}
                       </span>
-                      <span className="h-px flex-1 bg-white/[0.1]" />
+                      <span className="h-px flex-1 bg-border" />
                     </div>
                   )}
                 {timelineEntry.kind === "work" ? (
                   <div className="flex items-start gap-2 py-0.5 pl-1.5">
-                    <span className="mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-white/[0.18]" />
+                    <span className="mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/30" />
                     <p
                       className={`py-[2px] text-[11px] leading-relaxed ${workToneClass(timelineEntry.entry.tone)}`}
                     >
@@ -686,11 +686,11 @@ export default function ChatView() {
                   </div>
                 ) : timelineEntry.message.role === "user" ? (
                   <div className="flex justify-end">
-                    <div className="max-w-[80%] rounded-2xl rounded-br-sm border border-white/[0.08] bg-white/[0.05] px-4 py-3">
-                      <pre className="whitespace-pre-wrap break-words font-mono text-sm leading-relaxed text-[#e0e0e0]">
+                    <div className="max-w-[80%] rounded-2xl rounded-br-sm border border-border bg-secondary px-4 py-3">
+                      <pre className="whitespace-pre-wrap break-words font-mono text-sm leading-relaxed text-foreground">
                         {timelineEntry.message.text}
                       </pre>
-                      <p className="mt-1.5 text-right text-[10px] text-[#a0a0a0]/30">
+                      <p className="mt-1.5 text-right text-[10px] text-muted-foreground/30">
                         {formatTimestamp(timelineEntry.message.createdAt)}
                       </p>
                     </div>
@@ -717,7 +717,7 @@ export default function ChatView() {
                         </span>
                       </div>
                     )}
-                    <p className="mt-1.5 text-[10px] text-[#a0a0a0]/30">
+                    <p className="mt-1.5 text-[10px] text-muted-foreground/30">
                       {formatMessageMeta(
                         timelineEntry.message.createdAt,
                         timelineEntry.message.streaming
@@ -739,12 +739,12 @@ export default function ChatView() {
             ))}
             {isWorking && (
               <div className="flex items-center gap-2 py-0.5 pl-1.5">
-                <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-white/[0.18]" />
+                <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/30" />
                 <div className="flex items-center pt-1">
                   <span className="inline-flex items-center gap-[3px]">
-                    <span className="h-1 w-1 rounded-full bg-white/20 animate-pulse" />
-                    <span className="h-1 w-1 rounded-full bg-white/20 animate-pulse [animation-delay:200ms]" />
-                    <span className="h-1 w-1 rounded-full bg-white/20 animate-pulse [animation-delay:400ms]" />
+                    <span className="h-1 w-1 rounded-full bg-muted-foreground/30 animate-pulse" />
+                    <span className="h-1 w-1 rounded-full bg-muted-foreground/30 animate-pulse [animation-delay:200ms]" />
+                    <span className="h-1 w-1 rounded-full bg-muted-foreground/30 animate-pulse [animation-delay:400ms]" />
                   </span>
                 </div>
               </div>
@@ -757,12 +757,12 @@ export default function ChatView() {
       {/* Input bar */}
       <div className="px-5 pb-4 pt-2">
         <form onSubmit={onSend} className="mx-auto max-w-3xl">
-          <div className="group rounded-[20px] border border-white/8 bg-[#141416] transition-colors duration-200 focus-within:border-white/16">
+          <div className="group rounded-[20px] border border-border bg-card transition-colors duration-200 focus-within:border-ring">
             {/* Textarea area */}
             <div className="px-4 pt-4 pb-2">
               <textarea
                 ref={textareaRef}
-                className="w-full resize-none bg-transparent text-[14px] leading-relaxed text-[#e0e0e0] placeholder:text-[#a0a0a0]/35 focus:outline-none"
+                className="w-full resize-none bg-transparent text-[14px] leading-relaxed text-foreground placeholder:text-muted-foreground/35 focus:outline-none"
                 rows={2}
                 value={prompt}
                 onChange={(e) => setPrompt(e.target.value)}
@@ -781,7 +781,7 @@ export default function ChatView() {
                 <div className="relative" ref={modelMenuRef}>
                   <button
                     type="button"
-                    className="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] text-[#a0a0a0]/70 transition-colors duration-150 hover:bg-white/6 hover:text-[#d0d0d0]"
+                    className="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] text-muted-foreground/70 transition-colors duration-150 hover:bg-accent hover:text-foreground/80"
                     onClick={() => setIsModelMenuOpen((open) => !open)}
                   >
                     <span className="max-w-[180px] truncate">{selectedModel}</span>
@@ -803,8 +803,8 @@ export default function ChatView() {
                     </svg>
                   </button>
                   {isModelMenuOpen && (
-                    <div className="absolute bottom-full left-0 z-20 mb-2 w-[320px] rounded-2xl border border-white/10 bg-[#1b1b1d]/95 p-2 shadow-[0_16px_40px_rgba(0,0,0,0.55)] backdrop-blur">
-                      <p className="px-2 py-1 text-[11px] text-[#a0a0a0]/70">Select model</p>
+                    <div className="absolute bottom-full left-0 z-20 mb-2 w-[320px] rounded-2xl border border-border bg-popover/95 p-2 shadow-[0_16px_40px_rgba(0,0,0,0.55)] backdrop-blur">
+                      <p className="px-2 py-1 text-[11px] text-muted-foreground/70">Select model</p>
                       <div className="max-h-72 overflow-y-auto">
                         {modelOptions.map((model) => {
                           const isSelected = model === selectedModel;
@@ -814,15 +814,15 @@ export default function ChatView() {
                               type="button"
                               className={`mb-0.5 flex w-full items-center justify-between gap-2 rounded-xl px-2 py-2 text-left font-mono text-sm transition-colors duration-150 ${
                                 isSelected
-                                  ? "bg-white/8 text-white"
-                                  : "text-[#d4d4d4] hover:bg-white/5"
+                                  ? "bg-accent text-foreground"
+                                  : "text-foreground/90 hover:bg-accent"
                               }`}
                               onClick={() => onModelSelect(model)}
                             >
                               <span className="truncate">{model}</span>
                               <span
                                 className={`pt-0.5 text-sm ${
-                                  isSelected ? "text-white" : "text-transparent"
+                                  isSelected ? "text-foreground" : "text-transparent"
                                 }`}
                               >
                                 ✓
@@ -836,11 +836,11 @@ export default function ChatView() {
                 </div>
 
                 {/* Divider */}
-                <div className="mx-0.5 h-4 w-px bg-white/8" />
+                <div className="mx-0.5 h-4 w-px bg-border" />
 
                 {/* Reasoning effort */}
                 <label
-                  className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] text-[#a0a0a0]/70 transition-colors duration-150 hover:bg-white/6 hover:text-[#d0d0d0]"
+                  className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] text-muted-foreground/70 transition-colors duration-150 hover:bg-accent hover:text-foreground/80"
                   htmlFor="reasoning-effort"
                 >
                   <span>{selectedEffort.charAt(0).toUpperCase() + selectedEffort.slice(1)}</span>
@@ -851,7 +851,7 @@ export default function ChatView() {
                     onChange={(event) => setSelectedEffort(event.target.value)}
                   >
                     {REASONING_OPTIONS.map((effort) => (
-                      <option key={effort} value={effort} className="bg-[#1b1b1d]">
+                      <option key={effort} value={effort} className="bg-popover">
                         {effort}
                         {effort === DEFAULT_REASONING ? " (default)" : ""}
                       </option>
@@ -876,12 +876,12 @@ export default function ChatView() {
                 </label>
 
                 {/* Divider */}
-                <div className="mx-0.5 h-4 w-px bg-white/[0.08]" />
+                <div className="mx-0.5 h-4 w-px bg-border" />
 
                 {/* Runtime mode toggle */}
                 <button
                   type="button"
-                  className="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] text-[#a0a0a0]/70 transition-colors duration-150 hover:bg-white/[0.06] hover:text-[#d0d0d0]"
+                  className="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] text-muted-foreground/70 transition-colors duration-150 hover:bg-accent hover:text-foreground/80"
                   disabled={isSwitchingRuntimeMode}
                   onClick={() =>
                     void handleRuntimeModeChange(
@@ -975,7 +975,7 @@ export default function ChatView() {
                 ) : (
                   <button
                     type="submit"
-                    className="flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-[#0c0c0c] transition-all duration-150 hover:bg-white hover:scale-105 disabled:opacity-30 disabled:hover:scale-100"
+                    className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/90 text-primary-foreground transition-all duration-150 hover:bg-primary hover:scale-105 disabled:opacity-30 disabled:hover:scale-100"
                     disabled={isSending || isConnecting || !prompt.trim()}
                     aria-label={
                       isConnecting ? "Connecting" : isSending ? "Sending" : "Send message"
diff --git a/apps/renderer/src/components/DiffPanel.tsx b/apps/renderer/src/components/DiffPanel.tsx
index 80d44b14f95f8a59e48f52143c47ce542394db97..344691d5c9a7a96ba23123d92e4149fc12509e39 100644
--- a/apps/renderer/src/components/DiffPanel.tsx
+++ b/apps/renderer/src/components/DiffPanel.tsx
@@ -4,13 +4,13 @@ export default function DiffPanel() {
   const { dispatch } = useStore();
 
   return (
-    <aside className="flex h-full w-[400px] shrink-0 flex-col border-l border-white/[0.08] bg-[#141414]">
+    <aside className="flex h-full w-[400px] shrink-0 flex-col border-l border-border bg-card">
       {/* Header */}
-      <div className="drag-region flex items-center justify-between border-b border-white/[0.08] px-4 pt-[28px] pb-3">
-        <h3 className="text-xs font-medium text-[#e0e0e0]">Uncommitted changes</h3>
+      <div className="drag-region flex items-center justify-between border-b border-border px-4 pt-[28px] pb-3">
+        <h3 className="text-xs font-medium text-foreground">Uncommitted changes</h3>
         <button
           type="button"
-          className="text-[#a0a0a0]/40 transition-colors duration-150 hover:text-[#a0a0a0]/70"
+          className="text-muted-foreground/60 transition-colors duration-150 hover:text-muted-foreground"
           onClick={() => dispatch({ type: "TOGGLE_DIFF" })}
         >
           <span className="text-sm">&times;</span>
@@ -20,12 +20,12 @@ export default function DiffPanel() {
       {/* Placeholder content */}
       <div className="flex-1 overflow-y-auto p-4">
         <div className="space-y-3">
-          <div className="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+          <div className="rounded-lg border border-border/80 bg-muted p-3">
             <div className="mb-2 flex items-center gap-2">
               <span className="rounded bg-emerald-500/20 px-1.5 py-0.5 text-[9px] font-medium text-emerald-400">
                 M
               </span>
-              <span className="font-mono text-xs text-[#a0a0a0]/60">src/App.tsx</span>
+              <span className="font-mono text-xs text-muted-foreground/80">src/App.tsx</span>
             </div>
             <div className="space-y-0.5 font-mono text-[11px]">
               <div className="text-red-400/60">- const oldValue = "hello";</div>
@@ -33,17 +33,17 @@ export default function DiffPanel() {
             </div>
           </div>
 
-          <div className="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+          <div className="rounded-lg border border-border/80 bg-muted p-3">
             <div className="flex items-center gap-2">
               <span className="rounded bg-blue-500/20 px-1.5 py-0.5 text-[9px] font-medium text-blue-400">
                 A
               </span>
-              <span className="font-mono text-xs text-[#a0a0a0]/60">src/utils.ts</span>
+              <span className="font-mono text-xs text-muted-foreground/80">src/utils.ts</span>
             </div>
           </div>
         </div>
 
-        <p className="mt-6 text-center text-[10px] text-[#a0a0a0]/25">
+        <p className="mt-6 text-center text-[10px] text-muted-foreground/30">
           Diff integration coming soon
         </p>
       </div>
diff --git a/apps/renderer/src/components/Sidebar.tsx b/apps/renderer/src/components/Sidebar.tsx
index 9f6cd27c7f169e3a5d4e0a8ba35666c6a20e0aa7..6dd24c3954659551bfe0cb6e14a7620495345634 100644
--- a/apps/renderer/src/components/Sidebar.tsx
+++ b/apps/renderer/src/components/Sidebar.tsx
@@ -1,9 +1,13 @@
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTheme } from "../hooks/useTheme";
 import { DEFAULT_MODEL } from "../model-logic";
 import { readNativeApi } from "../session-logic";
 import { useStore } from "../store";
 import type { Project } from "../types";
 
+const THEME_CYCLE = { system: "light", light: "dark", dark: "system" } as const;
+
 
 function formatRelativeTime(iso: string): string {
   const diff = Date.now() - new Date(iso).getTime();
@@ -26,6 +30,7 @@ function threadStatusLabel(
 export default function Sidebar() {
   const { state, dispatch } = useStore();
   const api = useMemo(() => readNativeApi(), []);
+  const { theme, setTheme } = useTheme();
   const [addingProject, setAddingProject] = useState(false);
   const [newCwd, setNewCwd] = useState("");
   const [isPickingFolder, setIsPickingFolder] = useState(false);
@@ -120,22 +125,39 @@ export default function Sidebar() {
   }, [handleNewThread, state.activeThreadId, state.projects, state.threads]);
 
   return (
-    <aside className="sidebar flex h-full w-[260px] shrink-0 flex-col border-r border-white/8 bg-[#141414]">
+    <aside className="sidebar flex h-full w-[260px] shrink-0 flex-col border-r border-border bg-card">
       {/* Drag region / traffic light space */}
       <div className="drag-region h-[52px] shrink-0" />
       {/* Branding */}
       <div className="flex items-center gap-2 px-4 pb-4">
-        <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-white text-xs font-bold text-[#0c0c0c]">
+        <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-xs font-bold text-primary-foreground">
           CT
         </div>
-        <span className="text-sm font-semibold tracking-tight text-[#e0e0e0]">CodeThing</span>
+        <span className="flex-1 text-sm font-semibold tracking-tight text-foreground">
+          CodeThing
+        </span>
+        <button
+          type="button"
+          className="rounded-md p-1.5 text-muted-foreground/80 transition-colors duration-150 hover:bg-accent hover:text-muted-foreground"
+          onClick={() => setTheme(THEME_CYCLE[theme])}
+          aria-label={`Theme: ${theme}`}
+          title={`Theme: ${theme}`}
+        >
+          {theme === "system" ? (
+            <MonitorIcon className="size-3.5" />
+          ) : theme === "light" ? (
+            <SunIcon className="size-3.5" />
+          ) : (
+            <MoonIcon className="size-3.5" />
+          )}
+        </button>
       </div>
 
       {/* New thread (global) */}
       <div className="px-3 pb-3">
         <button
           type="button"
-          className="flex w-full items-center gap-2 rounded-lg border border-white/8 bg-white/4 px-3 py-2 text-xs text-[#a0a0a0]/80 transition-colors duration-150 hover:bg-white/[0.07]"
+          className="flex w-full items-center gap-2 rounded-lg border border-border bg-secondary px-3 py-2 text-xs text-muted-foreground transition-colors duration-150 hover:bg-accent"
           onClick={() => {
             if (state.projects.length === 0) {
               setAddingProject(true);
@@ -145,7 +167,7 @@ export default function Sidebar() {
             if (firstProject) handleNewThread(firstProject.id);
           }}
         >
-          <span className="text-white">+</span>
+          <span className="text-foreground">+</span>
           New thread
         </button>
       </div>
@@ -167,21 +189,21 @@ export default function Sidebar() {
               {/* Project header */}
               <button
                 type="button"
-                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-150 hover:bg-white/5"
+                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-150 hover:bg-accent"
                 onClick={() => dispatch({ type: "TOGGLE_PROJECT", projectId: project.id })}
               >
-                <span className="text-[10px] text-[#a0a0a0]/50">
+                <span className="text-[10px] text-muted-foreground/70">
                   {project.expanded ? "▼" : "▶"}
                 </span>
-                <span className="flex-1 truncate text-xs font-medium text-[#e0e0e0]/90">
+                <span className="flex-1 truncate text-xs font-medium text-foreground/90">
                   {project.name}
                 </span>
-                <span className="text-[10px] text-[#a0a0a0]/40">{threads.length}</span>
+                <span className="text-[10px] text-muted-foreground/60">{threads.length}</span>
               </button>
 
               {/* Threads */}
               {project.expanded && (
-                <div className="ml-2 border-l border-white/6 pl-2">
+                <div className="ml-2 border-l border-border/80 pl-2">
                   {threads.map((thread) => {
                     const isActive = state.activeThreadId === thread.id;
                     const threadStatus = threadStatusLabel(
@@ -192,7 +214,7 @@ export default function Sidebar() {
                         key={thread.id}
                         type="button"
                         className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-150 ${
-                          isActive ? "bg-white/10 text-white" : "text-[#a0a0a0]/70 hover:bg-white/4"
+                          isActive ? "bg-accent text-foreground" : "text-muted-foreground hover:bg-secondary"
                         }`}
                         onClick={() =>
                           dispatch({
@@ -203,8 +225,8 @@ export default function Sidebar() {
                       >
                         <div className="flex min-w-0 flex-1 items-center gap-1.5">
                           {threadStatus && (
-                            <span className="inline-flex items-center gap-1 text-[10px] text-[#7ed8ff]/80">
-                              <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-sky-300/80" />
+                            <span className="inline-flex items-center gap-1 text-[10px] text-sky-600 dark:text-sky-300/80">
+                              <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-sky-500 dark:bg-sky-300/80" />
                               <span className="hidden xl:inline">
                                 {threadStatus}
                               </span>
@@ -214,7 +236,7 @@ export default function Sidebar() {
                             {thread.title}
                           </span>
                         </div>
-                        <span className="shrink-0 text-[10px] text-[#a0a0a0]/30">
+                        <span className="shrink-0 text-[10px] text-muted-foreground/40">
                           {formatRelativeTime(thread.createdAt)}
                         </span>
                       </button>
@@ -224,7 +246,7 @@ export default function Sidebar() {
                   {/* New thread within project */}
                   <button
                     type="button"
-                    className="flex w-full items-center gap-1 px-2 py-1 text-[10px] text-[#a0a0a0]/40 transition-colors duration-150 hover:text-[#a0a0a0]/60"
+                    className="flex w-full items-center gap-1 px-2 py-1 text-[10px] text-muted-foreground/60 transition-colors duration-150 hover:text-muted-foreground/80"
                     onClick={() => handleNewThread(project.id)}
                   >
                     <span>+</span> New thread
@@ -236,7 +258,7 @@ export default function Sidebar() {
         })}
 
         {state.projects.length === 0 && !addingProject && (
-          <div className="px-2 pt-4 text-center text-xs text-[#a0a0a0]/40">
+          <div className="px-2 pt-4 text-center text-xs text-muted-foreground/60">
             No projects yet.
             <br />
             Add one to get started.
@@ -246,12 +268,12 @@ export default function Sidebar() {
 
       {/* Add project form */}
       {addingProject ? (
-        <div className="border-t border-white/8 p-3">
-          <p className="mb-2 text-[10px] font-medium uppercase tracking-wider text-[#a0a0a0]/50">
+        <div className="border-t border-border p-3">
+          <p className="mb-2 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70">
             Add project
           </p>
           <input
-            className="mb-2 w-full rounded-md border border-white/10 bg-white/4 px-2 py-1.5 font-mono text-xs text-[#e0e0e0] placeholder:text-[#a0a0a0]/30 focus:border-white/30 focus:outline-none"
+            className="mb-2 w-full rounded-md border border-border bg-secondary px-2 py-1.5 font-mono text-xs text-foreground placeholder:text-muted-foreground/40 focus:border-ring focus:outline-none"
             placeholder="/path/to/project"
             value={newCwd}
             onChange={(e) => setNewCwd(e.target.value)}
@@ -263,7 +285,7 @@ export default function Sidebar() {
           {api && (
             <button
               type="button"
-              className="mb-2 flex w-full items-center justify-center rounded-md border border-white/10 px-2 py-1.5 text-xs text-[#a0a0a0]/70 transition-colors duration-150 hover:bg-white/4 disabled:cursor-not-allowed disabled:opacity-60"
+              className="mb-2 flex w-full items-center justify-center rounded-md border border-border px-2 py-1.5 text-xs text-muted-foreground transition-colors duration-150 hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
               onClick={() => void handlePickFolder()}
               disabled={isPickingFolder}
             >
@@ -273,14 +295,14 @@ export default function Sidebar() {
           <div className="flex gap-2">
             <button
               type="button"
-              className="flex-1 rounded-md bg-white px-2 py-1 text-xs font-medium text-[#0c0c0c] transition-colors duration-150 hover:bg-white/90"
+              className="flex-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors duration-150 hover:bg-primary/90"
               onClick={handleAddProject}
             >
               Add
             </button>
             <button
               type="button"
-              className="flex-1 rounded-md border border-white/10 px-2 py-1 text-xs text-[#a0a0a0]/60 transition-colors duration-150 hover:bg-white/4"
+              className="flex-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground/80 transition-colors duration-150 hover:bg-secondary"
               onClick={() => setAddingProject(false)}
             >
               Cancel
@@ -288,10 +310,10 @@ export default function Sidebar() {
           </div>
         </div>
       ) : (
-        <div className="border-t border-white/8 p-3">
+        <div className="border-t border-border p-3">
           <button
             type="button"
-            className="flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-white/12 py-2 text-xs text-[#a0a0a0]/50 transition-colors duration-150 hover:border-white/20 hover:text-[#a0a0a0]/70"
+            className="flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-border py-2 text-xs text-muted-foreground/70 transition-colors duration-150 hover:border-ring hover:text-muted-foreground"
             onClick={() => setAddingProject(true)}
           >
             + Add project
diff --git a/apps/renderer/src/hooks/useTheme.ts b/apps/renderer/src/hooks/useTheme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd3e3c24fde8c9153abafe77122abf03bff4591a
--- /dev/null
+++ b/apps/renderer/src/hooks/useTheme.ts
@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useSyncExternalStore } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+const STORAGE_KEY = "codething:theme";
+const MEDIA_QUERY = "(prefers-color-scheme: dark)";
+
+let listeners: Array<() => void> = [];
+function emitChange() {
+  for (const listener of listeners) listener();
+}
+
+function getSystemDark(): boolean {
+  return window.matchMedia(MEDIA_QUERY).matches;
+}
+
+function getStored(): Theme {
+  const raw = localStorage.getItem(STORAGE_KEY);
+  if (raw === "light" || raw === "dark" || raw === "system") return raw;
+  return "system";
+}
+
+function applyTheme(theme: Theme, suppressTransitions = false) {
+  if (suppressTransitions) {
+    document.documentElement.classList.add("no-transitions");
+  }
+  const isDark = theme === "dark" || (theme === "system" && getSystemDark());
+  document.documentElement.classList.toggle("dark", isDark);
+  if (suppressTransitions) {
+    // Force a reflow so the no-transitions class takes effect before removal
+    document.documentElement.offsetHeight;
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove("no-transitions");
+    });
+  }
+}
+
+// Apply immediately on module load to prevent flash
+applyTheme(getStored());
+
+function getSnapshot(): Theme {
+  return getStored();
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.push(listener);
+
+  // Listen for system preference changes
+  const mq = window.matchMedia(MEDIA_QUERY);
+  const handleChange = () => {
+    if (getStored() === "system") applyTheme("system", true);
+    emitChange();
+  };
+  mq.addEventListener("change", handleChange);
+
+  // Listen for storage changes from other tabs
+  const handleStorage = (e: StorageEvent) => {
+    if (e.key === STORAGE_KEY) {
+      applyTheme(getStored(), true);
+      emitChange();
+    }
+  };
+  window.addEventListener("storage", handleStorage);
+
+  return () => {
+    listeners = listeners.filter((l) => l !== listener);
+    mq.removeEventListener("change", handleChange);
+    window.removeEventListener("storage", handleStorage);
+  };
+}
+
+export function useTheme() {
+  const theme = useSyncExternalStore(subscribe, getSnapshot);
+
+  const resolvedTheme: "light" | "dark" =
+    theme === "system" ? (getSystemDark() ? "dark" : "light") : theme;
+
+  const setTheme = useCallback((next: Theme) => {
+    localStorage.setItem(STORAGE_KEY, next);
+    applyTheme(next, true);
+    emitChange();
+  }, []);
+
+  // Keep DOM in sync on mount/change
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  return { theme, setTheme, resolvedTheme } as const;
+}
diff --git a/apps/renderer/src/index.css b/apps/renderer/src/index.css
index f393ff72a616a318f61a626b0136aad114ffcdf3..4c62dcaf61eaffc671b4481a808a0cb56dd924e4 100644
--- a/apps/renderer/src/index.css
+++ b/apps/renderer/src/index.css
@@ -1,7 +1,178 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:is(.dark, .dark *));
+
+@theme inline {
+  --animate-skeleton: skeleton 2s -1s infinite linear;
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning: var(--warning);
+  --color-success-foreground: var(--success-foreground);
+  --color-success: var(--success);
+  --color-info-foreground: var(--info-foreground);
+  --color-info: var(--info);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  @keyframes skeleton {
+    to {
+      background-position: -200% 0;
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Suppress all transitions during theme changes */
+.no-transitions,
+.no-transitions *,
+.no-transitions *::before,
+.no-transitions *::after {
+  transition-duration: 0s !important;
+  animation-duration: 0s !important;
+}
+
 :root {
-  color-scheme: dark;
+  color-scheme: light;
+  --radius: 0.625rem;
+  --background: var(--color-white);
+  --foreground: var(--color-neutral-800);
+  --card: var(--color-white);
+  --card-foreground: var(--color-neutral-800);
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-neutral-800);
+  --primary: var(--color-neutral-800);
+  --primary-foreground: var(--color-neutral-50);
+  --secondary: --alpha(var(--color-black) / 4%);
+  --secondary-foreground: var(--color-neutral-800);
+  --muted: --alpha(var(--color-black) / 4%);
+  --muted-foreground: color-mix(
+    in srgb,
+    var(--color-neutral-500) 90%,
+    var(--color-black)
+  );
+  --accent: --alpha(var(--color-black) / 4%);
+  --accent-foreground: var(--color-neutral-800);
+  --destructive: var(--color-red-500);
+  --border: --alpha(var(--color-black) / 8%);
+  --input: --alpha(var(--color-black) / 10%);
+  --ring: var(--color-neutral-400);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --destructive-foreground: var(--color-red-700);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-700);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-700);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-700);
+
+  @variant dark {
+    color-scheme: dark;
+    --background: color-mix(
+      in srgb,
+      var(--color-neutral-950) 95%,
+      var(--color-white)
+    );
+    --foreground: var(--color-neutral-100);
+    --card: color-mix(in srgb, var(--background) 98%, var(--color-white));
+    --card-foreground: var(--color-neutral-100);
+    --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));
+    --popover-foreground: var(--color-neutral-100);
+    --primary: var(--color-neutral-100);
+    --primary-foreground: var(--color-neutral-800);
+    --secondary: --alpha(var(--color-white) / 4%);
+    --secondary-foreground: var(--color-neutral-100);
+    --muted: --alpha(var(--color-white) / 4%);
+    --muted-foreground: color-mix(
+      in srgb,
+      var(--color-neutral-500) 90%,
+      var(--color-white)
+    );
+    --accent: --alpha(var(--color-white) / 4%);
+    --accent-foreground: var(--color-neutral-100);
+    --destructive: color-mix(
+      in srgb,
+      var(--color-red-500) 90%,
+      var(--color-white)
+    );
+    --border: --alpha(var(--color-white) / 6%);
+    --input: --alpha(var(--color-white) / 8%);
+    --ring: var(--color-neutral-500);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.21 0.006 285.885);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.552 0.016 285.938);
+    --destructive-foreground: var(--color-red-400);
+    --info: var(--color-blue-500);
+    --info-foreground: var(--color-blue-400);
+    --success: var(--color-emerald-500);
+    --success-foreground: var(--color-emerald-400);
+    --warning: var(--color-amber-500);
+    --warning-foreground: var(--color-amber-400);
+  }
 }
 
 body {
@@ -10,8 +181,6 @@ body {
   margin: 0;
   padding: 0;
   min-height: 100vh;
-  color: #e0e0e0;
-  background: #0c0c0c;
 }
 
 body::after {
@@ -55,15 +224,23 @@ input {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.15);
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.25);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.18);
 }
 
-/* Reasoning select — clickable label surface */
+/* Reasoning select -- clickable label surface */
 label:has(> select#reasoning-effort) {
   position: relative;
 }
@@ -108,34 +285,38 @@ label:has(> select#reasoning-effort) select {
 }
 
 .chat-markdown a {
-  color: #93c5fd;
+  color: var(--info-foreground);
   text-decoration: underline;
-  text-decoration-color: rgba(147, 197, 253, 0.4);
+  text-decoration-color: color-mix(
+    in srgb,
+    var(--info-foreground) 40%,
+    transparent
+  );
 }
 
 .chat-markdown a:hover {
-  color: #bfdbfe;
+  opacity: 0.8;
 }
 
 .chat-markdown blockquote {
-  border-left: 2px solid rgba(255, 255, 255, 0.2);
+  border-left: 2px solid var(--border);
   padding-left: 0.8rem;
-  color: rgba(224, 224, 224, 0.75);
+  color: var(--muted-foreground);
 }
 
 .chat-markdown :not(pre) > code {
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--border);
   border-radius: 0.375rem;
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--muted);
   padding: 0.1rem 0.35rem;
-  color: #f4f4f5;
+  color: var(--foreground);
 }
 
 .chat-markdown pre {
   overflow-x: auto;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--border);
   border-radius: 0.75rem;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--muted);
   padding: 0.8rem 0.9rem;
 }
 
@@ -153,7 +334,7 @@ label:has(> select#reasoning-effort) select {
 
 .chat-markdown th,
 .chat-markdown td {
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--border);
   padding: 0.35rem 0.45rem;
   text-align: left;
 }
diff --git a/bun.lock b/bun.lock
index 68e4a9c638c892c678b34a32edb1b5f9bb9e6d1f..1d473eb991d4db281c06fdf29df37a9f39dea2ac 100644
--- a/bun.lock
+++ b/bun.lock
@@ -35,6 +35,7 @@
       "dependencies": {
         "@acme/contracts": "workspace:*",
         "highlight.js": "^11.11.1",
+        "lucide-react": "^0.563.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-markdown": "^10.1.0",
@@ -754,6 +755,8 @@
 
     "lru-cache": ["lru-cache@7.18.3", "", {}, "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA=="],
 
+    "lucide-react": ["lucide-react@0.563.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "make-fetch-happen": ["make-fetch-happen@10.2.1", "", { "dependencies": { "agentkeepalive": "^4.2.1", "cacache": "^16.1.0", "http-cache-semantics": "^4.1.0", "http-proxy-agent": "^5.0.0", "https-proxy-agent": "^5.0.0", "is-lambda": "^1.0.1", "lru-cache": "^7.7.1", "minipass": "^3.1.6", "minipass-collect": "^1.0.2", "minipass-fetch": "^2.0.3", "minipass-flush": "^1.0.5", "minipass-pipeline": "^1.2.4", "negotiator": "^0.6.3", "promise-retry": "^2.0.1", "socks-proxy-agent": "^7.0.0", "ssri": "^9.0.0" } }, "sha512-NgOPbRiaQM10DYXvN3/hhGVI2M5MtITFryzBGxHM5p4wnFxsVCbxkrBrDsk+EZ5OB4jEOT7AjDxtdF+KVEFT7w=="],
-- 
2.54.0