diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index 14880af..bebe26c 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -6,7 +6,7 @@ import {
   MoonStar,
   Plus,
   Send,
-  Settings2,
+  Sparkles,
   SunMedium,
   Upload,
   Workflow,
@@ -67,14 +67,6 @@ function basename(path: string) {
   return parts.at(-1) || normalized;
 }
 
-function formatStatusLabel(status?: string | null) {
-  if (!status) return "Draft";
-  return status
-    .replace(/([a-z])([A-Z])/g, "$1 $2")
-    .replace(/_/g, " ")
-    .replace(/^./, (char) => char.toUpperCase());
-}
-
 function loadTaskSelections(): Record<string, TaskSelectionMeta> {
   try {
     const raw = localStorage.getItem(TASK_SELECTIONS_KEY);
@@ -378,200 +370,182 @@ export default function App() {
 
   return (
     <div className="h-screen w-screen overflow-hidden bg-[var(--app-bg)] text-[var(--text-primary)] selection:bg-[var(--accent-soft)] selection:text-[var(--text-primary)]">
-      <div className="h-full w-full bg-[radial-gradient(circle_at_top,rgba(59,130,246,0.10),transparent_28%),linear-gradient(180deg,var(--app-bg),var(--app-bg))] p-3">
-        <div className="grid h-full grid-cols-1 gap-3 xl:grid-cols-[340px_minmax(0,1fr)]">
-          <ThreadSidebar
-            className="min-h-[14rem] xl:min-h-0"
-            tasks={tasks}
-            selectedTaskId={selectedTaskId}
-            currentWorkspace={workspacePath}
-            workspaceContext={workspaceContext}
-            taskModelLabels={taskModelLabels}
-            onSelectTask={handleSelectTask}
-            onNewThread={handleNewThread}
-            onOpenWorkspace={handleSelectWorkspace}
-          />
-
-          <main className="flex min-h-0 flex-col overflow-hidden rounded-[30px] border border-[color:var(--border)] bg-[var(--panel-overlay)] shadow-[0_28px_90px_rgba(15,23,42,0.18)] backdrop-blur-xl">
-            <header className="flex flex-wrap items-center justify-between gap-4 border-b border-[color:var(--border)] px-5 py-4 sm:px-6">
-              <div className="min-w-0">
-                <div className="text-[10px] uppercase tracking-[0.32em] text-[var(--text-muted)]">
-                  Pick a model. Open a project. Prompt. Review. Ship.
-                </div>
-                <div className="mt-2 flex flex-wrap items-center gap-2">
-                  <h1 className="truncate text-lg font-semibold tracking-tight text-[var(--text-primary)] sm:text-xl">
-                    {selectedTask ? selectedTask.title || "Task thread" : "What should Codra build?"}
-                  </h1>
-                  <span className="inline-flex items-center rounded-full border border-[color:var(--border)] bg-[var(--panel-muted)] px-2.5 py-1 text-[10px] text-[var(--text-muted)]">
-                    {selectedTask ? formatStatusLabel(selectedTask.status) : "Draft thread"}
-                  </span>
-                </div>
+      <div className="codra-shell">
+        <ThreadSidebar
+          tasks={tasks}
+          selectedTaskId={selectedTaskId}
+          currentWorkspace={workspacePath}
+          workspaceContext={workspaceContext}
+          taskModelLabels={taskModelLabels}
+          onSelectTask={handleSelectTask}
+          onNewThread={handleNewThread}
+          onOpenWorkspace={handleSelectWorkspace}
+        />
+
+        <main className="codra-main">
+          <header className="flex items-center justify-between gap-4 border-b border-[color:var(--border)] px-5 py-4 sm:px-6">
+            <div className="min-w-0">
+              <div className="text-[10px] uppercase tracking-[0.28em] text-[var(--text-muted)]">
+                {selectedTask ? "Task thread" : "New thread"}
               </div>
+              <h1 className="mt-1 truncate text-[15px] font-semibold tracking-[-0.02em] text-[var(--text-primary)] sm:text-base">
+                {selectedTask ? selectedTask.title || "Untitled thread" : "What should Codra build?"}
+              </h1>
+            </div>
 
-              <div className="flex flex-wrap items-center gap-2">
-                <button
-                  type="button"
-                  onClick={handleNewThread}
-                  className="inline-flex items-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3 py-2 text-sm text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
-                >
-                  <Plus className="h-4 w-4" />
-                  New thread
-                </button>
-                <PlaceholderButton icon={<Workflow className="h-4 w-4" />} label="Handoff" />
-                <PlaceholderButton icon={<Upload className="h-4 w-4" />} label="Push" />
-                <button
-                  type="button"
-                  onClick={handleThemeToggle}
-                  className="inline-flex items-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3 py-2 text-sm text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
-                  title="Toggle theme"
-                >
-                  {theme === "dark" ? <SunMedium className="h-4 w-4" /> : <MoonStar className="h-4 w-4" />}
-                  {theme === "dark" ? "Light" : "Dark"}
-                </button>
-                <button
-                  type="button"
-                  className="inline-flex items-center justify-center rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] p-2.5 text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
-                  title="Layout settings"
-                >
-                  <LayoutGrid className="h-4 w-4" />
-                </button>
-                <button
-                  type="button"
-                  className="inline-flex items-center justify-center rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] p-2.5 text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
-                  title="Settings"
-                >
-                  <Settings2 className="h-4 w-4" />
-                </button>
-              </div>
-            </header>
-
-            {!isTauri && (
-              <div className="flex items-start gap-2 border-b border-[color:var(--warning-border)] bg-[var(--warning-soft)] px-5 py-3 text-sm text-[var(--warning-text)] sm:px-6">
-                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
-                <span>
-                  Tauri runtime unavailable. Native folder selection and task execution only work inside the desktop app window.
-                </span>
-              </div>
-            )}
+            <div className="flex shrink-0 items-center gap-2">
+              <HeaderButton icon={<Plus className="h-4 w-4" />} label="New thread" onClick={handleNewThread} />
+              <HeaderButton icon={<Workflow className="h-4 w-4" />} label="Handoff" />
+              <HeaderIconButton icon={<LayoutGrid className="h-4 w-4" />} title="Tools and layout placeholder" />
+              <HeaderButton icon={<Upload className="h-4 w-4" />} label="Push" />
+              <HeaderIconButton
+                icon={theme === "dark" ? <SunMedium className="h-4 w-4" /> : <MoonStar className="h-4 w-4" />}
+                onClick={handleThemeToggle}
+                title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
+              />
+            </div>
+          </header>
 
-            <div className="min-h-0 flex-1 overflow-hidden">
-              {!selectedTask ? (
-                <div className="flex h-full min-h-0 overflow-y-auto px-5 py-6 sm:px-6">
-                  <div className="mx-auto flex w-full max-w-[880px] flex-col justify-center">
-                    <div className="text-center">
-                      <div className="text-[10px] uppercase tracking-[0.32em] text-[var(--text-muted)]">
-                        Open-source agentic coding app for TeraAI
-                      </div>
-                      <h2 className="mt-3 text-3xl font-semibold tracking-tight text-[var(--text-primary)] sm:text-4xl">
-                        What should Codra build?
-                      </h2>
-                      <p className="mx-auto mt-3 max-w-[42rem] text-sm leading-6 text-[var(--text-muted)] sm:text-[15px]">
-                        Codra will show a plan before changing files.
-                      </p>
+          {!isTauri ? (
+            <div className="mx-5 mt-3 flex items-center gap-2 rounded-2xl border border-[color:var(--warning-border)] bg-[var(--warning-soft)] px-3 py-2 text-xs text-[var(--warning-text)] sm:mx-6">
+              <AlertTriangle className="h-4 w-4 shrink-0" />
+              <span>Tauri runtime unavailable. Open Codra in the desktop app window for native workspace picking and task execution.</span>
+            </div>
+          ) : null}
+
+          <div className="min-h-0 flex-1 overflow-hidden">
+            {selectedTask ? (
+              <TaskThreadView
+                task={selectedTask}
+                events={events}
+                workspacePath={workspacePath}
+                workspaceContext={workspaceContext}
+                modelLabel={selectedTaskSelection ? getModelLabel(selectedTaskSelection.selectedProvider, selectedTaskSelection.selectedModel) : selectedModelLabel}
+                providerLabel={selectedTaskSelection?.selectedProvider ?? modelConfig.selectedProvider}
+                providerRuntimeStatus={selectedTaskSelection?.providerRuntimeStatus ?? selectedProviderRuntime}
+                onTaskUpdated={handleTaskUpdated}
+                onRefreshEvents={refreshEvents}
+              />
+            ) : (
+              <div className="flex h-full min-h-0 overflow-y-auto px-5 py-6 sm:px-6">
+                <div className="mx-auto flex w-full max-w-[860px] flex-1 flex-col items-center justify-center">
+                  <div className="w-full max-w-[720px] text-center">
+                    <div className="mx-auto inline-flex h-14 w-14 items-center justify-center rounded-[18px] border border-[color:var(--border)] bg-[var(--panel-muted)] text-[var(--accent)] shadow-[0_18px_40px_rgba(0,0,0,0.28)]">
+                      <Sparkles className="h-6 w-6" />
                     </div>
+                    <div className="mt-5 text-[11px] uppercase tracking-[0.28em] text-[var(--text-muted)]">
+                      Desktop coding agent
+                    </div>
+                    <h2 className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-[var(--text-primary)] sm:text-[2.6rem]">
+                      What should Codra build?
+                    </h2>
+                    <p className="mx-auto mt-3 max-w-[36rem] text-sm leading-6 text-[var(--text-muted)] sm:text-[15px]">
+                      Open a project, pick a model, and describe the change. Codra will plan before it edits anything.
+                    </p>
+                  </div>
 
-                    <div className="mt-8 rounded-[30px] border border-[color:var(--border)] bg-[var(--panel-card)] p-4 shadow-[0_20px_60px_rgba(15,23,42,0.12)] sm:p-5">
-                      <div className="flex flex-wrap items-center justify-between gap-3">
-                        <div className="flex flex-wrap items-center gap-2 text-xs text-[var(--text-muted)]">
-                          <ComposerBadge icon={<FolderOpen className="h-3.5 w-3.5" />}>
-                            {workspaceLabel}
-                          </ComposerBadge>
-                          <ComposerBadge>{workspaceContext?.gitBranch ? `local • ${workspaceContext.gitBranch}` : "local workspace"}</ComposerBadge>
-                          <ComposerBadge>{selectedModelLabel}</ComposerBadge>
-                          <ComposerBadge>{selectedProviderRuntime}</ComposerBadge>
-                          {isScanningWorkspace ? <ComposerBadge>Scanning workspace…</ComposerBadge> : null}
-                        </div>
+                  <section className="mt-8 w-full max-w-[720px] rounded-[28px] border border-[color:var(--border)] bg-[var(--panel-card)] p-4 shadow-[0_32px_90px_rgba(0,0,0,0.30)] sm:p-5">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <ComposerBadge icon={<FolderOpen className="h-3.5 w-3.5" />}>{workspaceLabel}</ComposerBadge>
+                      <ComposerBadge>{workspaceContext?.gitBranch ? `local • ${workspaceContext.gitBranch}` : "local workspace"}</ComposerBadge>
+                      {isScanningWorkspace ? <ComposerBadge>Scanning workspace…</ComposerBadge> : null}
+                    </div>
+
+                    <textarea
+                      value={prompt}
+                      onChange={(event) => {
+                        setPrompt(event.target.value);
+                        setError(null);
+                      }}
+                      placeholder="Describe the bug, feature, refactor, or workflow you want Codra to handle."
+                      className="mt-4 min-h-[190px] w-full resize-none rounded-[24px] border border-[color:var(--border)] bg-[var(--panel-base)] px-4 py-4 text-[15px] leading-7 text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)] focus:border-[color:var(--accent)]"
+                    />
+
+                    <div className="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-[color:var(--border)] pt-4">
+                      <div className="flex flex-wrap items-center gap-2.5">
+                        <ComposerActionButton icon={<Plus className="h-4 w-4" />} label="Context" />
+                        <ModelPicker value={modelConfig} onChange={updateModelConfig} />
+                        <ComposerBadge>{selectedModelLabel}</ComposerBadge>
+                        <ComposerBadge>{selectedProviderRuntime}</ComposerBadge>
+                      </div>
+
+                      <div className="flex flex-wrap items-center gap-2.5">
                         <button
                           type="button"
                           onClick={handleSelectWorkspace}
-                          className="inline-flex items-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3 py-2 text-sm text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
+                          className="inline-flex min-h-10 items-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3.5 text-sm text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
                         >
                           <FolderOpen className="h-4 w-4" />
                           Open project
                         </button>
-                      </div>
-
-                      <textarea
-                        value={prompt}
-                        onChange={(event) => {
-                          setPrompt(event.target.value);
-                          setError(null);
-                        }}
-                        placeholder="Describe the change, bug, refactor, or feature you want Codra to handle."
-                        className="mt-4 min-h-[220px] w-full resize-y rounded-[26px] border border-[color:var(--border)] bg-[var(--panel-base)] px-5 py-4 text-[15px] leading-7 text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)] focus:border-[color:var(--accent)]"
-                      />
-
-                      <div className="mt-4 flex flex-col gap-3 border-t border-[color:var(--border)] pt-4 xl:flex-row xl:items-end xl:justify-between">
-                        <div className="flex flex-wrap items-center gap-3">
-                          <button
-                            type="button"
-                            className="inline-flex min-h-11 items-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3.5 text-sm text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
-                          >
-                            <Plus className="h-4 w-4" />
-                            Add context
-                          </button>
-                          <ModelPicker value={modelConfig} onChange={updateModelConfig} />
-                        </div>
-
-                        <div className="flex flex-col items-start gap-3 xl:items-end">
-                          <p className="text-sm text-[var(--text-muted)]">
-                            Pick a model. Open a project. Prompt. Review. Ship.
-                          </p>
-                          <button
-                            type="button"
-                            onClick={handleCreateTask}
-                            disabled={!canCreateTask}
-                            className="inline-flex min-h-11 items-center gap-2 rounded-2xl bg-[var(--accent)] px-5 text-sm font-semibold text-white transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
-                          >
-                            <Send className="h-4 w-4" />
-                            {isCreatingTask ? "Creating task…" : "Create task"}
-                          </button>
-                        </div>
+                        <button
+                          type="button"
+                          onClick={handleCreateTask}
+                          disabled={!canCreateTask}
+                          className="inline-flex min-h-10 items-center gap-2 rounded-2xl bg-[var(--accent)] px-4 text-sm font-semibold text-white transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
+                        >
+                          <Send className="h-4 w-4" />
+                          {isCreatingTask ? "Creating…" : "Create task"}
+                        </button>
                       </div>
                     </div>
-
-                    {workspaceContext ? (
-                      <div className="mt-5 grid gap-3 md:grid-cols-3">
-                        <ContextCard label="Detected stack" value={workspaceContext.detectedStack.join(" · ") || "Unknown"} />
-                        <ContextCard label="Branch" value={workspaceContext.gitBranch || "—"} />
-                        <ContextCard label="Config files" value={workspaceContext.detectedConfigFiles.slice(0, 3).join(" · ") || "None detected"} />
-                      </div>
-                    ) : null}
-                  </div>
+                  </section>
                 </div>
-              ) : (
-                <TaskThreadView
-                  task={selectedTask}
-                  events={events}
-                  workspacePath={workspacePath}
-                  workspaceContext={workspaceContext}
-                  modelLabel={selectedTaskSelection ? getModelLabel(selectedTaskSelection.selectedProvider, selectedTaskSelection.selectedModel) : selectedModelLabel}
-                  providerLabel={selectedTaskSelection?.selectedProvider ?? modelConfig.selectedProvider}
-                  providerRuntimeStatus={selectedTaskSelection?.providerRuntimeStatus ?? selectedProviderRuntime}
-                  onTaskUpdated={handleTaskUpdated}
-                  onRefreshEvents={refreshEvents}
-                />
-              )}
-            </div>
-
-            {error && (
-              <div className="border-t border-[color:var(--danger-border)] bg-[var(--danger-soft)] px-5 py-3 text-sm text-[var(--danger-text)] sm:px-6">
-                {error}
               </div>
             )}
-          </main>
-        </div>
+          </div>
+
+          {error ? (
+            <div className="border-t border-[color:var(--danger-border)] bg-[var(--danger-soft)] px-5 py-3 text-sm text-[var(--danger-text)] sm:px-6">
+              {error}
+            </div>
+          ) : null}
+        </main>
       </div>
     </div>
   );
 }
 
-function PlaceholderButton({ icon, label }: { icon: ReactNode; label: string }) {
+function HeaderButton({ icon, label, onClick }: { icon: ReactNode; label: string; onClick?: () => void }) {
   return (
     <button
       type="button"
+      onClick={onClick}
       className="inline-flex items-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3 py-2 text-sm text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
-      title={`${label} placeholder`}
+      title={label}
+    >
+      {icon}
+      <span className="hidden sm:inline">{label}</span>
+    </button>
+  );
+}
+
+function HeaderIconButton({
+  icon,
+  onClick,
+  title,
+}: {
+  icon: ReactNode;
+  onClick?: () => void;
+  title: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={title}
+      className="inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
+    >
+      {icon}
+    </button>
+  );
+}
+
+function ComposerActionButton({ icon, label }: { icon: ReactNode; label: string }) {
+  return (
+    <button
+      type="button"
+      className="inline-flex min-h-10 items-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3.5 text-sm text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
     >
       {icon}
       {label}
@@ -587,12 +561,3 @@ function ComposerBadge({ children, icon }: { children: ReactNode; icon?: ReactNo
     </span>
   );
 }
-
-function ContextCard({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="rounded-[24px] border border-[color:var(--border)] bg-[var(--panel-card)] px-4 py-4">
-      <div className="text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">{label}</div>
-      <div className="mt-2 text-sm leading-6 text-[var(--text-primary)]">{value}</div>
-    </div>
-  );
-}
diff --git a/apps/desktop/src/components/ModelPicker.tsx b/apps/desktop/src/components/ModelPicker.tsx
index dfa8a3e..b1d743a 100644
--- a/apps/desktop/src/components/ModelPicker.tsx
+++ b/apps/desktop/src/components/ModelPicker.tsx
@@ -7,7 +7,6 @@ import {
   getModelSearchText,
   getModelStatusLabel,
   getProviderCategory,
-  getProviderRuntimeLabel,
   getProviderSearchText,
   isFavoriteModel,
   isProviderRuntimePending,
@@ -84,22 +83,17 @@ export function ModelPicker({ value, compact = false, onChange }: ModelPickerPro
     if (!normalizedSearch) {
       return models;
     }
+
     return models.filter((model) => getModelSearchText(activeProvider, model).includes(normalizedSearch));
   }, [activeProvider, normalizedSearch]);
 
   const favoriteModels = useMemo(
-    () =>
-      visibleModels.filter((model) =>
-        isFavoriteModel(activeProvider, model.id, config.favoriteModels),
-      ),
+    () => visibleModels.filter((model) => isFavoriteModel(activeProvider, model.id, config.favoriteModels)),
     [activeProvider, config.favoriteModels, visibleModels],
   );
 
-  const nonFavoriteModels = useMemo(
-    () =>
-      visibleModels.filter(
-        (model) => !isFavoriteModel(activeProvider, model.id, config.favoriteModels),
-      ),
+  const remainingModels = useMemo(
+    () => visibleModels.filter((model) => !isFavoriteModel(activeProvider, model.id, config.favoriteModels)),
     [activeProvider, config.favoriteModels, visibleModels],
   );
 
@@ -128,49 +122,32 @@ export function ModelPicker({ value, compact = false, onChange }: ModelPickerPro
         onClick={() => setOpen((current) => !current)}
         className={[
           "inline-flex items-center gap-3 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] text-left text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]",
-          compact ? "min-h-11 px-3 py-2.5" : "min-h-12 px-4 py-3",
+          compact ? "min-h-10 px-3 py-2" : "min-h-10 px-3.5 py-2",
         ].join(" ")}
       >
-        <span className="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-[var(--accent-soft)] text-[var(--accent)]">
+        <span className="inline-flex h-7 w-7 items-center justify-center rounded-xl border border-[color:var(--border)] bg-[var(--panel-base)] text-[var(--accent)]">
           <Sparkles className="h-4 w-4" />
         </span>
         <span className="min-w-0">
-          <span className="block text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">
+          <span className="block text-[10px] uppercase tracking-[0.22em] text-[var(--text-muted)]">
             {config.selectedProvider}
           </span>
-          <span className="block truncate text-sm font-medium">{triggerLabel}</span>
-        </span>
-        <span className="ml-auto inline-flex items-center gap-2">
-          {isProviderRuntimePending(config.selectedProvider) && (
-            <span className="hidden rounded-full border border-[color:var(--border)] px-2 py-0.5 text-[10px] text-[var(--text-muted)] sm:inline-flex">
-              runtime pending
-            </span>
-          )}
-          <ChevronDown className="h-4 w-4 text-[var(--text-muted)]" />
+          <span className="block max-w-[11rem] truncate text-sm font-medium">{triggerLabel}</span>
         </span>
+        {isProviderRuntimePending(config.selectedProvider) ? (
+          <span className="hidden rounded-full border border-[color:var(--border)] px-2 py-0.5 text-[10px] text-[var(--text-muted)] lg:inline-flex">
+            pending
+          </span>
+        ) : null}
+        <ChevronDown className="ml-auto h-4 w-4 text-[var(--text-muted)]" />
       </button>
 
-      {open && (
-        <div className="absolute left-0 top-[calc(100%+12px)] z-40 w-[min(46rem,calc(100vw-2rem))] overflow-hidden rounded-[24px] border border-[color:var(--border)] bg-[var(--panel-overlay)] shadow-[0_24px_80px_rgba(15,23,42,0.28)] backdrop-blur-xl">
-          <div className="border-b border-[color:var(--border)] px-4 py-3">
-            <div className="flex items-center gap-3 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3 py-2.5">
-              <Search className="h-4 w-4 text-[var(--text-muted)]" />
-              <input
-                autoFocus
-                value={search}
-                onChange={(event) => setSearch(event.target.value)}
-                placeholder="Search providers or models"
-                className="w-full bg-transparent text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]"
-              />
-            </div>
-          </div>
-
-          <div className="grid max-h-[28rem] grid-cols-1 overflow-hidden md:grid-cols-[220px_minmax(0,1fr)]">
-            <div className="border-b border-[color:var(--border)] md:border-b-0 md:border-r">
-              <div className="px-4 py-3 text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">
-                Providers
-              </div>
-              <div className="max-h-[28rem] overflow-y-auto px-2 pb-2">
+      {open ? (
+        <div className="absolute bottom-[calc(100%+12px)] left-0 z-50 w-[min(44rem,calc(100vw-1.5rem))] overflow-hidden rounded-[24px] border border-[color:var(--border)] bg-[var(--panel-overlay)] shadow-[0_36px_120px_rgba(0,0,0,0.48)] backdrop-blur-xl">
+          <div className="grid max-h-[30rem] grid-cols-[200px_minmax(0,1fr)] overflow-hidden max-sm:grid-cols-[160px_minmax(0,1fr)]">
+            <div className="border-r border-[color:var(--border)] bg-transparent px-2 py-2.5">
+              <div className="px-2 pb-2 text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">Providers</div>
+              <div className="max-h-[30rem] space-y-1 overflow-y-auto pr-1">
                 {visibleProviders.map((provider) => {
                   const definition = PROVIDER_DEFINITIONS[provider];
                   const selected = provider === activeProvider;
@@ -182,54 +159,65 @@ export function ModelPicker({ value, compact = false, onChange }: ModelPickerPro
                       onFocus={() => setHoveredProvider(provider)}
                       onClick={() => setHoveredProvider(provider)}
                       className={[
-                        "mb-1 flex w-full flex-col rounded-2xl border px-3 py-3 text-left transition",
+                        "flex w-full flex-col rounded-2xl border px-3 py-3 text-left transition",
                         selected
-                          ? "border-[color:var(--accent)] bg-[var(--accent-soft)]"
-                          : "border-transparent hover:border-[color:var(--border)] hover:bg-[var(--panel-muted)]",
+                          ? "border-[color:var(--border-strong)] bg-[var(--panel-selected)]"
+                          : "border-transparent bg-transparent hover:border-[color:var(--border)] hover:bg-[var(--panel-muted)]",
                       ].join(" ")}
                     >
-                      <span className="flex items-center justify-between gap-3">
+                      <span className="flex items-center justify-between gap-2">
                         <span className="font-medium text-[var(--text-primary)]">{definition.label}</span>
-                        <span className="rounded-full border border-[color:var(--border)] px-2 py-0.5 text-[10px] text-[var(--text-muted)]">
-                          {definition.runtimeLabel}
-                        </span>
+                        {config.selectedProvider === provider ? (
+                          <Check className="h-4 w-4 text-[var(--accent)]" />
+                        ) : null}
                       </span>
                       <span className="mt-1 text-xs text-[var(--text-muted)]">{getProviderCategory(provider)}</span>
+                      <span className="mt-2 inline-flex w-fit rounded-full border border-[color:var(--border)] px-2 py-0.5 text-[10px] text-[var(--text-muted)]">
+                        {definition.runtimeLabel}
+                      </span>
                     </button>
                   );
                 })}
               </div>
             </div>
 
-            <div className="min-h-0">
-              <div className="flex items-center justify-between gap-3 border-b border-[color:var(--border)] px-4 py-3">
-                <div>
-                  <div className="text-sm font-medium text-[var(--text-primary)]">{activeProvider}</div>
-                  <div className="text-xs text-[var(--text-muted)]">
-                    {PROVIDER_DEFINITIONS[activeProvider].description}
+            <div className="min-h-0 bg-[var(--panel-card)]/95">
+              <div className="border-b border-[color:var(--border)] px-4 py-3">
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <div className="text-sm font-medium text-[var(--text-primary)]">{activeProvider}</div>
+                    <div className="mt-1 text-xs leading-5 text-[var(--text-muted)]">
+                      {PROVIDER_DEFINITIONS[activeProvider].description}
+                    </div>
                   </div>
+                  <span className="rounded-full border border-[color:var(--border)] px-2 py-0.5 text-[10px] text-[var(--text-muted)]">
+                    {PROVIDER_DEFINITIONS[activeProvider].runtimeLabel}
+                  </span>
+                </div>
+
+                <div className="mt-3 flex items-center gap-3 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3 py-2.5">
+                  <Search className="h-4 w-4 text-[var(--text-muted)]" />
+                  <input
+                    autoFocus
+                    value={search}
+                    onChange={(event) => setSearch(event.target.value)}
+                    placeholder="Search models"
+                    className="w-full bg-transparent text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]"
+                  />
                 </div>
-                <span className="rounded-full border border-[color:var(--border)] px-2.5 py-1 text-[10px] uppercase tracking-[0.18em] text-[var(--text-muted)]">
-                  {getProviderRuntimeLabel(activeProvider)}
-                </span>
               </div>
 
-              <div className="max-h-[28rem] overflow-y-auto p-3">
-                {favoriteModels.length > 0 && (
-                  <div className="mb-4">
-                    <div className="mb-2 text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">
-                      Favorites
-                    </div>
+              <div className="max-h-[30rem] space-y-4 overflow-y-auto p-3">
+                {favoriteModels.length > 0 ? (
+                  <div>
+                    <div className="mb-2 text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">Favorites</div>
                     <div className="space-y-2">
                       {favoriteModels.map((model) => (
                         <ModelRow
                           key={model.id}
                           provider={activeProvider}
                           model={model}
-                          selected={
-                            config.selectedProvider === activeProvider &&
-                            config.selectedModel === model.id
-                          }
+                          selected={config.selectedProvider === activeProvider && config.selectedModel === model.id}
                           favorited
                           onSelect={handleSelectModel}
                           onToggleFavorite={handleToggleFavorite}
@@ -237,23 +225,20 @@ export function ModelPicker({ value, compact = false, onChange }: ModelPickerPro
                       ))}
                     </div>
                   </div>
-                )}
+                ) : null}
 
                 <div>
                   <div className="mb-2 text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">
                     {favoriteModels.length > 0 ? "All models" : "Models"}
                   </div>
                   <div className="space-y-2">
-                    {nonFavoriteModels.length > 0 ? (
-                      nonFavoriteModels.map((model) => (
+                    {remainingModels.length > 0 ? (
+                      remainingModels.map((model) => (
                         <ModelRow
                           key={model.id}
                           provider={activeProvider}
                           model={model}
-                          selected={
-                            config.selectedProvider === activeProvider &&
-                            config.selectedModel === model.id
-                          }
+                          selected={config.selectedProvider === activeProvider && config.selectedModel === model.id}
                           favorited={isFavoriteModel(activeProvider, model.id, config.favoriteModels)}
                           onSelect={handleSelectModel}
                           onToggleFavorite={handleToggleFavorite}
@@ -270,7 +255,7 @@ export function ModelPicker({ value, compact = false, onChange }: ModelPickerPro
             </div>
           </div>
         </div>
-      )}
+      ) : null}
     </div>
   );
 }
@@ -295,7 +280,7 @@ function ModelRow({
       className={[
         "group flex items-start gap-3 rounded-2xl border px-3 py-3 transition",
         selected
-          ? "border-[color:var(--accent)] bg-[var(--accent-soft)]"
+          ? "border-[color:var(--border-strong)] bg-[var(--panel-selected)]"
           : "border-[color:var(--border)] bg-[var(--panel-muted)] hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]",
       ].join(" ")}
     >
@@ -304,13 +289,11 @@ function ModelRow({
         onClick={() => onSelect(provider, model)}
         className="flex min-w-0 flex-1 items-start gap-3 text-left"
       >
-        <span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-[color:var(--border)] bg-[var(--panel-base)] text-[var(--text-primary)]">
+        <span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-[color:var(--border)] bg-[var(--panel-base)] text-sm text-[var(--text-primary)]">
           {selected ? <Check className="h-4 w-4 text-[var(--accent)]" /> : provider.slice(0, 1)}
         </span>
         <span className="min-w-0 flex-1">
-          <span className="block truncate text-sm font-medium text-[var(--text-primary)]">
-            {model.label}
-          </span>
+          <span className="block truncate text-sm font-medium text-[var(--text-primary)]">{model.label}</span>
           <span className="mt-1 block text-xs text-[var(--text-muted)]">{model.id}</span>
           <span className="mt-2 inline-flex rounded-full border border-[color:var(--border)] px-2 py-0.5 text-[10px] text-[var(--text-muted)]">
             {getModelStatusLabel(provider, model.id)}
diff --git a/apps/desktop/src/components/TaskThreadView.tsx b/apps/desktop/src/components/TaskThreadView.tsx
index 4bc570a..26c95fe 100644
--- a/apps/desktop/src/components/TaskThreadView.tsx
+++ b/apps/desktop/src/components/TaskThreadView.tsx
@@ -71,13 +71,13 @@ export function TaskThreadView({
 
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden">
-      <div className="border-b border-[color:var(--border)] px-5 py-5 sm:px-6">
+      <div className="border-b border-[color:var(--border)] px-5 py-4 sm:px-6">
         <div className="flex flex-wrap items-start justify-between gap-4">
           <div className="min-w-0">
-            <div className="text-[10px] uppercase tracking-[0.32em] text-[var(--text-muted)]">
+            <div className="text-[10px] uppercase tracking-[0.28em] text-[var(--text-muted)]">
               Task thread
             </div>
-            <h2 className="mt-2 truncate text-xl font-semibold tracking-tight text-[var(--text-primary)]">
+            <h2 className="mt-2 truncate text-[1.15rem] font-semibold tracking-[-0.03em] text-[var(--text-primary)]">
               {task.title || "Untitled thread"}
             </h2>
             <div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-[var(--text-muted)]">
@@ -115,7 +115,7 @@ export function TaskThreadView({
       )}
 
       <div className="min-h-0 flex-1 overflow-y-auto px-5 py-5 sm:px-6">
-        <div className="space-y-4">
+        <div className="mx-auto w-full max-w-[1080px] space-y-4">
           <StreamCard eyebrow="Prompt" title="What should Codra build?" icon={<Wand2 className="h-4 w-4" />}>
             <p className="whitespace-pre-wrap text-[15px] leading-7 text-[var(--text-primary)]">
               {task.userPrompt}
@@ -434,7 +434,7 @@ function StreamCard({
   return (
     <section
       className={[
-        "rounded-[24px] border p-4 sm:p-5",
+        "rounded-[22px] border p-4 sm:p-5",
         tone === "danger"
           ? "border-[color:var(--danger-border)] bg-[var(--danger-card)]"
           : "border-[color:var(--border)] bg-[var(--panel-card)]",
@@ -442,7 +442,7 @@ function StreamCard({
     >
       <div className="mb-3 flex items-center justify-between gap-3">
         <div>
-          <div className="text-[10px] uppercase tracking-[0.32em] text-[var(--text-muted)]">{eyebrow}</div>
+          <div className="text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">{eyebrow}</div>
           <div className="mt-1 flex items-center gap-2 text-base font-medium tracking-[-0.02em] text-[var(--text-primary)]">
             {icon}
             {title}
diff --git a/apps/desktop/src/components/ThreadSidebar.tsx b/apps/desktop/src/components/ThreadSidebar.tsx
index 4259cf0..b25c193 100644
--- a/apps/desktop/src/components/ThreadSidebar.tsx
+++ b/apps/desktop/src/components/ThreadSidebar.tsx
@@ -1,13 +1,12 @@
-import { useMemo, useState, type ReactNode } from "react";
+import { useMemo, useState } from "react";
 import {
+  Folder,
   FolderOpen,
-  FolderTree,
   GitBranch,
   Plus,
   Search,
   Settings,
   Sparkles,
-  TerminalSquare,
 } from "lucide-react";
 import type { Task, WorkspaceContext } from "../lib/codraTaskApi";
 
@@ -16,7 +15,6 @@ interface ThreadSidebarProps {
   selectedTaskId: string | null;
   currentWorkspace: string;
   workspaceContext: WorkspaceContext | null;
-  className?: string;
   taskModelLabels?: Record<string, string>;
   onSelectTask: (task: Task) => void;
   onNewThread: () => void;
@@ -30,7 +28,6 @@ export function ThreadSidebar({
   selectedTaskId,
   currentWorkspace,
   workspaceContext,
-  className,
   taskModelLabels = {},
   onSelectTask,
   onNewThread,
@@ -70,33 +67,18 @@ export function ThreadSidebar({
   const workspaceName = basename(currentWorkspace) || "No workspace selected";
 
   return (
-    <aside
-      className={[
-        "flex min-h-0 flex-col overflow-hidden rounded-[28px] border border-[color:var(--border)] bg-[var(--panel-overlay)] shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur-xl",
-        className ?? "",
-      ].join(" ")}
-    >
-      <div className="border-b border-[color:var(--border)] p-4">
-        <div className="flex items-start justify-between gap-3">
-          <div>
-            <div className="text-[10px] uppercase tracking-[0.32em] text-[var(--text-muted)]">
-              Codra
-            </div>
-            <h2 className="mt-2 text-lg font-semibold tracking-tight text-[var(--text-primary)]">
-              Open-source agentic coding app for TeraAI.
-            </h2>
-          </div>
-          <button
-            type="button"
-            onClick={onNewThread}
-            className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
-            title="New thread"
-          >
-            <Plus className="h-4 w-4" />
-          </button>
+    <aside className="codra-sidebar">
+      <div className="border-b border-[color:var(--border)] px-4 pb-4 pt-5">
+        <div className="codra-sidebar-full">
+          <div className="text-[10px] uppercase tracking-[0.28em] text-[var(--text-muted)]">Codra</div>
+          <h2 className="mt-3 text-[1.7rem] font-semibold tracking-[-0.04em] text-[var(--text-primary)]">Codra</h2>
+          <p className="mt-1 text-sm leading-6 text-[var(--text-muted)]">Local-first coding agent workspace</p>
+        </div>
+        <div className="codra-sidebar-compact-title hidden text-center text-xs font-semibold uppercase tracking-[0.22em] text-[var(--text-muted)]">
+          Codra
         </div>
 
-        <div className="mt-4 flex items-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] p-1">
+        <div className="mt-5 flex items-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] p-1">
           <TabButton active={activeTab === "threads"} onClick={() => setActiveTab("threads")}>
             Threads
           </TabButton>
@@ -105,38 +87,37 @@ export function ThreadSidebar({
           </TabButton>
         </div>
 
-        <button
-          type="button"
-          onClick={onNewThread}
-          className="mt-3 inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-[var(--accent)] px-4 py-3 text-sm font-semibold text-white transition hover:brightness-110"
-        >
-          <Plus className="h-4 w-4" />
-          New thread
-        </button>
-
-        <div className="mt-3 flex items-center gap-3 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3 py-2.5">
-          <Search className="h-4 w-4 text-[var(--text-muted)]" />
-          <input
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder={activeTab === "threads" ? "Search threads" : "Search workspace context"}
-            className="w-full bg-transparent text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]"
-          />
+        <div className="mt-4 flex flex-col gap-2">
+          <SidebarActionButton icon={<Plus className="h-4 w-4" />} label="New thread" onClick={onNewThread} />
+          <div className="codra-search-shell">
+            <Search className="h-4 w-4 text-[var(--text-muted)]" />
+            <input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder={activeTab === "threads" ? "Search" : "Search workspace"}
+              className="min-w-0 flex-1 bg-transparent text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]"
+            />
+          </div>
         </div>
       </div>
 
-      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+      <div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
         {activeTab === "threads" ? (
           groupedTasks.length > 0 ? (
             <div className="space-y-4">
+              <div className="flex items-center justify-between px-2 text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">
+                <span>Threads</span>
+                <span className="codra-sidebar-full">{filteredTasks.length}</span>
+              </div>
+
               {groupedTasks.map(([workspace, workspaceTasks]) => (
                 <section key={workspace} className="space-y-2">
-                  <div className="flex items-center gap-2 px-2 text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">
-                    <FolderTree className="h-3.5 w-3.5" />
-                    {workspace}
+                  <div className="codra-sidebar-full flex items-center gap-2 px-2 text-[10px] uppercase tracking-[0.22em] text-[var(--text-muted)]">
+                    <Folder className="h-3.5 w-3.5" />
+                    <span className="truncate">{workspace}</span>
                   </div>
 
-                  <div className="space-y-2">
+                  <div className="space-y-1.5">
                     {workspaceTasks.map((task) => {
                       const selected = task.id === selectedTaskId;
                       const modelLabel = taskModelLabels[task.id];
@@ -146,27 +127,27 @@ export function ThreadSidebar({
                           type="button"
                           onClick={() => onSelectTask(task)}
                           className={[
-                            "w-full rounded-[22px] border px-3 py-3 text-left transition",
+                            "w-full rounded-[18px] border px-3 py-2.5 text-left transition",
                             selected
-                              ? "border-[color:var(--accent)] bg-[var(--accent-soft)]"
-                              : "border-[color:var(--border)] bg-[var(--panel-muted)] hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]",
+                              ? "border-[color:var(--border-strong)] bg-[var(--panel-selected)] shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
+                              : "border-transparent bg-transparent hover:border-[color:var(--border)] hover:bg-[var(--panel-muted)]",
                           ].join(" ")}
                         >
                           <div className="flex items-start justify-between gap-3">
-                            <div className="min-w-0">
+                            <div className="min-w-0 flex-1">
                               <div className="truncate text-sm font-medium text-[var(--text-primary)]">
                                 {task.title || "Untitled thread"}
                               </div>
-                              <div className="mt-1 line-clamp-2 text-xs leading-5 text-[var(--text-muted)]">
+                              <div className="codra-sidebar-full mt-1 line-clamp-2 text-xs leading-5 text-[var(--text-muted)]">
                                 {task.userPrompt}
                               </div>
                             </div>
-                            <span className="rounded-full border border-[color:var(--border)] px-2 py-0.5 text-[10px] text-[var(--text-muted)]">
+                            <span className="codra-sidebar-full rounded-full border border-[color:var(--border)] px-2 py-0.5 text-[10px] text-[var(--text-muted)]">
                               {formatStatusLabel(task.status)}
                             </span>
                           </div>
 
-                          <div className="mt-3 flex flex-wrap items-center gap-2 text-[11px] text-[var(--text-muted)]">
+                          <div className="codra-sidebar-full mt-2 flex flex-wrap items-center gap-2 text-[11px] text-[var(--text-muted)]">
                             <span className="inline-flex items-center gap-1">
                               <FolderOpen className="h-3.5 w-3.5" />
                               {basename(task.workspacePath) || workspace}
@@ -186,63 +167,47 @@ export function ThreadSidebar({
               ))}
             </div>
           ) : (
-            <EmptyState
+            <SidebarEmptyState
               title="No threads yet"
-              description="Pick a model. Open a project. Prompt. Review. Ship. Your task threads will appear here."
+              description="Open a workspace and create the first Codra task thread."
             />
           )
         ) : (
           <div className="space-y-4">
-            <section className="rounded-[22px] border border-[color:var(--border)] bg-[var(--panel-muted)] p-4">
-              <div className="text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">
-                Current project
-              </div>
-              <div className="mt-2 text-base font-medium text-[var(--text-primary)]">{workspaceName}</div>
-              <div className="mt-1 break-all text-sm text-[var(--text-muted)]">
-                {currentWorkspace || "Select a workspace to start coding."}
+            <section className="rounded-[18px] border border-[color:var(--border)] bg-[var(--panel-muted)] p-3.5">
+              <div className="text-[10px] uppercase tracking-[0.22em] text-[var(--text-muted)]">Workspace</div>
+              <div className="mt-2 text-sm font-medium text-[var(--text-primary)]">{workspaceName}</div>
+              <div className="codra-sidebar-full mt-1 break-all text-xs leading-5 text-[var(--text-muted)]">
+                {currentWorkspace || "No workspace selected"}
               </div>
               <button
                 type="button"
                 onClick={onOpenWorkspace}
-                className="mt-4 inline-flex items-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-base)] px-3 py-2 text-sm text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
+                className="mt-3 inline-flex min-h-10 w-full items-center justify-center gap-2 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-base)] px-3 text-sm text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
               >
                 <FolderOpen className="h-4 w-4" />
-                Open project
+                <span className="codra-sidebar-full">Open project</span>
               </button>
             </section>
 
-            <section className="rounded-[22px] border border-[color:var(--border)] bg-[var(--panel-muted)] p-4">
-              <div className="text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">
-                Repository
-              </div>
-              <div className="mt-3 space-y-3 text-sm text-[var(--text-primary)]">
-                <MetaRow label="Git status" value={workspaceContext?.isGitRepo ? "Repository detected" : "No repo detected"} />
-                <MetaRow label="Branch" value={workspaceContext?.gitBranch || "—"} icon={<GitBranch className="h-3.5 w-3.5" />} />
-                <MetaRow label="Stack" value={workspaceContext?.detectedStack.join(" · ") || "Unknown"} />
-                <MetaRow label="Configs" value={workspaceContext?.detectedConfigFiles.slice(0, 3).join(" · ") || "None detected"} />
-              </div>
-            </section>
-
-            <section className="rounded-[22px] border border-[color:var(--border)] bg-[var(--panel-muted)] p-4">
-              <div className="text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">
-                Local flow
-              </div>
-              <div className="mt-2 text-sm leading-6 text-[var(--text-muted)]">
-                Codra will show a plan before changing files. Use this workspace tab to keep project context visible while you review threads.
-              </div>
+            <section className="space-y-2">
+              <div className="px-2 text-[10px] uppercase tracking-[0.22em] text-[var(--text-muted)]">Project</div>
+              <SidebarMetaRow label="Git" value={workspaceContext?.isGitRepo ? "Repository detected" : "No repo detected"} />
+              <SidebarMetaRow label="Branch" value={workspaceContext?.gitBranch || "—"} icon={<GitBranch className="h-3.5 w-3.5" />} />
+              <SidebarMetaRow label="Stack" value={workspaceContext?.detectedStack.join(" · ") || "Unknown"} />
+              <SidebarMetaRow label="Configs" value={workspaceContext?.detectedConfigFiles.slice(0, 3).join(" · ") || "None"} />
             </section>
           </div>
         )}
       </div>
 
-      <div className="border-t border-[color:var(--border)] p-3">
+      <div className="border-t border-[color:var(--border)] px-3 py-3">
         <button
           type="button"
-          className="flex w-full items-center gap-3 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3 py-3 text-left text-sm text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
+          className="flex min-h-11 w-full items-center gap-3 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3 text-left text-sm text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
         >
           <Settings className="h-4 w-4 text-[var(--text-muted)]" />
-          <span className="flex-1">Settings</span>
-          <TerminalSquare className="h-4 w-4 text-[var(--text-muted)]" />
+          <span className="codra-sidebar-full flex-1">Settings</span>
         </button>
       </div>
     </aside>
@@ -255,7 +220,7 @@ function TabButton({
   onClick,
 }: {
   active: boolean;
-  children: ReactNode;
+  children: string;
   onClick: () => void;
 }) {
   return (
@@ -265,37 +230,59 @@ function TabButton({
       className={[
         "flex-1 rounded-xl px-3 py-2 text-sm font-medium transition",
         active
-          ? "bg-[var(--panel-base)] text-[var(--text-primary)] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
+          ? "bg-[var(--panel-selected)] text-[var(--text-primary)]"
           : "text-[var(--text-muted)] hover:text-[var(--text-primary)]",
       ].join(" ")}
     >
-      {children}
+      <span className="codra-sidebar-full">{children}</span>
+      <span className="codra-sidebar-compact hidden">{children.slice(0, 1)}</span>
+    </button>
+  );
+}
+
+function SidebarActionButton({
+  icon,
+  label,
+  onClick,
+}: {
+  icon: JSX.Element;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex min-h-11 w-full items-center gap-3 rounded-2xl border border-[color:var(--border)] bg-[var(--panel-muted)] px-3 text-left text-sm text-[var(--text-primary)] transition hover:border-[color:var(--border-strong)] hover:bg-[var(--panel-elevated)]"
+    >
+      {icon}
+      <span className="codra-sidebar-full">{label}</span>
     </button>
   );
 }
 
-function EmptyState({ title, description }: { title: string; description: string }) {
+function SidebarEmptyState({ title, description }: { title: string; description: string }) {
   return (
-    <div className="rounded-[24px] border border-dashed border-[color:var(--border)] bg-[var(--panel-muted)] px-4 py-10 text-center">
+    <div className="rounded-[18px] border border-dashed border-[color:var(--border)] bg-[var(--panel-muted)] px-4 py-8 text-center">
       <div className="text-sm font-medium text-[var(--text-primary)]">{title}</div>
-      <div className="mt-2 text-sm leading-6 text-[var(--text-muted)]">{description}</div>
+      <div className="codra-sidebar-full mt-2 text-sm leading-6 text-[var(--text-muted)]">{description}</div>
     </div>
   );
 }
 
-function MetaRow({
+function SidebarMetaRow({
   label,
   value,
   icon,
 }: {
   label: string;
   value: string;
-  icon?: ReactNode;
+  icon?: JSX.Element;
 }) {
   return (
-    <div className="rounded-2xl border border-[color:var(--border)] bg-[var(--panel-base)] px-3 py-3">
-      <div className="text-[10px] uppercase tracking-[0.22em] text-[var(--text-muted)]">{label}</div>
-      <div className="mt-2 flex items-center gap-2 text-sm text-[var(--text-primary)]">
+    <div className="rounded-[18px] border border-[color:var(--border)] bg-[var(--panel-muted)] px-3 py-3">
+      <div className="text-[10px] uppercase tracking-[0.2em] text-[var(--text-muted)]">{label}</div>
+      <div className="mt-1.5 flex items-center gap-2 text-sm text-[var(--text-primary)]">
         {icon}
         <span className="truncate">{value}</span>
       </div>
diff --git a/apps/desktop/src/index.css b/apps/desktop/src/index.css
index 6e91985..8600ff4 100644
--- a/apps/desktop/src/index.css
+++ b/apps/desktop/src/index.css
@@ -5,43 +5,47 @@
 @layer base {
   :root {
     color-scheme: dark;
-    --app-bg: #070b14;
-    --panel-base: rgba(6, 10, 18, 0.92);
-    --panel-muted: rgba(13, 18, 30, 0.9);
-    --panel-card: rgba(11, 16, 28, 0.94);
-    --panel-overlay: rgba(9, 14, 24, 0.88);
-    --panel-elevated: rgba(18, 25, 40, 0.96);
-    --border: rgba(148, 163, 184, 0.18);
-    --border-strong: rgba(148, 163, 184, 0.34);
-    --text-primary: #f5f7fb;
-    --text-muted: #97a3b6;
-    --accent: #4f8cff;
-    --accent-soft: rgba(79, 140, 255, 0.14);
-    --warning-soft: rgba(245, 158, 11, 0.12);
-    --warning-border: rgba(245, 158, 11, 0.24);
-    --warning-text: #f4c16d;
+    --app-bg: #08090d;
+    --sidebar-bg: #0d1016;
+    --panel-base: rgba(10, 12, 18, 0.96);
+    --panel-muted: rgba(16, 19, 27, 0.94);
+    --panel-card: rgba(13, 16, 24, 0.96);
+    --panel-overlay: rgba(10, 12, 18, 0.94);
+    --panel-elevated: rgba(22, 26, 36, 0.98);
+    --panel-selected: rgba(31, 36, 48, 0.98);
+    --border: rgba(144, 156, 181, 0.16);
+    --border-strong: rgba(144, 156, 181, 0.3);
+    --text-primary: #f3f5f9;
+    --text-muted: #96a0b5;
+    --accent: #6a8dff;
+    --accent-soft: rgba(106, 141, 255, 0.14);
+    --warning-soft: rgba(245, 158, 11, 0.1);
+    --warning-border: rgba(245, 158, 11, 0.2);
+    --warning-text: #f3c86d;
     --danger-soft: rgba(244, 63, 94, 0.12);
-    --danger-card: rgba(45, 12, 22, 0.28);
-    --danger-border: rgba(244, 63, 94, 0.26);
-    --danger-text: #f3a7b4;
+    --danger-card: rgba(49, 16, 28, 0.3);
+    --danger-border: rgba(244, 63, 94, 0.24);
+    --danger-text: #f2a4b3;
   }
 
   html[data-theme="light"] {
     color-scheme: light;
-    --app-bg: #eef3fb;
+    --app-bg: #eef2f8;
+    --sidebar-bg: #f4f7fb;
     --panel-base: rgba(255, 255, 255, 0.98);
     --panel-muted: rgba(247, 250, 255, 0.98);
     --panel-card: rgba(255, 255, 255, 0.98);
-    --panel-overlay: rgba(255, 255, 255, 0.86);
+    --panel-overlay: rgba(255, 255, 255, 0.94);
     --panel-elevated: rgba(241, 246, 255, 1);
+    --panel-selected: rgba(229, 236, 247, 0.95);
     --border: rgba(100, 116, 139, 0.16);
-    --border-strong: rgba(71, 85, 105, 0.32);
-    --text-primary: #0f172a;
-    --text-muted: #5f6c80;
+    --border-strong: rgba(71, 85, 105, 0.28);
+    --text-primary: #111827;
+    --text-muted: #667085;
     --accent: #2563eb;
     --accent-soft: rgba(37, 99, 235, 0.12);
     --warning-soft: rgba(245, 158, 11, 0.12);
-    --warning-border: rgba(245, 158, 11, 0.24);
+    --warning-border: rgba(245, 158, 11, 0.22);
     --warning-text: #9a6700;
     --danger-soft: rgba(244, 63, 94, 0.1);
     --danger-card: rgba(255, 241, 244, 0.92);
@@ -59,7 +63,7 @@
     margin: 0;
     overflow: hidden;
     color: var(--text-primary);
-    background: var(--app-bg);
+    background: radial-gradient(circle at top, rgba(106, 141, 255, 0.08), transparent 24%), var(--app-bg);
     font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     text-rendering: geometricPrecision;
     -webkit-font-smoothing: antialiased;
@@ -73,6 +77,10 @@
   summary {
     font: inherit;
   }
+
+  textarea {
+    field-sizing: content;
+  }
 }
 
 ::selection {
@@ -90,12 +98,12 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(148, 163, 184, 0.4);
+  background: rgba(148, 163, 184, 0.34);
   border-radius: 999px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(100, 116, 139, 0.6);
+  background: rgba(148, 163, 184, 0.5);
 }
 
 .scrollbar-hide {
@@ -106,3 +114,70 @@
 .scrollbar-hide::-webkit-scrollbar {
   display: none;
 }
+
+.codra-shell {
+  display: grid;
+  grid-template-columns: 304px minmax(0, 1fr);
+  min-height: 100vh;
+  height: 100vh;
+  gap: 0;
+}
+
+.codra-sidebar {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-right: 1px solid var(--border);
+  background: color-mix(in srgb, var(--sidebar-bg) 92%, transparent);
+}
+
+.codra-main {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0)), var(--app-bg);
+}
+
+.codra-search-shell {
+  display: flex;
+  min-height: 44px;
+  align-items: center;
+  gap: 0.75rem;
+  border-radius: 1rem;
+  border: 1px solid var(--border);
+  background: var(--panel-muted);
+  padding: 0 0.875rem;
+}
+
+@media (max-width: 720px) {
+  .codra-shell {
+    grid-template-columns: 136px minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 560px) {
+  .codra-shell {
+    grid-template-columns: 78px minmax(0, 1fr);
+  }
+
+  .codra-sidebar-full {
+    display: none !important;
+  }
+
+  .codra-sidebar-compact,
+  .codra-sidebar-compact-title {
+    display: inline !important;
+  }
+
+  .codra-search-shell {
+    justify-content: center;
+    padding: 0;
+  }
+
+  .codra-search-shell input {
+    display: none;
+  }
+}
diff --git a/apps/desktop/src/lib/theme.ts b/apps/desktop/src/lib/theme.ts
index d77c7e7..c5dd8e9 100644
--- a/apps/desktop/src/lib/theme.ts
+++ b/apps/desktop/src/lib/theme.ts
@@ -8,20 +8,25 @@ function isTheme(value: unknown): value is AppTheme {
 }
 
 export function loadTheme(): AppTheme {
+  if (typeof window === "undefined") {
+    return DEFAULT_THEME;
+  }
+
   try {
-    const stored = localStorage.getItem(STORAGE_KEY);
+    const stored = window.localStorage.getItem(STORAGE_KEY);
     if (isTheme(stored)) {
       return stored;
     }
   } catch {
     // ignore storage access failures
   }
+
   return DEFAULT_THEME;
 }
 
 export function saveTheme(theme: AppTheme): AppTheme {
   try {
-    localStorage.setItem(STORAGE_KEY, theme);
+    window.localStorage.setItem(STORAGE_KEY, theme);
   } catch {
     // ignore storage access failures
   }
@@ -32,6 +37,7 @@ export function applyTheme(theme: AppTheme) {
   if (typeof document === "undefined") {
     return;
   }
+
   document.documentElement.dataset.theme = theme;
   document.documentElement.style.colorScheme = theme;
 }