feat(web): redesign UI as an OS-style desktop shell

Replace the sidebar + hash-routed page shell with a desktop metaphor: draggable app icons, apps opening as floating wmkit windows, a centered "What should Nomos do?" task launcher, and a bottom taskbar showing all open windows plus a system tray. - New app registry ($lib/apps.ts) — adding an app is one entry, nothing else to touch. - New desktop shell components (Desktop, WindowLayer, DesktopIcon, Taskbar, TaskLauncher) under $lib/components/desktop-shell/. - Icon positions are a persisted, collision-avoiding grid ($lib/stores/icons.ts). - Window layout persists across reloads (wmkit persist), with drag-to-maximize, F6 window cycling, and now a right-click desktop menu (cascade/tile/show desktop/reset icons) plus Cmd/Ctrl+Z undo/redo for window moves, resizes, and closes. - Taskbar buttons get a hover-close and self-correct their title once a new task's real goal is known. - New task windows (desktop launcher and the Tasks app's "New task" button) open as a window, not a dialog, and hand off to the real session window once the backend assigns an id. - Fixed a real gap along the way: GET /sessions/{id} couldn't tell "session deleted" from "session has no messages yet" (both returned 200 with an empty list) — cmd/nomos/main.go now checks existence and 404s, so a stale/persisted task window shows "Task not found" instead of a misleadingly empty, live-looking chat. - Test coverage for the new pure logic (icon placement/collision avoidance, app registry id helpers) plus a vitest matchMedia polyfill needed to import anything touching the theme store. Deletes the now-superseded sidebar shell, MinimizedWindowsBar, and the standalone Chat/EntityDetail pages (folded into the window layer). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-19 21:34:15 +02:00
parent 8657ac5669
commit aed068de12
24 changed files with 1314 additions and 617 deletions
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -50,6 +50,21 @@ export async function fetchMessages(sessionId: string): Promise<Message[]> {
  return data.messages ?? []
 }

+// null distinguishes "session doesn't exist" (404 — the session was deleted,
+// or a persisted/deep-linked window id was never valid) from a transient
+// fetch failure, which should keep returning []/retrying rather than
+// permanently flip a window into a "not found" state. Only the initial
+// per-window load (chat.ts's loadSessionChat) needs this distinction — the
+// polling loops keep using fetchMessages, where swallowing a blip into []
+// and trying again next tick is the right behavior.
+export async function fetchMessagesOrNotFound(sessionId: string): Promise<Message[] | null> {
+  const res = await fetchWithAuth(`${BASE}/sessions/${sessionId}`)
+  if (res.status === 404) return null
+  if (!res.ok) return []
+  const data = await res.json()
+  return data.messages ?? []
+}
+
 export async function deleteSession(sessionId: string): Promise<boolean> {
  const res = await fetchWithAuth(`${BASE}/sessions/${sessionId}`, { method: 'DELETE' })
  return res.ok
--- a/web/src/lib/apps.test.ts
+++ b/web/src/lib/apps.test.ts
@@ -0,0 +1,61 @@
+import { describe, it, expect, vi } from 'vitest'
+
+// apps.ts wires in every page component for real use, but that drags a
+// heavy transitive graph into a unit test for no benefit here (and one of
+// those pages imports svelte-sonner, which fails to resolve under vitest's
+// bundled Vite — an unrelated, pre-existing package quirk). These tests only
+// care about the registry's own shape (ids, sizes, window-id helpers), so
+// stub the component imports out rather than pull all of that in.
+vi.mock('../pages/Overview.svelte', () => ({ default: {} }))
+vi.mock('../pages/KnowledgeBase.svelte', () => ({ default: {} }))
+vi.mock('../pages/Ops.svelte', () => ({ default: {} }))
+vi.mock('../pages/Signals.svelte', () => ({ default: {} }))
+vi.mock('../pages/Knowledge.svelte', () => ({ default: {} }))
+vi.mock('../pages/Learning.svelte', () => ({ default: {} }))
+
+import { APPS, appById, appWindowId, appIdFromWindowId } from './apps'
+
+describe('APPS registry', () => {
+  it('has unique, non-empty ids', () => {
+    const ids = APPS.map((a) => a.id)
+    expect(ids.length).toBeGreaterThan(0)
+    expect(new Set(ids).size).toBe(ids.length)
+    for (const id of ids) expect(id).not.toBe('')
+  })
+
+  it('gives every app a positive default size', () => {
+    for (const app of APPS) {
+      expect(app.width).toBeGreaterThan(0)
+      expect(app.height).toBeGreaterThan(0)
+    }
+  })
+
+  it('is indexed by id in appById', () => {
+    for (const app of APPS) {
+      expect(appById.get(app.id)).toBe(app)
+    }
+    expect(appById.size).toBe(APPS.length)
+  })
+})
+
+describe('appWindowId / appIdFromWindowId', () => {
+  it('round-trips an app id through its window id', () => {
+    for (const app of APPS) {
+      expect(appIdFromWindowId(appWindowId(app.id))).toBe(app.id)
+    }
+  })
+
+  it('returns null for ids that are not app windows', () => {
+    expect(appIdFromWindowId('session:abc-123')).toBeNull()
+    expect(appIdFromWindowId('host:strong')).toBeNull()
+    expect(appIdFromWindowId('new-task')).toBeNull()
+  })
+
+  it('namespaces window ids so they cannot collide with entity slugs', () => {
+    // Entity slugs are bare `type:identifier` strings (see windows.ts's
+    // openEntityWindow) — app window ids must never look like one.
+    for (const app of APPS) {
+      expect(appWindowId(app.id).startsWith('app:')).toBe(true)
+    }
+  })
+})
--- a/web/src/lib/apps.ts
+++ b/web/src/lib/apps.ts
@@ -0,0 +1,118 @@
+// The desktop's app registry — single source of truth for what shows up as
+// a desktop icon and what opens in its window. Adding a new app is one entry
+// here; nothing else needs to change (Desktop.svelte renders icons from
+// APPS, WindowLayer.svelte resolves `app:<id>` window ids back through
+// appById, Taskbar.svelte reads title/icon the same way). Compare to the old
+// App.svelte's hardcoded navItems array + if/else page branch, which required
+// touching three places (nav list, header title, main content branch) to add
+// one page.
+import type { Component } from 'svelte'
+import type { DashboardSummary } from '$lib/api'
+import { openSignalCount } from '$lib/stores/context'
+import Overview from '../pages/Overview.svelte'
+import KnowledgeBase from '../pages/KnowledgeBase.svelte'
+import Ops from '../pages/Ops.svelte'
+import Signals from '../pages/Signals.svelte'
+import Knowledge from '../pages/Knowledge.svelte'
+import Learning from '../pages/Learning.svelte'
+import ListTodoIcon from '@lucide/svelte/icons/list-todo'
+import DatabaseIcon from '@lucide/svelte/icons/database'
+import ShieldCheckIcon from '@lucide/svelte/icons/shield-check'
+import SirenIcon from '@lucide/svelte/icons/siren'
+import SearchIcon from '@lucide/svelte/icons/search'
+import TrendingUpIcon from '@lucide/svelte/icons/trending-up'
+
+export interface AppDef {
+  id: string
+  title: string
+  icon: Component
+  component: Component
+  width: number
+  height: number
+  minWidth?: number
+  minHeight?: number
+  // Pure function over the shared dashboard summary — used for both the
+  // desktop icon's badge and the taskbar button's badge, so a new app that
+  // wants one just supplies this instead of each surface reimplementing it.
+  badge?: (summary: DashboardSummary | null) => number
+}
+
+export const APPS: AppDef[] = [
+  {
+    id: 'tasks',
+    title: 'Tasks',
+    icon: ListTodoIcon,
+    component: Overview,
+    width: 960,
+    height: 680,
+    minWidth: 480,
+    minHeight: 420
+  },
+  {
+    id: 'kb',
+    title: 'Knowledge Base',
+    icon: DatabaseIcon,
+    component: KnowledgeBase,
+    width: 1000,
+    height: 700,
+    minWidth: 520,
+    minHeight: 420
+  },
+  {
+    id: 'ops',
+    title: 'Operations',
+    icon: ShieldCheckIcon,
+    component: Ops,
+    width: 860,
+    height: 620,
+    minWidth: 480,
+    minHeight: 360,
+    badge: (s) => s?.approvals_pending ?? 0
+  },
+  {
+    id: 'signals',
+    title: 'Signals',
+    icon: SirenIcon,
+    component: Signals,
+    width: 860,
+    height: 620,
+    minWidth: 480,
+    minHeight: 360,
+    badge: (s) => openSignalCount(s)
+  },
+  {
+    id: 'knowledge',
+    title: 'Knowledge',
+    icon: SearchIcon,
+    component: Knowledge,
+    width: 800,
+    height: 600,
+    minWidth: 440,
+    minHeight: 340
+  },
+  {
+    id: 'learning',
+    title: 'Learning',
+    icon: TrendingUpIcon,
+    component: Learning,
+    width: 800,
+    height: 600,
+    minWidth: 440,
+    minHeight: 340
+  }
+]
+
+export const appById = new Map(APPS.map((a) => [a.id, a]))
+
+// Window ids are namespaced so WindowLayer.svelte can tell at a glance which
+// content branch owns an id: `app:<id>` for registry apps, `session:<id>`
+// for task chat windows (see windows.ts), anything else is an entity slug.
+const APP_PREFIX = 'app:'
+
+export function appWindowId(id: string): string {
+  return `${APP_PREFIX}${id}`
+}
+
+export function appIdFromWindowId(windowId: string): string | null {
+  return windowId.startsWith(APP_PREFIX) ? windowId.slice(APP_PREFIX.length) : null
+}
--- a/web/src/lib/components/EntityDesktop.svelte
+++ b/web/src/lib/components/EntityDesktop.svelte
@@ -1,56 +0,0 @@
-<script lang="ts">
-  // Global floating-window layer — mounted once in App.svelte, above every
-  // page, so an entity opened from Knowledge Base, chat, or anywhere else
-  // lands in the same window stack instead of each page owning its own
-  // single-entity sidebar/sheet. See $lib/stores/windows.ts. Minimized
-  // windows reopen from MinimizedWindowsBar, mounted separately inside the
-  // page layout (not here) so it takes real space instead of floating over
-  // content — see that component for why.
-  import { dk, wmState, openEntityWindow } from '$lib/stores/windows'
-  import EntityDetailContent from './EntityDetailContent.svelte'
-  import SessionChatWindow from './SessionChatWindow.svelte'
-  import XIcon from '@lucide/svelte/icons/x'
-  import MinusIcon from '@lucide/svelte/icons/minus'
-
-  const SESSION_PREFIX = 'session:'
-</script>
-
-<div use:dk.desktop class="pointer-events-none fixed inset-0 z-40">
-  {#each $wmState.order as id (id)}
-    {@const win = $wmState.windows[id]}
-    {#if win}
-      <section use:dk.window={{ id }} class="min-w-0" aria-label={win.title}>
-        <header data-wm-drag class="flex shrink-0 cursor-move items-center justify-between gap-2 border-b bg-muted/40 px-3 py-1.5">
-          <span data-wm-title class="flex min-w-0 flex-1 items-center self-stretch truncate font-mono text-xs font-medium">{win.title}</span>
-          <div class="flex shrink-0 items-center gap-0.5">
-            <button
-              type="button"
-              data-wm-minimize
-              class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
-              aria-label="Minimize {win.title}"
-            >
-              <MinusIcon class="size-3.5" />
-            </button>
-            <button
-              type="button"
-              data-wm-close
-              class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
-              aria-label="Close {win.title}"
-            >
-              <XIcon class="size-3.5" />
-            </button>
-          </div>
-        </header>
-        <div data-wm-content class="min-h-0 flex-1 overflow-hidden">
-          {#key id}
-            {#if id.startsWith(SESSION_PREFIX)}
-              <SessionChatWindow sessionId={id.slice(SESSION_PREFIX.length)} />
-            {:else}
-              <EntityDetailContent slug={id} onSelectEntity={openEntityWindow} />
-            {/if}
-          {/key}
-        </div>
-      </section>
-    {/if}
-  {/each}
-</div>
--- a/web/src/lib/components/MinimizedWindowsBar.svelte
+++ b/web/src/lib/components/MinimizedWindowsBar.svelte
@@ -1,36 +0,0 @@
-<script lang="ts">
-  // Deliberately mounted inside the page layout (App.svelte's Sidebar.Inset
-  // column, not alongside EntityDesktop's full-viewport overlay) — as a real
-  // flex child it takes its own height and the page content above it
-  // (min-h-0 flex-1) shrinks to make room, instead of floating over
-  // whatever's scrolled to the bottom.
-  import { wm, wmState } from '$lib/stores/windows'
-  import { truncateMiddle } from '$lib/utils'
-  import Maximize2Icon from '@lucide/svelte/icons/maximize-2'
-
-  const minimizedIds = $derived($wmState.order.filter((id) => $wmState.windows[id]?.stage === 'minimized'))
-
-  function restoreWindow(id: string) {
-    wm.restore(id)
-    wm.focus(id)
-  }
-</script>
-
-{#if minimizedIds.length}
-  <div class="flex shrink-0 items-center gap-1.5 overflow-x-auto border-t bg-muted/30 px-2 py-1.5">
-    {#each minimizedIds as id (id)}
-      {@const win = $wmState.windows[id]}
-      {#if win}
-        <button
-          type="button"
-          class="group flex max-w-56 shrink-0 items-center gap-2 rounded-md border bg-card py-1 pr-1.5 pl-2.5 font-mono text-xs hover:bg-muted"
-          onclick={() => restoreWindow(id)}
-          title={win.title}
-        >
-          <span class="min-w-0 truncate">{truncateMiddle(win.title, 32)}</span>
-          <Maximize2Icon class="size-3 shrink-0 text-muted-foreground group-hover:text-foreground" aria-hidden="true" />
-        </button>
-      {/if}
-    {/each}
-  </div>
-{/if}
--- a/web/src/lib/components/SessionChatWindow.svelte
+++ b/web/src/lib/components/SessionChatWindow.svelte
@@ -20,6 +20,7 @@
  const chatStreaming = chat.streaming
  const chatConnectionState = chat.connectionState
  const chatError = chat.error
+  const chatNotFound = chat.notFound
  let loading = $state(true)

  onMount(async () => {
@@ -57,6 +58,11 @@
 <div class="flex h-full min-h-0">
  {#if loading}
    <div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">Loading…</div>
+  {:else if $chatNotFound}
+    <div class="flex flex-1 flex-col items-center justify-center gap-1 p-6 text-center">
+      <p class="text-sm text-muted-foreground">Task not found.</p>
+      <p class="text-xs text-muted-foreground/70">It may have been deleted.</p>
+    </div>
  {:else}
    <ChatThread
      messages={$chatMessages}
--- a/web/src/lib/components/SessionGraph.svelte
+++ b/web/src/lib/components/SessionGraph.svelte
@@ -215,7 +215,7 @@
  })

  // The highlight ring/dim styling below is tied to the node whose window
-  // was last opened — once that window is closed (from EntityDesktop, not
+  // was last opened — once that window is closed (from WindowLayer, not
  // necessarily from here), the ring should go with it rather than pointing
  // at a window that no longer exists.
  $effect(() => {
@@ -265,7 +265,7 @@

  // ─── drag / select ───────────────────────────────────────────────────
  // A click (pointerdown+up with no movement in between) opens the entity
-  // straight in its own floating window (EntityDesktop) instead of a
+  // straight in its own floating window (WindowLayer) instead of a
  // click-through mini-panel — `selected` now only drives the highlight/dim
  // styling below, so you can see at a glance which node you last opened.
  let dragState: { node: Node; moved: boolean } | null = null
--- a/web/src/lib/components/desktop-shell/Desktop.svelte
+++ b/web/src/lib/components/desktop-shell/Desktop.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+  // The desktop shell: full-viewport surface (background + icons + the
+  // centered task launcher + the floating window layer) with the taskbar
+  // docked below it as a real flex sibling, not an overlay — so a maximized
+  // or dragged window can never end up underneath the taskbar. This replaces
+  // the old sidebar + hash-routed page shell in App.svelte entirely; apps are
+  // desktop icons now (see $lib/apps.ts), not nav items.
+  import { APPS } from '$lib/apps'
+  import { iconPositions, resetIconLayout } from '$lib/stores/icons'
+  import { wm, openAppWindow, toggleShowDesktop } from '$lib/stores/windows'
+  import { summary } from '$lib/stores/context'
+  import GraphBackground from '../GraphBackground.svelte'
+  import DesktopIcon from './DesktopIcon.svelte'
+  import TaskLauncher from './TaskLauncher.svelte'
+  import WindowLayer from './WindowLayer.svelte'
+  import Taskbar from './Taskbar.svelte'
+  import LayersIcon from '@lucide/svelte/icons/layers'
+  import Rows3Icon from '@lucide/svelte/icons/rows-3'
+  import MonitorIcon from '@lucide/svelte/icons/monitor'
+  import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw'
+  import Undo2Icon from '@lucide/svelte/icons/undo-2'
+  import Redo2Icon from '@lucide/svelte/icons/redo-2'
+
+  let { onOpenConnection }: { onOpenConnection: () => void } = $props()
+
+  // Clicking the bare desktop (not an icon, not a window) blurs the focused
+  // window — the familiar "click empty desktop to deselect" affordance.
+  function onSurfaceClick(e: MouseEvent) {
+    if (e.currentTarget === e.target) wm.blur()
+  }
+
+  // Right-click menu, bare desktop only (same currentTarget===target gate as
+  // onSurfaceClick above — icons and windows sit on pointer-events-auto
+  // layers above the otherwise pointer-events-none surface, so a right-click
+  // that lands on either of them never reaches here). canUndo/canRedo are
+  // plain wmkit method calls (not stores), so they're snapshotted once at
+  // open time rather than read reactively in the template.
+  let menuPos = $state<{ x: number; y: number } | null>(null)
+  let menuCanUndo = $state(false)
+  let menuCanRedo = $state(false)
+
+  function onSurfaceContextMenu(e: MouseEvent) {
+    if (e.currentTarget !== e.target) return
+    e.preventDefault()
+    menuCanUndo = wm.canUndo()
+    menuCanRedo = wm.canRedo()
+    menuPos = { x: e.clientX, y: e.clientY }
+  }
+
+  function closeMenu() {
+    menuPos = null
+  }
+
+  function runMenuAction(fn: () => void) {
+    fn()
+    closeMenu()
+  }
+
+  // Cmd/Ctrl+Z / Shift+Z for window-arrangement undo/redo (move, resize,
+  // close, ...) — wmkit tracks this history but ships no default keybinding.
+  // Skipped entirely while an editable element has focus so it never
+  // fights the browser's own text-undo inside the task input or a form
+  // field.
+  function onWindowKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape' && menuPos) {
+      closeMenu()
+      return
+    }
+    const target = e.target as HTMLElement | null
+    const editable = !!target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)
+    if (editable) return
+    if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== 'z') return
+    e.preventDefault()
+    if (e.shiftKey) wm.redo()
+    else wm.undo()
+  }
+</script>
+
+<svelte:window onkeydown={onWindowKeydown} onclick={closeMenu} />
+
+<div class="fixed inset-0 flex flex-col">
+  <div
+    class="relative min-h-0 flex-1 overflow-hidden"
+    role="presentation"
+    onclick={onSurfaceClick}
+    oncontextmenu={onSurfaceContextMenu}
+  >
+    <GraphBackground />
+
+    <div class="pointer-events-none absolute inset-0 z-0">
+      {#each APPS as app (app.id)}
+        {@const pos = $iconPositions[app.id] ?? { col: 0, row: 0 }}
+        {@const badge = app.badge?.($summary) ?? 0}
+        <DesktopIcon {app} {pos} {badge} onOpen={() => openAppWindow(app.id)} />
+      {/each}
+    </div>
+
+    <div class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center p-6">
+      <div class="pointer-events-auto">
+        <TaskLauncher />
+      </div>
+    </div>
+
+    <WindowLayer />
+  </div>
+
+  <Taskbar {onOpenConnection} />
+</div>
+
+{#if menuPos}
+  <div
+    class="fixed z-50 min-w-48 rounded-md border bg-popover p-1 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10"
+    style="left: {menuPos.x}px; top: {menuPos.y}px"
+    role="menu"
+  >
+    <button
+      type="button"
+      class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
+      onclick={() => runMenuAction(() => wm.arrange('cascade'))}
+    >
+      <LayersIcon class="size-4" /> Cascade windows
+    </button>
+    <button
+      type="button"
+      class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
+      onclick={() => runMenuAction(() => wm.arrange('tile'))}
+    >
+      <Rows3Icon class="size-4" /> Tile windows
+    </button>
+    <button
+      type="button"
+      class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
+      onclick={() => runMenuAction(toggleShowDesktop)}
+    >
+      <MonitorIcon class="size-4" /> Show desktop
+    </button>
+    <div class="my-1 h-px bg-border"></div>
+    <button
+      type="button"
+      class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
+      onclick={() => runMenuAction(resetIconLayout)}
+    >
+      <RotateCcwIcon class="size-4" /> Reset icon layout
+    </button>
+    <div class="my-1 h-px bg-border"></div>
+    <button
+      type="button"
+      disabled={!menuCanUndo}
+      class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+      onclick={() => runMenuAction(() => wm.undo())}
+    >
+      <Undo2Icon class="size-4" /> Undo
+    </button>
+    <button
+      type="button"
+      disabled={!menuCanRedo}
+      class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+      onclick={() => runMenuAction(() => wm.redo())}
+    >
+      <Redo2Icon class="size-4" /> Redo
+    </button>
+  </div>
+{/if}
--- a/web/src/lib/components/desktop-shell/DesktopIcon.svelte
+++ b/web/src/lib/components/desktop-shell/DesktopIcon.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+  // A single desktop icon: positioned from the grid store, draggable to any
+  // free cell, opens its app on a plain click. wmkit has nothing to do with
+  // icons — they're a flat non-overlapping grid, not floating/resizable
+  // windows, so this is a small self-contained pointer-drag implementation
+  // rather than pressing wmkit's window abstractions into a shape they don't
+  // fit. See $lib/stores/icons.ts for the grid model + persistence.
+  import { GRID, iconPixelPos, placeIcon, type IconPos } from '$lib/stores/icons'
+  import type { AppDef } from '$lib/apps'
+
+  let {
+    app,
+    pos,
+    badge = 0,
+    onOpen
+  }: { app: AppDef; pos: IconPos; badge?: number; onOpen: () => void } = $props()
+
+  const DRAG_THRESHOLD = 5
+
+  let dragging = $state(false)
+  let dragPos = $state<{ x: number; y: number } | null>(null)
+
+  function toCell(x: number, y: number): IconPos {
+    return {
+      col: Math.round((x - GRID.padding) / (GRID.cell + GRID.gap)),
+      row: Math.round((y - GRID.padding) / (GRID.cell + GRID.gap))
+    }
+  }
+
+  function onPointerDown(e: PointerEvent) {
+    if (e.button !== 0) return
+    const el = e.currentTarget as HTMLElement
+    const startX = e.clientX
+    const startY = e.clientY
+    const origin = iconPixelPos(pos)
+    let moved = false
+
+    el.setPointerCapture(e.pointerId)
+
+    function onMove(ev: PointerEvent) {
+      const dx = ev.clientX - startX
+      const dy = ev.clientY - startY
+      if (!moved && Math.hypot(dx, dy) > DRAG_THRESHOLD) {
+        moved = true
+        dragging = true
+      }
+      if (moved) {
+        dragPos = { x: origin.x + dx, y: origin.y + dy }
+      }
+    }
+
+    function onUp() {
+      el.removeEventListener('pointermove', onMove)
+      el.removeEventListener('pointerup', onUp)
+      if (moved && dragPos) {
+        const cell = toCell(dragPos.x, dragPos.y)
+        placeIcon(app.id, cell.col, cell.row)
+      } else {
+        onOpen()
+      }
+      dragging = false
+      dragPos = null
+    }
+
+    el.addEventListener('pointermove', onMove)
+    el.addEventListener('pointerup', onUp)
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      onOpen()
+    }
+  }
+
+  const restPos = $derived(iconPixelPos(pos))
+  const left = $derived(dragging && dragPos ? dragPos.x : restPos.x)
+  const top = $derived(dragging && dragPos ? dragPos.y : restPos.y)
+</script>
+
+<button
+  type="button"
+  class="group absolute flex flex-col items-center gap-1 rounded-lg p-1.5 pointer-events-auto select-none focus-visible:outline-2 focus-visible:outline-ring {dragging
+    ? 'z-50 cursor-grabbing bg-accent/40'
+    : 'cursor-pointer hover:bg-accent/30'}"
+  style="left: {left}px; top: {top}px; width: {GRID.cell}px;"
+  onpointerdown={onPointerDown}
+  onkeydown={onKeydown}
+  title={app.title}
+>
+  <span class="relative flex size-10 items-center justify-center rounded-xl border bg-card/80 text-foreground shadow-sm backdrop-blur">
+    <app.icon class="size-5" />
+    {#if badge > 0}
+      <span class="absolute -right-1.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-semibold text-destructive-foreground">
+        {badge > 99 ? '99+' : badge}
+      </span>
+    {/if}
+  </span>
+  <span class="max-w-full truncate text-[11px] text-foreground/90">{app.title}</span>
+</button>
--- a/web/src/lib/components/desktop-shell/TaskLauncher.svelte
+++ b/web/src/lib/components/desktop-shell/TaskLauncher.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  // "What should Nomos do?" — the desktop's centerpiece. Extracted from the
+  // old Overview page hero so both the desktop surface and the Tasks app
+  // window can mount it; startTask() (see $lib/stores/chat.ts) begins the
+  // stream immediately and hands back the session id once the backend
+  // assigns one, which is the earliest point a task window can be opened.
+  import { startTask } from '$lib/stores/chat'
+  import { openTaskWindow } from '$lib/stores/windows'
+  import { truncateMiddle } from '$lib/utils'
+  import { Textarea } from '$lib/components/ui/textarea'
+  import { Button } from '$lib/components/ui/button'
+  import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
+
+  let { compact = false, onStarted }: { compact?: boolean; onStarted?: () => void } = $props()
+
+  let input = $state('')
+
+  function submit() {
+    const text = input.trim()
+    if (!text) return
+    input = ''
+    startTask(text, (sessionId) => openTaskWindow(sessionId, truncateMiddle(text, 60)))
+    onStarted?.()
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      submit()
+    }
+  }
+</script>
+
+<div class="w-full max-w-2xl text-center">
+  {#if !compact}
+    <h1 class="mb-1 text-2xl font-semibold tracking-tight">What should Nomos do?</h1>
+    <p class="mb-4 text-sm text-muted-foreground">
+      Describe a goal — Nomos will plan it, execute it, and report the outcome.
+    </p>
+  {/if}
+  <form
+    class="relative rounded-2xl border bg-card/70 shadow-lg backdrop-blur focus-within:border-primary/60"
+    onsubmit={(e) => {
+      e.preventDefault()
+      submit()
+    }}
+  >
+    <Textarea
+      bind:value={input}
+      onkeydown={handleKeydown}
+      placeholder="e.g. Roll the staging database back to last night's snapshot and verify the app is healthy…"
+      rows={compact ? 2 : 3}
+      class="max-h-52 min-h-24 resize-none border-0 bg-transparent px-4 py-3.5 text-base shadow-none focus-visible:ring-0"
+    />
+    <div class="flex items-center justify-between px-3 pb-3">
+      <span class="text-[11px] text-muted-foreground">Enter to start · Shift+Enter for newline</span>
+      <Button type="submit" size="icon" disabled={!input.trim()} aria-label="Start task">
+        <ArrowUpIcon />
+      </Button>
+    </div>
+  </form>
+</div>
--- a/web/src/lib/components/desktop-shell/Taskbar.svelte
+++ b/web/src/lib/components/desktop-shell/Taskbar.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+  // Bottom taskbar: a real flex row in the page layout (not an overlay), so
+  // windows can never be dragged/maximized underneath it — see Desktop.svelte
+  // for how the window layer's bounds are scoped to the surface above this.
+  // Shows a button for every open window (not just minimized ones — compare
+  // to the old MinimizedWindowsBar, which only ever showed minimized windows
+  // and gave no way to see/switch between windows that were merely
+  // unfocused), plus a system tray for theme/connection/version.
+  import { wm, wmState, toggleShowDesktop } from '$lib/stores/windows'
+  import { appById, appIdFromWindowId } from '$lib/apps'
+  import { summary } from '$lib/stores/context'
+  import { truncateMiddle } from '$lib/utils'
+  import { getTheme, toggleTheme, THEME_LABELS } from '$lib/stores/theme.svelte'
+  import { VERSION } from '$lib/version'
+  import MessageSquareIcon from '@lucide/svelte/icons/message-square'
+  import DatabaseIcon from '@lucide/svelte/icons/database'
+  import PaletteIcon from '@lucide/svelte/icons/palette'
+  import SettingsIcon from '@lucide/svelte/icons/settings'
+  import LayoutGridIcon from '@lucide/svelte/icons/layout-grid'
+  import XIcon from '@lucide/svelte/icons/x'
+
+  let { onOpenConnection }: { onOpenConnection: () => void } = $props()
+
+  const SESSION_PREFIX = 'session:'
+
+  const buttons = $derived(
+    [...$wmState.order]
+      .map((id) => $wmState.windows[id])
+      .filter((w): w is NonNullable<typeof w> => !!w)
+      .sort((a, b) => a.openedSeq - b.openedSeq)
+  )
+
+  function iconFor(id: string) {
+    const appId = appIdFromWindowId(id)
+    if (appId) return appById.get(appId)?.icon
+    if (id.startsWith(SESSION_PREFIX)) return MessageSquareIcon
+    return DatabaseIcon
+  }
+
+  function badgeFor(id: string): number {
+    const appId = appIdFromWindowId(id)
+    const app = appId ? appById.get(appId) : undefined
+    return app?.badge?.($summary) ?? 0
+  }
+
+  function toggle(id: string, win: (typeof buttons)[number]) {
+    if (win.stage === 'minimized') {
+      wm.restore(id)
+      wm.focus(id)
+    } else if ($wmState.focusedId === id) {
+      wm.minimize(id)
+    } else {
+      wm.focus(id)
+    }
+  }
+
+</script>
+
+<div class="flex h-11 shrink-0 items-center gap-1.5 border-t bg-muted/30 px-2">
+  <button
+    type="button"
+    class="flex shrink-0 items-center justify-center rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+    onclick={toggleShowDesktop}
+    title="Show desktop"
+  >
+    <LayoutGridIcon class="size-4" />
+  </button>
+
+  <div class="h-6 w-px shrink-0 bg-border"></div>
+
+  <div class="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
+    {#each buttons as win (win.id)}
+      {@const Icon = iconFor(win.id)}
+      {@const badge = badgeFor(win.id)}
+      <div class="group/tb relative flex shrink-0">
+        <button
+          type="button"
+          data-taskbar-btn={win.id}
+          class="flex h-8 max-w-56 items-center gap-1.5 rounded-md border px-2 font-mono text-xs transition-colors {$wmState.focusedId ===
+            win.id && win.stage !== 'minimized'
+            ? 'border-primary/50 bg-primary/10 text-foreground'
+            : 'border-transparent bg-card/60 text-muted-foreground hover:bg-muted'} {win.stage === 'minimized' ? 'opacity-60' : ''}"
+          onclick={() => toggle(win.id, win)}
+          title={win.title}
+        >
+          {#if Icon}<Icon class="size-3.5 shrink-0" />{/if}
+          <span class="min-w-0 truncate">{truncateMiddle(win.title, 26)}</span>
+          {#if badge > 0}
+            <span class="flex h-3.5 min-w-3.5 shrink-0 items-center justify-center rounded-full bg-destructive px-1 text-[9px] font-semibold text-destructive-foreground">
+              {badge > 99 ? '99+' : badge}
+            </span>
+          {/if}
+        </button>
+        <button
+          type="button"
+          class="absolute -top-1.5 -right-1.5 hidden size-4 items-center justify-center rounded-full bg-muted-foreground/80 text-background hover:bg-destructive group-hover/tb:flex"
+          onclick={(e) => {
+            e.stopPropagation()
+            wm.close(win.id)
+          }}
+          aria-label="Close {win.title}"
+        >
+          <XIcon class="size-2.5" />
+        </button>
+      </div>
+    {/each}
+  </div>
+
+  <div class="h-6 w-px shrink-0 bg-border"></div>
+
+  <div class="flex shrink-0 items-center gap-0.5">
+    <button
+      type="button"
+      class="flex items-center justify-center gap-1.5 rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+      onclick={() => toggleTheme()}
+      title="Cycle theme"
+    >
+      <PaletteIcon class="size-4" />
+      <span class="hidden text-xs sm:inline">{THEME_LABELS[getTheme()]}</span>
+    </button>
+    <button
+      type="button"
+      class="flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+      onclick={onOpenConnection}
+      title="Server connection settings"
+    >
+      <SettingsIcon class="size-4" />
+    </button>
+    <span class="px-1.5 text-[11px] text-muted-foreground select-none">{VERSION}</span>
+  </div>
+</div>
--- a/web/src/lib/components/desktop-shell/WindowLayer.svelte
+++ b/web/src/lib/components/desktop-shell/WindowLayer.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+  // The floating-window layer — mounted once inside Desktop.svelte, above the
+  // icons layer, so every window (an app, a task, an entity detail) shares
+  // one stack instead of each page owning its own single-entity
+  // sidebar/sheet. See $lib/stores/windows.ts. Content is resolved purely
+  // from the window's id, which is why persisted/hydrated windows (see
+  // wmPersist in windows.ts) need no extra bookkeeping to know what to render:
+  //   app:<id>      -> registry component (windows.ts openAppWindow)
+  //   session:<id>  -> SessionChatWindow (windows.ts openTaskWindow)
+  //   new-task      -> TaskLauncher (windows.ts openNewTaskWindow)
+  //   anything else -> entity slug -> EntityDetailContent
+  import { wm, dk, wmState, openEntityWindow, NEW_TASK_WINDOW_ID } from '$lib/stores/windows'
+  import { appById, appIdFromWindowId } from '$lib/apps'
+  import EntityDetailContent from '../EntityDetailContent.svelte'
+  import SessionChatWindow from '../SessionChatWindow.svelte'
+  import TaskLauncher from './TaskLauncher.svelte'
+  import XIcon from '@lucide/svelte/icons/x'
+  import MinusIcon from '@lucide/svelte/icons/minus'
+  import Maximize2Icon from '@lucide/svelte/icons/maximize-2'
+
+  const SESSION_PREFIX = 'session:'
+
+  // A hydrated `app:<id>` window whose id no longer matches any registry
+  // entry (the app was renamed/removed since the layout was persisted) has
+  // nothing to render — close it rather than leaving a permanently-blank
+  // window stuck in the taskbar.
+  $effect(() => {
+    for (const id of $wmState.order) {
+      const appId = appIdFromWindowId(id)
+      if (appId && !appById.has(appId)) wm.close(id)
+    }
+  })
+</script>
+
+<div use:dk.desktop class="absolute inset-0 z-40 pointer-events-none">
+  {#each $wmState.order as id (id)}
+    {@const win = $wmState.windows[id]}
+    {@const appId = appIdFromWindowId(id)}
+    {@const app = appId ? appById.get(appId) : undefined}
+    {#if win && (!appId || app)}
+      <section use:dk.window={{ id }} class="min-w-0" aria-label={win.title}>
+        <header data-wm-drag class="flex shrink-0 cursor-move items-center justify-between gap-2 border-b bg-muted/40 px-3 py-1.5">
+          <span data-wm-title class="flex min-w-0 flex-1 items-center self-stretch truncate font-mono text-xs font-medium">{win.title}</span>
+          <div class="flex shrink-0 items-center gap-0.5">
+            <button
+              type="button"
+              data-wm-minimize
+              class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+              aria-label="Minimize {win.title}"
+            >
+              <MinusIcon class="size-3.5" />
+            </button>
+            <button
+              type="button"
+              data-wm-maximize
+              class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+              aria-label="Maximize {win.title}"
+            >
+              <Maximize2Icon class="size-3.5" />
+            </button>
+            <button
+              type="button"
+              data-wm-close
+              class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+              aria-label="Close {win.title}"
+            >
+              <XIcon class="size-3.5" />
+            </button>
+          </div>
+        </header>
+        <div data-wm-content class="min-h-0 flex-1 overflow-hidden">
+          {#key id}
+            {#if id.startsWith(SESSION_PREFIX)}
+              <SessionChatWindow sessionId={id.slice(SESSION_PREFIX.length)} />
+            {:else if id === NEW_TASK_WINDOW_ID}
+              <div class="flex h-full items-center justify-center p-6">
+                <TaskLauncher onStarted={() => wm.close(NEW_TASK_WINDOW_ID)} />
+              </div>
+            {:else if app}
+              <app.component />
+            {:else}
+              <EntityDetailContent slug={id} onSelectEntity={openEntityWindow} />
+            {/if}
+          {/key}
+        </div>
+      </section>
+    {/if}
+  {/each}
+</div>
--- a/web/src/lib/stores/chat.ts
+++ b/web/src/lib/stores/chat.ts
@@ -1,5 +1,5 @@
 import { writable, get, type Writable } from 'svelte/store'
-import { streamChat, fetchSessions, fetchMessages, deleteSession as apiDeleteSession } from '$lib/api'
+import { streamChat, fetchSessions, fetchMessages, fetchMessagesOrNotFound, deleteSession as apiDeleteSession } from '$lib/api'
 import type { ChatEvent, Session, Message } from '$lib/api'
 import type { ToolCallResult } from '$lib/types'

@@ -499,6 +499,11 @@ export interface SessionChatState {
  streaming: Writable<boolean>
  connectionState: Writable<'connected' | 'disconnected' | 'reconnecting'>
  error: Writable<string | null>
+  // Set by loadSessionChat when the backend 404s the session outright
+  // (deleted, or an id that was never valid — a stale persisted window, a
+  // bad deep link). Distinct from a merely-empty transcript, which is the
+  // normal state for a session that exists but hasn't sent a message yet.
+  notFound: Writable<boolean>
 }

 const sessionChats = new Map<string, SessionChatState>()
@@ -509,7 +514,13 @@ const sessionPollers = new Map<string, ReturnType<typeof setInterval>>()
 export function chatFor(sessionId: string): SessionChatState {
  let c = sessionChats.get(sessionId)
  if (!c) {
-    c = { messages: writable([]), streaming: writable(false), connectionState: writable('connected'), error: writable(null) }
+    c = {
+      messages: writable([]),
+      streaming: writable(false),
+      connectionState: writable('connected'),
+      error: writable(null),
+      notFound: writable(false)
+    }
    sessionChats.set(sessionId, c)
  }
  return c
@@ -544,7 +555,11 @@ export function stopSessionPolling(sessionId: string) {
 export async function loadSessionChat(sessionId: string): Promise<void> {
  const chat = chatFor(sessionId)
  chat.streaming.set(false)
-  const msgs = await fetchMessages(sessionId)
+  const msgs = await fetchMessagesOrNotFound(sessionId)
+  if (msgs === null) {
+    chat.notFound.set(true)
+    return // nothing to poll — the session doesn't exist
+  }
  chat.messages.set(toChatMessages(msgs))
  startSessionPolling(sessionId)
 }
@@ -650,3 +665,117 @@ export function cancelSessionStream(sessionId: string) {
  activeControllers.delete(sessionId)
  chatFor(sessionId).streaming.set(false)
 }
+
+// ─── new-task launcher (desktop center input / Tasks app) ───────────────────
+//
+// Starting a brand-new task has no session id to hang a window off of until
+// the stream's own 'session' event assigns one (see the 'session' branch in
+// sendMessage above) — the desktop launcher needs to open that task's window
+// the moment an id exists, not before. startTask begins the stream
+// immediately, buffers any events that arrive before 'session' (defensive:
+// in practice 'session' always arrives first), then seeds that session's own
+// chatFor() bundle exactly like sendSessionMessage does and hands the id back
+// via onSession so the caller can open its window. From that point on the
+// window behaves exactly like any other task window.
+export function startTask(text: string, onSession: (sessionId: string) => void): void {
+  const userMsg: ChatMessage = { id: mid(), role: 'user', text, tools: [], pendingApprovals: [] }
+  const assistantMsg: ChatMessage = { id: mid(), role: 'assistant', text: '', tools: [], pendingApprovals: [] }
+  const activeTools: Map<string, ToolCallResult> = new Map()
+  let receivedDone = false
+  let sessionId: string | null = null
+  let chat: SessionChatState | null = null
+  const buffered: ChatEvent[] = []
+
+  function apply(ev: ChatEvent) {
+    const c = chat
+    if (!c || !sessionId) return
+    if (ev.type === 'tool_use') {
+      const tr: ToolCallResult = { type: 'tool_use', name: ev.data.name, id: ev.data.id, args: ev.data.args }
+      activeTools.set(ev.data.id, tr)
+      c.messages.update((ms) => {
+        const last = ms[ms.length - 1]
+        if (last && last.role === 'assistant') last.tools = [...last.tools, tr]
+        return [...ms]
+      })
+    } else if (ev.type === 'tool_result') {
+      const existing = activeTools.get(ev.data.id)
+      if (existing) {
+        const updated: ToolCallResult = { ...existing, type: 'tool_result', result: ev.data.result, error: ev.data.error }
+        activeTools.set(ev.data.id, updated)
+        c.messages.update((ms) => {
+          const last = ms[ms.length - 1]
+          if (last && last.role === 'assistant') {
+            last.tools = last.tools.map((t) => (t.id === ev.data.id ? updated : t))
+            last.pendingApprovals = extractApprovals(last.tools)
+          }
+          return [...ms]
+        })
+      }
+    } else if (ev.type === 'text_delta') {
+      c.messages.update((ms) => {
+        const last = ms[ms.length - 1]
+        if (last && last.role === 'assistant') last.text += ev.data
+        return [...ms]
+      })
+    } else if (ev.type === 'text') {
+      c.messages.update((ms) => {
+        const last = ms[ms.length - 1]
+        if (last && last.role === 'assistant') last.text = ev.data
+        return [...ms]
+      })
+    } else if (ev.type === 'done') {
+      receivedDone = true
+      c.connectionState.set('connected')
+      c.messages.update((ms) => {
+        const last = ms[ms.length - 1]
+        if (last && last.role === 'assistant') last.pendingApprovals = extractApprovals(last.tools)
+        return [...ms]
+      })
+      startSessionPolling(sessionId)
+    } else if (ev.type === 'error') {
+      c.error.set(ev.data)
+    }
+  }
+
+  const controller = streamChat(
+    text,
+    null,
+    (ev: ChatEvent) => {
+      if (ev.type === 'session') {
+        sessionId = ev.data
+        activeControllers.set(sessionId, controller)
+        chat = chatFor(sessionId)
+        chat.streaming.set(true)
+        chat.messages.update((ms) => [...ms, userMsg, assistantMsg])
+        onSession(sessionId)
+        for (const b of buffered.splice(0)) apply(b)
+        return
+      }
+      if (!chat) {
+        buffered.push(ev)
+        return
+      }
+      apply(ev)
+    },
+    (err: string) => {
+      if (!chat) return // never got a session id — nothing to show the error in
+      if (err === 'AbortError' || err.includes('aborted')) {
+        chat.streaming.set(false)
+        return
+      }
+      chat.error.set(err)
+      if (!receivedDone && sessionId) {
+        chat.connectionState.set('disconnected')
+        startSessionPolling(sessionId)
+        addChatError('Agent connection lost. The task is still running — retrying…', 'Dismiss')
+      } else {
+        chat.streaming.set(false)
+      }
+    },
+    () => {
+      if (chat) chat.streaming.set(false)
+      if (sessionId && activeControllers.get(sessionId) === controller) activeControllers.delete(sessionId)
+      loadSessions()
+    }
+  )
+}
--- a/web/src/lib/stores/icons.test.ts
+++ b/web/src/lib/stores/icons.test.ts
@@ -0,0 +1,95 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+
+// icons.ts only needs APPS for its default-layout ids — stub it out rather
+// than pull in the real registry's full page-component graph (see
+// apps.test.ts for why that graph is expensive/broken under vitest).
+vi.mock('$lib/apps', () => ({
+  APPS: [{ id: 'tasks' }, { id: 'kb' }, { id: 'ops' }, { id: 'signals' }, { id: 'knowledge' }, { id: 'learning' }]
+}))
+
+import { GRID, iconPositions, placeIcon, iconPixelPos, maxCols, getIconPositions, resetIconLayout } from './icons'
+
+// placeIcon mutates the shared module-level store, so each test starts from
+// a known, empty layout rather than whatever the previous test (or apps.ts's
+// registry-derived defaults) left behind.
+beforeEach(() => {
+  iconPositions.set({})
+  localStorage.clear()
+})
+
+describe('iconPixelPos', () => {
+  it('converts a grid cell to pixel coordinates using GRID constants', () => {
+    expect(iconPixelPos({ col: 0, row: 0 })).toEqual({ x: GRID.padding, y: GRID.padding })
+    expect(iconPixelPos({ col: 1, row: 2 })).toEqual({
+      x: GRID.padding + (GRID.cell + GRID.gap),
+      y: GRID.padding + 2 * (GRID.cell + GRID.gap)
+    })
+  })
+})
+
+describe('maxCols', () => {
+  it('computes how many columns fit in a viewport width', () => {
+    const cellSpan = GRID.cell + GRID.gap
+    expect(maxCols(GRID.padding + cellSpan * 3)).toBe(3)
+  })
+
+  it('never returns less than 1, even for a tiny viewport', () => {
+    expect(maxCols(0)).toBe(1)
+    expect(maxCols(GRID.padding)).toBe(1)
+  })
+})
+
+describe('placeIcon', () => {
+  it('places an icon at the requested cell when it is free', () => {
+    placeIcon('tasks', 3, 4)
+    expect(getIconPositions().tasks).toEqual({ col: 3, row: 4 })
+  })
+
+  it('clamps negative coordinates to 0 for an otherwise-free cell', () => {
+    placeIcon('tasks', -5, -2)
+    expect(getIconPositions().tasks).toEqual({ col: 0, row: 0 })
+  })
+
+  it('nudges to the nearest free cell when the target is occupied', () => {
+    iconPositions.set({ kb: { col: 2, row: 2 } })
+    placeIcon('tasks', 2, 2)
+    const pos = getIconPositions().tasks
+    // Must not land on top of kb, and must be one of the 8 immediate
+    // neighbors (radius-1 ring) since all of them are free.
+    expect(pos).not.toEqual({ col: 2, row: 2 })
+    expect(Math.max(Math.abs(pos.col - 2), Math.abs(pos.row - 2))).toBe(1)
+  })
+
+  it('does not disturb the icon already occupying a cell when another icon is nudged past it', () => {
+    iconPositions.set({ kb: { col: 2, row: 2 } })
+    placeIcon('tasks', 2, 2)
+    expect(getIconPositions().kb).toEqual({ col: 2, row: 2 })
+  })
+
+  it('moving an icon back onto its own current cell is a no-op collision (never nudges against itself)', () => {
+    iconPositions.set({ tasks: { col: 5, row: 5 } })
+    placeIcon('tasks', 5, 5)
+    expect(getIconPositions().tasks).toEqual({ col: 5, row: 5 })
+  })
+
+  it('persists the updated layout to localStorage', () => {
+    placeIcon('tasks', 1, 1)
+    const stored = JSON.parse(localStorage.getItem('oikos-desktop-icons') ?? '{}')
+    expect(stored.tasks).toEqual({ col: 1, row: 1 })
+  })
+})
+
+describe('resetIconLayout', () => {
+  it('restores the classic left-edge column in registry order', () => {
+    iconPositions.set({ tasks: { col: 4, row: 7 }, kb: { col: 1, row: 1 } })
+    resetIconLayout()
+    expect(getIconPositions()).toEqual({
+      tasks: { col: 0, row: 0 },
+      kb: { col: 0, row: 1 },
+      ops: { col: 0, row: 2 },
+      signals: { col: 0, row: 3 },
+      knowledge: { col: 0, row: 4 },
+      learning: { col: 0, row: 5 }
+    })
+  })
+})
--- a/web/src/lib/stores/icons.ts
+++ b/web/src/lib/stores/icons.ts
@@ -0,0 +1,113 @@
+// Desktop icon positions — a simple column/row grid, persisted to
+// localStorage so icons stay where the operator put them across reloads.
+// Deliberately NOT wmkit: wmkit manages floating windows (pixel bounds,
+// z-order, stage), icons are a flat, non-overlapping grid with a much
+// simpler drag model (snap-to-cell, no resize/minimize/stack). Reinventing
+// that inside wmkit would mean fighting its window-shaped abstractions for
+// no benefit.
+import { writable, get } from 'svelte/store'
+import { APPS } from '$lib/apps'
+
+export interface IconPos {
+  col: number
+  row: number
+}
+
+export const GRID = { cell: 96, gap: 12, padding: 16 }
+
+const STORAGE_KEY = 'oikos-desktop-icons'
+
+function defaultPositions(): Record<string, IconPos> {
+  // Classic OS default: one left-edge column, registry order.
+  const out: Record<string, IconPos> = {}
+  APPS.forEach((app, i) => {
+    out[app.id] = { col: 0, row: i }
+  })
+  return out
+}
+
+function load(): Record<string, IconPos> {
+  if (typeof localStorage === 'undefined') return defaultPositions()
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return defaultPositions()
+    const parsed = JSON.parse(raw) as Record<string, IconPos>
+    const out = defaultPositions()
+    // Merge over the defaults so a newly-registered app (not in the saved
+    // blob yet) still gets a sane starting position instead of being absent
+    // from the grid entirely.
+    for (const [id, pos] of Object.entries(parsed)) {
+      if (appIds.has(id)) out[id] = pos
+    }
+    return out
+  } catch {
+    return defaultPositions()
+  }
+}
+
+const appIds = new Set(APPS.map((a) => a.id))
+
+export const iconPositions = writable<Record<string, IconPos>>(load())
+
+function persist(positions: Record<string, IconPos>): void {
+  if (typeof localStorage === 'undefined') return
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(positions))
+}
+
+iconPositions.subscribe((positions) => persist(positions))
+
+function occupied(positions: Record<string, IconPos>, col: number, row: number, exceptId: string): boolean {
+  return Object.entries(positions).some(([id, p]) => id !== exceptId && p.col === col && p.row === row)
+}
+
+// Finds the nearest free cell to (col, row) via an expanding ring search,
+// so dropping an icon onto an occupied cell nudges it to the closest open
+// spot instead of silently overlapping or refusing the drop.
+function nearestFreeCell(
+  positions: Record<string, IconPos>,
+  col: number,
+  row: number,
+  exceptId: string
+): IconPos {
+  if (!occupied(positions, col, row, exceptId)) return { col: Math.max(0, col), row: Math.max(0, row) }
+  for (let radius = 1; radius < 64; radius++) {
+    for (let dc = -radius; dc <= radius; dc++) {
+      for (let dr = -radius; dr <= radius; dr++) {
+        if (Math.max(Math.abs(dc), Math.abs(dr)) !== radius) continue
+        const c = col + dc
+        const r = row + dr
+        if (c < 0 || r < 0) continue
+        if (!occupied(positions, c, r, exceptId)) return { col: c, row: r }
+      }
+    }
+  }
+  return { col: Math.max(0, col), row: Math.max(0, row) }
+}
+
+export function placeIcon(appId: string, col: number, row: number): void {
+  iconPositions.update((positions) => {
+    const target = nearestFreeCell(positions, col, row, appId)
+    return { ...positions, [appId]: target }
+  })
+}
+
+export function iconPixelPos(pos: IconPos): { x: number; y: number } {
+  return {
+    x: GRID.padding + pos.col * (GRID.cell + GRID.gap),
+    y: GRID.padding + pos.row * (GRID.cell + GRID.gap)
+  }
+}
+
+export function maxCols(viewportWidth: number): number {
+  return Math.max(1, Math.floor((viewportWidth - GRID.padding) / (GRID.cell + GRID.gap)))
+}
+
+export function getIconPositions(): Record<string, IconPos> {
+  return get(iconPositions)
+}
+
+// Bails a messy manual layout back to the classic left-edge column,
+// registry order — the desktop's right-click menu's "Reset icon layout".
+export function resetIconLayout(): void {
+  iconPositions.set(defaultPositions())
+}
--- a/web/src/lib/stores/windows.ts
+++ b/web/src/lib/stores/windows.ts
@@ -1,14 +1,83 @@
 // One global wmkit window manager for the whole app (mounted once by
-// EntityDesktop.svelte in App.svelte) — this is what lets an entity opened
-// from Knowledge Base, chat, or anywhere else land in the same floating
-// window layer, with several windows open side by side, rather than each
-// page owning its own single-entity sidebar/sheet.
+// WindowLayer.svelte inside Desktop.svelte) — this is what lets an entity
+// opened from Knowledge Base, chat, or anywhere else land in the same
+// floating window layer, with several windows open side by side, rather than
+// each page owning its own single-entity sidebar/sheet.
 import { createManager, createDesktop, wmStore } from '@surdeddd/wmkit/svelte'
+import { persist } from '@surdeddd/wmkit/persist'
+import { appById, appWindowId } from '$lib/apps'
+import { sessions } from '$lib/stores/chat'
+import { heading } from '$lib/tasks'

 export const wm = createManager({ defaultSize: { width: 480, height: 560 } })
-export const dk = createDesktop(wm)
+export const dk = createDesktop(wm, {
+  // topEdge:'maximize' + preview gives the classic drag-to-top-maximizes
+  // affordance; magnetism/keyboard are wmkit defaults worth turning on now
+  // that windows are the whole app's primary surface, not a secondary layer.
+  snap: { topEdge: 'maximize', preview: true },
+  keyboard: true,
+  magnetism: true,
+  // Animates a minimized window toward its taskbar button instead of just
+  // vanishing — Taskbar.svelte tags each button with this same attribute.
+  minimizeTarget: (win) => document.querySelector(`[data-taskbar-btn="${CSS.escape(win.id)}"]`)
+})
 export const wmState = wmStore(wm)

+// Layout survives reloads: every window id is self-describing (app:<id>,
+// session:<id>, or a bare entity slug — see EntityDesktop/WindowLayer's
+// content branch), so a hydrated window needs no extra bookkeeping to know
+// what to render once the desktop remounts.
+export const wmPersist = persist(wm, { key: 'oikos-windows', debounce: 300, autoRestore: true })
+
+// A task window is titled from the operator's (truncated) prompt at
+// creation time — openTaskWindow below and chat.ts's startTask both only
+// know the raw text, not the goal/heading the backend eventually derives
+// for the session. Whenever the sessions list refreshes (loadSessions(),
+// called all over — on task events, after a turn completes, ...) resync
+// any open task window's title to the session's real heading, so the
+// taskbar/titlebar stop showing the placeholder forever.
+sessions.subscribe((list) => {
+  for (const s of list) {
+    const id = `session:${s.id}`
+    const win = wm.get(id)
+    if (!win) continue
+    const title = heading(s)
+    if (win.title !== title) wm.update(id, { title })
+  }
+})
+
+// Classic show-desktop toggle: minimize everything, or if everything's
+// already minimized (a prior show-desktop, or the operator minimized them
+// all by hand), bring them all back rather than being a one-way action.
+// Shared by the taskbar button and the desktop's right-click menu.
+export function toggleShowDesktop(): void {
+  const anyVisible = wm.getState().order.some((id) => wm.get(id)?.stage !== 'minimized')
+  if (anyVisible) wm.minimizeAll()
+  else wm.restoreAll()
+}
+
+// Opens (or focuses/restores) a registry app's window. Apps are
+// single-instance — double-clicking an already-open app's icon should never
+// stack a second window, same dedupe pattern as openEntityWindow below.
+export function openAppWindow(appId: string): void {
+  const app = appById.get(appId)
+  if (!app) return
+  const id = appWindowId(appId)
+  if (wm.get(id)) {
+    wm.restore(id)
+    wm.focus(id)
+    return
+  }
+  wm.open({
+    id,
+    title: app.title,
+    width: app.width,
+    height: app.height,
+    minWidth: app.minWidth,
+    minHeight: app.minHeight
+  })
+}
+
 // Opens a window for the entity, or focuses (and restores, if minimized) the
 // existing one — wm.open() throws if a window with this id already exists,
 // and slugs make natural, stable window ids (also dedupes "same entity
@@ -23,12 +92,28 @@ export function openEntityWindow(slug: string | null): void {
  wm.open({ id: slug, title: slug })
 }

+// Singleton "compose a new task" window — the Tasks app's New Task button
+// opens this rather than a dialog, since everything else in the desktop is
+// already a window; TaskLauncher closes it itself (via its onStarted
+// callback, wired up in WindowLayer.svelte) once the task's session window
+// takes over.
+export const NEW_TASK_WINDOW_ID = 'new-task'
+
+export function openNewTaskWindow(): void {
+  if (wm.get(NEW_TASK_WINDOW_ID)) {
+    wm.restore(NEW_TASK_WINDOW_ID)
+    wm.focus(NEW_TASK_WINDOW_ID)
+    return
+  }
+  wm.open({ id: NEW_TASK_WINDOW_ID, title: 'New task', width: 480, height: 340, minWidth: 360, minHeight: 280 })
+}
+
 // Same dedupe/restore/focus pattern as openEntityWindow, for a task/session's
 // chat window. Id is namespaced `session:<id>` — distinct from entity window
 // ids (always a bare `type:identifier` slug, and task ENTITIES already use
 // `task:<uuid>` as their own slug) so a task's chat window and its entity
 // detail window never collide over the same wmkit id. See
-// EntityDesktop.svelte for the id -> content-component branch.
+// WindowLayer.svelte for the id -> content-component branch.
 export function openTaskWindow(sessionId: string | null, title: string): void {
  if (!sessionId) return
  const id = `session:${sessionId}`