test: keep script's stdin open in the linger test (CI has no stdin)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.gitea/workflows/build-deb.yml

@@ -149,10 +149,32 @@ jobs:
             "$api/releases/$id/assets?name=$name" >/dev/null
           echo "release $TAG: $GITEA_URL/$REPO/releases/tag/$TAG"
 
+  deploy:
+    name: Deploy to CT 126
+    runs-on: ubuntu-latest
+    needs: [build]
+    if: startsWith(github.ref, 'refs/tags/v')
+    steps:
+      # CT 126's webhook listener runs /usr/lib/devdesk/devdesk-deploy, which
+      # waits for this version in the apt registry and upgrades the package.
+      - name: Trigger devdesk-deploy webhook
+        env:
+          WEBHOOK_SECRET: ${{ secrets.WEBHOOK_SECRET }}
+          GIT_REF: ${{ github.ref }}
+        run: |
+          PAYLOAD="{\"ref\":\"${GIT_REF}\"}"
+          SIG=$(echo -n "$PAYLOAD" | openssl dgst -sha256 -hmac "$WEBHOOK_SECRET" | awk '{print $2}')
+          curl -sf --connect-timeout 10 \
+            -X POST \
+            -H "Content-Type: application/json" \
+            -H "X-Gitea-Signature: ${SIG}" \
+            -d "$PAYLOAD" \
+            "http://10.10.10.58:9000/hooks/devdesk-deploy"
+
   notify-failure:
     name: Notify on failure
     runs-on: ubuntu-latest
-    needs: [build]
+    needs: [build, deploy]
     if: failure() && github.event_name == 'push'
     steps:
       - name: Send Matrix alert

Makefile

@@ -39,7 +39,8 @@ install: all
 	install -m 0755 bin/devdesk $(DESTDIR)$(PREFIX)/bin/devdesk
 	install -m 0644 libexec/devdesk-lib.sh $(DESTDIR)$(LIBDIR)/devdesk-lib.sh
 	install -m 0755 libexec/devdesk-picker libexec/devdesk-claude-run libexec/devdesk-session-hook \
-		libexec/devdesk-tmux-ready libexec/devdesk-serve libexec/devdesk-statusline $(DESTDIR)$(LIBDIR)/
+		libexec/devdesk-tmux-ready libexec/devdesk-serve libexec/devdesk-statusline \
+		libexec/devdesk-deploy libexec/devdesk-state-hook libexec/devdesk-notify-matrix $(DESTDIR)$(LIBDIR)/
 	install -m 0755 build/ttyd $(DESTDIR)$(LIBDIR)/bin/ttyd
 	install -m 0644 dist/index.html share/tmux.conf share/claude-settings.json $(DESTDIR)$(SHAREDIR)/
 	install -m 0644 etc/env $(DESTDIR)$(SYSCONFDIR)/devdesk/env

README.md

@@ -28,13 +28,27 @@ The tmux server runs in its own unit, so every Claude process lives in **that**
   - `main` is the projects root.
 - **Opening one:**
   - `https://dev.lotusguild.org/?arg=<name>` opens or creates that session.
-  - With no `?arg=`, an fzf picker opens, listing running (●), dormant (○) and new (+) sessions.
-  - The **Sessions** panel's form takes any name plus an optional project folder.
+  - With no `?arg=`, DevDesk reattaches the session you used last in this browser (or the most recently active one). The fzf picker, listing running (●), dormant (○) and new (+) sessions, is under the session chip's menu.
+  - **Session chip** (header): click to switch sessions; its dot shows Claude's state.
+  - **+ New** in the Sessions panel takes any name plus an optional project folder.
 - **Rename / end:** the ✎ and × buttons on each session in the panel. Renaming keeps the session, its running Claude and its recorded conversation. Ending stops Claude; the conversation stays in Claude's history.
 - **Windows:** each session has a `claude` window (0) and a `shell` window (1).
 - **Conversation tracking:** a Claude `SessionStart` hook records each session's conversation ID in `/var/lib/devdesk/registry.json`. After a reboot the session resumes *that* conversation, even when other Claude instances, such as code-server, use the same directory.
-- **Claude Context panel:** a Claude `statusLine` command (`devdesk-statusline`) snapshots each session's model, context-window use, cost and edits to `/var/lib/devdesk/context/<session>.json`. The panel shows the current session's numbers, and Claude's own footer shows a one-line summary. Sessions started before 0.2.0 need Claude restarted (`/exit`, then ⏎ in the menu) before they report.
-- **SSH:** `devdesk attach <name>`, `devdesk new <name> [project]`, `devdesk rename <old> <new>`, `devdesk end <name>`, `devdesk ls`, `devdesk pick`.
+- **Session status:** Claude hooks (`devdesk-state-hook`) mark each session **working**, **waiting on you** (with Claude's message) or **idle**.
+  - The sidebar shows it with context % and a context bar; the session chip's dot shows the current session's state.
+  - A "… needs you" chip jumps to other sessions that are waiting, and a desktop notification fires when one starts waiting. With the panels closed, the **Panels** button shows a count of waiting sessions and Grafana alerts.
+- **Matrix "Claude needs you":** when a session has waited for `DEVDESK_MATRIX_DELAY` seconds (30) and no browser tab or SSH client is attached to it, `devdesk-notify-matrix` posts one message per wait, with a link, to the hookshot webhook URL in `/etc/devdesk/matrix-webhook` (mode 600; no file = off).
+- **File & image drop:** drag files onto the terminal or paste a screenshot.
+  - They're uploaded through ttyd to `/var/lib/devdesk/uploads/<session>/` (25 MB max, pruned after 7 days), and the path is pasted into Claude.
+  - For images, Claude attaches them itself.
+- **Ops Alerts panel:** firing and pending Grafana alert rules, each with a link to the rule.
+  - **Ask Claude** types an investigation prompt into the current session without sending it.
+  - Configure `DEVDESK_GRAFANA_URL`, plus a Viewer token in `DEVDESK_GRAFANA_TOKEN_FILE`.
+- **Repo / CI panel:** branch, ahead/behind, uncommitted changes, HEAD's Gitea CI status and open PRs for the session's folder. When CI fails, **Ask Claude to fix CI** types a prompt to read the failed job's log.
+- **Context:** a Claude `statusLine` command (`devdesk-statusline`) snapshots each session's model, context-window use and cost to `/var/lib/devdesk/context/<session>.json`. The Sessions panel shows it as a bar (cost in the tooltip), and Claude's own footer shows a one-line summary.
+- **Light mode:** the terminal switches palettes with the page. DevDesk starts Claude with its `dark-ansi` theme so Claude draws with the terminal's 16 colours, and the light palette maps bright white to ink; tmux and the status line use ANSI colours too. A session picks up Claude's theme the next time Claude starts in it (`/exit`, then ⏎ resumes the same conversation).
+- **Phone:** a key bar replaces the shortcut hints (Esc, Tab, ⇧Tab, ^C, ↑, ↓, ⏎, Claude/Shell window), and the panels open as a drawer.
+- **SSH:** `devdesk attach <name>`, `devdesk new <name> [project]`, `devdesk rename <old> <new>`, `devdesk end <name>`, `devdesk ls`, `devdesk pick`, `devdesk repo <name>`, `devdesk alerts`.
 
 ## Keys
 | Key | Action |
@@ -46,14 +60,18 @@ The tmux server runs in its own unit, so every Claude process lives in **that**
 | Ctrl-b d | Detach (the session keeps running) |
 | Shift+drag | Native browser selection (plain drag goes to tmux copy-mode, which copies via OSC 52) |
 | Ctrl+Shift+C / V | Copy selection / paste |
+| Ctrl+Shift+P | Command palette (also the ⌕ button) |
 
-Use the **Full** button for fullscreen. In Chromium it also captures Ctrl+W/Ctrl+T, which browsers otherwise keep for themselves.
+The **☀/◐** button switches light and dark mode (saved per browser, shared with the other web_template apps' `lt_theme` preference). Text size, desktop notifications (with a mute), the keyboard shortcuts sheet and fullscreen are in the **⋯** menu; everything is also in the command palette. In Chromium, fullscreen also captures Ctrl+W/Ctrl+T, which browsers otherwise keep for themselves.
 
 ## Configuration
-- `/etc/devdesk/env` (conffile):
+- **Put your changes in `/etc/devdesk/env.local`.** It's read after the packaged `env` and never shipped, so `apt upgrade` never asks about it. Example: `DEVDESK_REMOTE_CONTROL=1`.
+- `/etc/devdesk/env` holds the packaged defaults; don't edit it. Its keys:
   - port, bind address, projects root and `DEVDESK_DEFAULT_DIR`
+  - `DEVDESK_GITEA_URL` / `DEVDESK_GITEA_ALIASES` for the Repo/CI panel. Public repos need no token; for private ones put a `read:repository` token in `/etc/devdesk/gitea-token`
   - `CLAUDE_BIN` and `CLAUDE_ARGS`
   - `DEVDESK_REMOTE_CONTROL=1`, which also starts each session with Claude Remote Control so it can be continued from the Claude app
+  - `DEVDESK_PUBLIC_URL`, `DEVDESK_MATRIX_WEBHOOK_FILE` and `DEVDESK_MATRIX_DELAY` for the Matrix notifications
 - `/etc/devdesk/secret.env` is generated on install. It holds the ttyd credential that NPM must inject; see [docs/DEPLOY.md](docs/DEPLOY.md).
 - `/etc/devdesk/tmux.local.conf` is optional and is sourced after the packaged `tmux.conf`.
 
@@ -69,8 +87,7 @@ apt install ../devdesk_*_amd64.deb
 
 CI (`.gitea/workflows/build-deb.yml`):
 - Every push lints, tests, builds and smoke-tests the package and uploads it as an artifact.
-- A `v*` tag also publishes to `https://code.lotusguild.org/api/packages/LotusGuild/debian` and creates a release.
+- A `v*` tag also publishes to `https://code.lotusguild.org/api/packages/LotusGuild/debian`, creates a release, and auto-deploys to CT 126. A signed webhook runs `devdesk-deploy`, which upgrades the package; see [docs/DEPLOY.md](docs/DEPLOY.md).
 
 ## Roadmap
-- **v1.1:** `devdesk-api` sidecar for the Repo/CI panel, Matrix notifications when you're away, and auto-deploy.
-- **v2:** Ops Alerts (Grafana) with "Ask Claude" prompts, and file drop.
+Tracked in [Gitea issues](https://code.lotusguild.org/LotusGuild/devdesk/issues) by milestone: v0.6.0 file viewer, v0.7.0 editor + inbox, backlog.

bin/devdesk

@@ -5,10 +5,13 @@
 #   devdesk new NAME [PROJECT]   create session NAME (detached) in PROJECT's folder, or the default folder
 #   devdesk rename OLD NEW       rename a session (running or dormant)
 #   devdesk end NAME             stop session NAME and forget it
+#   devdesk repo NAME            git + Gitea CI status of the session's folder (JSON)
+#   devdesk alerts               firing/pending Grafana alerts (JSON)
 #   devdesk ls                   list sessions
 #   devdesk pick                 interactive picker
 #
-# The web UI calls `devdesk attach --list | --new NAME [PROJECT] | --rename OLD NEW | --end NAME`
+# The web UI calls `devdesk attach --list | --repo NAME | --alerts | --upload SESSION FILE BYTES |
+# --new NAME [PROJECT] | --rename OLD NEW | --end NAME | --existing NAME`
 # through ttyd; those print JSON.
 set -euo pipefail
 
@@ -16,13 +19,14 @@ set -euo pipefail
 . "${DEVDESK_LIBEXEC:-/usr/lib/devdesk}/devdesk-lib.sh"
 
 usage() {
-    sed -n '2,10s/^# \{0,1\}//p' "$0"
+    sed -n '2,12s/^# \{0,1\}//p' "$0"
 }
 
 # Tab-separated running sessions: name, dir, attached clients, last activity, windows.
 running_tsv() {
     dd_server_up || return 0
-    dd_tmux list-sessions -F '#{session_name}	#{session_path}	#{session_attached}	#{session_activity}	#{session_windows}' 2>/dev/null || true
+    # Path last: it may contain anything (tabs included) and is re-joined below.
+    dd_tmux list-sessions -F '#{session_name}	#{session_attached}	#{session_activity}	#{session_windows}	#{session_path}' 2>/dev/null || true
 }
 
 # Tab-separated top-level project directories: slug, dir.
@@ -40,11 +44,12 @@ projects_tsv() {
     done
 }
 
-# {"<session>": {model, used_pct, ...}} from the status-line snapshots.
-context_json() {
-    local f
-    if [ -d "$DEVDESK_CONTEXT_DIR" ]; then
-        for f in "$DEVDESK_CONTEXT_DIR"/*.json; do
+# {"<session>": {...}} merged from the per-session JSON files in DIR
+# (status-line snapshots, hook states).
+per_session_json() {
+    local dir=$1 f
+    if [ -d "$dir" ]; then
+        for f in "$dir"/*.json; do
             [ -f "$f" ] || continue
             jq -cM --arg n "$(basename "$f" .json)" '{($n): .}' "$f" 2>/dev/null || true
         done
@@ -58,14 +63,15 @@ cmd_list() {
         --argjson reg "$reg" \
         --arg run "$(running_tsv)" \
         --arg proj "$(projects_tsv)" \
-        --argjson ctx "$(context_json)" \
+        --argjson ctx "$(per_session_json "$DEVDESK_CONTEXT_DIR")" \
+        --argjson st "$(per_session_json "$DEVDESK_STATUS_DIR")" \
         --arg dflt "$DEVDESK_DEFAULT_SESSION" \
         --arg root "$DEVDESK_PROJECTS_ROOT" '
         def rows($s): $s | split("\n") | map(select(length > 0) | split("\t"));
         ($reg.sessions // {}) as $known
-        | [rows($run)[] | {name: .[0], dir: .[1], running: true,
-                           attached: (.[2] | tonumber), activity: (.[3] | tonumber),
-                           windows: (.[4] | tonumber)}] as $live
+        | [rows($run)[] | {name: .[0], dir: (.[4:] | join("\t")), running: true,
+                           attached: (.[1] | tonumber? // 0), activity: (.[2] | tonumber? // 0),
+                           windows: (.[3] | tonumber? // 0)}] as $live
         | ($live | map(.name)) as $liveNames
         | {default: $dflt, root: $root,
            sessions: (
@@ -75,9 +81,9 @@ cmd_list() {
                  | map({name: .key, dir: .value.dir, running: false, attached: 0,
                         activity: null, windows: 0,
                         claude_session_id: (.value.claude_session_id // null)}))
-           ) | map(. + {context: ($ctx[.name] // null)}),
+           ) | map(. + {context: ($ctx[.name] // null), status: ($st[.name] // null)}),
            projects: ([{name: $dflt, dir: $root}]
-                      + [rows($proj)[] | {name: .[0], dir: .[1]}
+                      + [rows($proj)[] | {name: .[0], dir: (.[1:] | join("\t"))}
                          | select(.name | test("^[A-Za-z0-9][A-Za-z0-9_-]{0,63}$"))])}'
 }
 
@@ -138,10 +144,144 @@ cmd_rename() {
 cmd_end() {
     [ $# -eq 1 ] || dd_die "usage: devdesk end NAME"
     dd_valid_name "$1" || dd_die "invalid session name: $1"
+    # Forget first: killing the session SIGHUPs us when run from inside it.
+    dd_registry_remove "$1"
+    rm -rf "${DEVDESK_STATE_DIR:?}/uploads/$1"
     if dd_server_up; then
         dd_tmux kill-session -t "=$1" 2>/dev/null || true
     fi
-    dd_registry_remove "$1"
+}
+
+# GET $DEVDESK_GITEA_URL/api/v1<path>; token optional (private repos only).
+gitea_get() {
+    # The token goes in via a curl config on stdin, never on the command line (ps).
+    {
+        if [ -r "$DEVDESK_GITEA_TOKEN_FILE" ]; then
+            # shellcheck disable=SC1003 # tr deletes whitespace, quotes and backslashes from the token
+            printf 'header = "Authorization: token %s"\n' "$(tr -d '[:space:]"\\' <"$DEVDESK_GITEA_TOKEN_FILE")"
+        fi
+    } | curl -fsS --max-time 4 -K - "$DEVDESK_GITEA_URL/api/v1$1" 2>/dev/null
+}
+
+# owner/repo when REMOTE points at our Gitea (https or ssh, any configured host), else nothing.
+gitea_slug() {
+    local remote=$1 host hosts
+    hosts="${DEVDESK_GITEA_URL#*://} $DEVDESK_GITEA_ALIASES"
+    for host in $hosts; do
+        host=${host%%/*}
+        host=${host%%:*}
+        if [[ $remote =~ [@/]${host//./\.}(:[0-9]+)?[:/]+([^/]+/[^/]+)$ ]]; then
+            printf '%s\n' "${BASH_REMATCH[2]%.git}"
+            return
+        fi
+    done
+}
+
+cmd_repo() {
+    [ $# -eq 1 ] || dd_die "usage: devdesk repo NAME"
+    dd_valid_name "$1" || dd_die "invalid session name: $1"
+    local dir g branch sha="" dirty ahead=null behind=null upstream=false remote slug="" ci=null prs=null
+    dir=$(dd_resolve_dir "$1")
+    # --no-optional-locks: never take .git/index.lock (Claude's own git would collide).
+    # No safe.directory override: repos owned by other users stay untrusted.
+    g=(git --no-optional-locks -C "$dir")
+    if ! "${g[@]}" rev-parse --is-inside-work-tree >/dev/null 2>&1; then
+        jq -cMn --arg s "$1" --arg dir "$dir" '{session: $s, dir: $dir, git: false}'
+        return
+    fi
+    branch=$("${g[@]}" symbolic-ref --short -q HEAD || echo "(detached)")
+    sha=$("${g[@]}" rev-parse -q --verify HEAD 2>/dev/null || true)
+    dirty=$("${g[@]}" status --porcelain 2>/dev/null | wc -l)
+    if "${g[@]}" rev-parse -q --verify '@{u}' >/dev/null 2>&1; then
+        upstream=true
+        read -r behind ahead < <("${g[@]}" rev-list --left-right --count '@{u}...HEAD')
+    fi
+    remote=$("${g[@]}" remote get-url origin 2>/dev/null | sed -E 's#^([a-z+]+://)[^/@]*@#\1#' || true)
+    [ -n "$remote" ] && slug=$(gitea_slug "$remote")
+    if [ -n "$slug" ] && [ -n "$sha" ]; then
+        ci=$(gitea_get "/repos/$slug/commits/$sha/status" |
+            jq -cM '{state, total: .total_count,
+                     url: (.statuses[0]?.target_url | if . then sub("/jobs/[0-9]+$"; "") else null end),
+                     jobs: [.statuses[]? | {name: .context, status}]}' 2>/dev/null) || ci=null
+        prs=$(gitea_get "/repos/$slug/pulls?state=open&limit=50" | jq -M 'length' 2>/dev/null) || prs=null
+    fi
+    jq -cMn --arg s "$1" --arg dir "$dir" --arg branch "$branch" --arg sha "${sha:0:7}" \
+        --argjson dirty "$dirty" --argjson ahead "$ahead" --argjson behind "$behind" \
+        --argjson upstream "$upstream" --arg remote "$remote" --arg slug "$slug" \
+        --arg web "$DEVDESK_GITEA_URL" --argjson ci "${ci:-null}" --argjson prs "${prs:-null}" '
+        {session: $s, dir: $dir, git: true, branch: $branch, sha: $sha, dirty: $dirty,
+         ahead: $ahead, behind: $behind, upstream: $upstream, remote: $remote,
+         repo: (if $slug == "" then null else $slug end),
+         url: (if $slug == "" then null else "\($web)/\($slug)" end),
+         ci: (if $ci == null then null else $ci + {url: (if $ci.url then $web + $ci.url else null end)} end),
+         prs: $prs}'
+}
+
+# Firing and pending Grafana alert rules, most severe first.
+cmd_alerts() {
+    if [ -z "$DEVDESK_GRAFANA_URL" ]; then
+        jq -cMn '{configured: false, alerts: []}'
+        return
+    fi
+    local raw
+    if ! raw=$({
+        if [ -r "$DEVDESK_GRAFANA_TOKEN_FILE" ]; then
+            # shellcheck disable=SC1003 # tr deletes whitespace, quotes and backslashes from the token
+            printf 'header = "Authorization: Bearer %s"\n' "$(tr -d '[:space:]"\\' <"$DEVDESK_GRAFANA_TOKEN_FILE")"
+        fi
+    } | curl -fsS --max-time 6 -K - "$DEVDESK_GRAFANA_URL/api/prometheus/grafana/api/v1/rules" 2>&1); then
+        jq -cMn --arg e "${raw:-no response}" '{configured: true, error: $e, alerts: []}'
+        return
+    fi
+    jq -cM --arg pub "$DEVDESK_GRAFANA_PUBLIC_URL" '
+        def num: (tonumber? // .) | tostring;
+        {configured: true, checked: (now | floor), alerts: [
+            .data.groups[] | .name as $group | .file as $folder | .rules[]
+            | select(.state == "firing" or .state == "pending")
+            | . as $r
+            | ([.alerts[]? | select(.state == "Alerting" or .state == "Pending")]) as $active
+            | {name, state, severity: (.labels.severity // null), group: $group, folder: $folder,
+               since: (.activeAt // $active[0].activeAt // null),
+               summary: ((.annotations.summary // .annotations.description // "")
+                         | gsub("\\{\\{ *\\$value *\\}\\}"; ($active[0].value // "?" | num))),
+               instances: [$active[] | .labels
+                            | del(.__alert_rule_uid__, .__grafana_origin__, .alertname, .grafana_folder, .__name__, .severity)
+                            | to_entries | map("\(.key)=\(.value)") | join(" ")
+                            | select(. != "")],
+               url: "\($pub)/alerting/grafana/\(.uid)/view"}
+        ] | sort_by(if .severity == "critical" then 0 elif .severity == "warning" then 1 else 2 end)}' <<<"$raw"
+}
+
+# Receive a file for SESSION over the terminal: the browser waits for the ready
+# line, then sends exactly ceil(BYTES/3)*4 bytes of base64 as input.
+cmd_upload() {
+    [ $# -eq 3 ] || dd_die "usage: devdesk attach --upload SESSION FILENAME BYTES"
+    local session=$1 name size=$3 dir dest b64len actual
+    dd_valid_name "$session" || dd_die "invalid session name: $session"
+    { [[ $size =~ ^[0-9]+$ ]] && [ "$size" -gt 0 ] && [ "$size" -le "$DEVDESK_UPLOAD_MAX" ]; } ||
+        dd_die "file is empty or larger than $((DEVDESK_UPLOAD_MAX / 1048576)) MB"
+    name=$(dd_safe_filename "$2")
+    dir="$DEVDESK_STATE_DIR/uploads/$session"
+    mkdir -p "$dir"
+    find "$DEVDESK_STATE_DIR/uploads" -type f -mtime +7 -delete 2>/dev/null || true
+    # Unique even for same-second uploads of the same name.
+    dest=$(mktemp --tmpdir="$dir" --suffix="-$name" "$(date +%Y%m%d-%H%M%S)-XXXX")
+    # A dropped connection SIGHUPs us mid-transfer: never leave a partial file.
+    trap 'rm -f "$dest"' HUP INT TERM
+    # shellcheck disable=SC2017 # integer ceil(size/3)*4: the base64 length, on purpose
+    b64len=$(((size + 2) / 3 * 4))
+    stty raw -echo 2>/dev/null || true
+    printf 'DEVDESK-UPLOAD-READY\r\n'
+    head -c "$b64len" | base64 -d >"$dest" 2>/dev/null || true
+    stty sane 2>/dev/null || true
+    actual=$(stat -c %s "$dest" 2>/dev/null || echo 0)
+    if [ "$actual" != "$size" ]; then
+        rm -f "$dest"
+        dd_die "upload incomplete ($actual of $size bytes)"
+    fi
+    trap - HUP INT TERM
+    chmod 0644 "$dest"
+    jq -cMn --arg p "$dest" '{ok: true, path: $p}'
 }
 
 ok_json() {
@@ -156,6 +296,24 @@ cmd_attach() {
     --list)
         [ $# -eq 1 ] || dd_die "--list takes no arguments"
         cmd_list
+        dd_linger
+        return
+        ;;
+    --repo)
+        shift
+        cmd_repo "$@"
+        dd_linger
+        return
+        ;;
+    --alerts)
+        cmd_alerts
+        dd_linger
+        return
+        ;;
+    --upload)
+        shift
+        cmd_upload "$@"
+        dd_linger
         return
         ;;
     --new | --rename | --end)
@@ -163,8 +321,18 @@ cmd_attach() {
         shift
         "cmd_$action" "$@"
         ok_json
+        dd_linger
         return
         ;;
+    --existing)
+        # Reconnects: never re-create a session that was ended or renamed meanwhile.
+        shift
+        [ $# -eq 1 ] || dd_die "attach --existing takes exactly one session name"
+        dd_valid_name "$1" || dd_die "invalid session name: $1"
+        if ! { dd_server_up && dd_tmux has-session -t "=$1" 2>/dev/null; } && [ -z "$(dd_registry_get "$1" dir)" ]; then
+            dd_die "session '$1' no longer exists (it was ended or renamed)"
+        fi
+        ;;
     -*) dd_die "unknown option: $1" ;;
     esac
     [ $# -eq 1 ] || dd_die "attach takes exactly one session name"
@@ -195,6 +363,8 @@ case $cmd in
 attach | a) cmd_attach "$@" ;;
 new) cmd_new "$@" ;;
 rename | mv) cmd_rename "$@" ;;
+repo) cmd_repo "$@" ;;
+alerts) cmd_alerts ;;
 ls | list) cmd_ls ;;
 --list) cmd_list ;;
 end) cmd_end "$@" ;;

debian/changelog

@@ -1,3 +1,127 @@
+devdesk (0.6.0) bookworm; urgency=medium
+
+  * Light mode, like the other web_template apps (#31): the ☀/◐ button in the
+    header, shared lt_theme preference (OS setting until you choose), applied
+    before first paint and synced across tabs. The terminal has a light
+    palette; Claude runs with its dark-ansi theme so its colours come from
+    that palette, and the light palette maps bright white to ink, so Claude's
+    text, scrollback included, stays readable in both modes. tmux and the
+    statusLine use ANSI colours so they follow the theme too. Sessions pick
+    up Claude's theme the next time Claude starts in them.
+  * Command palette (#32): ⌕ button or Ctrl+Shift+P. Switch, create, rename
+    and end sessions, Claude/Shell window, scroll back, detach, theme, panels,
+    text size, fullscreen, notifications, copy link, open the repo / PRs / CI
+    run, show alerts, keyboard help.
+  * Dialogs instead of browser prompt/confirm for rename, end and new
+    session (name check inline, project folder picker), and a keyboard
+    shortcuts sheet in the ⋯ menu, the palette and the footer (#33).
+  * Toasts for results: created, renamed, ended, uploads, link copied, CI
+    finished, errors (#34).
+  * Fix: renames, ends and new sessions often reported "no response" although
+    they worked; ttyd dropped the reply of commands that exit right after
+    printing. Replies now wait for the browser to hang up (#35).
+  * Fix: the Sessions panel showed stale names right after a rename or end.
+
+ -- Jared Vititoe <jjvititoe1@gmail.com>  Thu, 08 Oct 2026 00:32:11 -0400
+
+devdesk (0.5.1) bookworm; urgency=medium
+
+  * A session created by opening its URL shows up in the Sessions panel and
+    the switcher right away instead of at the next poll.
+
+ -- Jared Vititoe <jjvititoe1@gmail.com>  Wed, 07 Oct 2026 23:42:01 -0400
+
+devdesk (0.5.0) bookworm; urgency=medium
+
+  * Security (from the 2026-10-07 review):
+    - ttyd :7681 is firewalled to NPM in CT 126 and its credential was
+      rotated (#1).
+    - "Ask Claude" strips control characters from Grafana text and pastes it
+      as bracketed paste, so alert text can never run a command (#2).
+    - OSC 52 clipboard is write-only: terminal output can no longer read the
+      browser clipboard; tmux allow-passthrough is off (#7).
+    - Gitea/Grafana tokens reach curl on stdin, never on its command line;
+      remote URLs lose any userinfo (#11).
+  * Fixes:
+    - Ending the session you are in no longer leaves a ghost entry (#3).
+    - Reconnecting after a drop never re-creates a session that was ended or
+      renamed meanwhile (`attach --existing`) (#4).
+    - Repo panel uses git --no-optional-locks and drops the safe.directory
+      override (#5); uploads get unique names and are cleaned up on hangup
+      (#6); uploads are size-checked first and streamed in slices with an
+      idle timeout (#9); paths with tabs no longer break the session list
+      (#10).
+    - ttyd allows 32 clients; side-channel calls run two at a time and one
+      tab polls for all open tabs (#8).
+  * Header: the SSO chip is gone ("Sign in again" appears only when the
+    session expires); the session chip shows Claude's state as a dot and
+    opens a session switcher; LIVE is a dot; text size, notifications (with
+    mute) and fullscreen move into a ⋯ menu; the Panels button shows a badge
+    for waiting sessions and alerts (#13, #16).
+  * A bare URL reattaches your last session instead of opening the picker
+    (#16).
+  * Notifications when *other* sessions start waiting, and alerts are polled
+    with the panels closed (#15).
+  * Sidebar: the Claude Context panel is folded into a context bar in each
+    session row; Repo/CI collapses for non-git folders and offers "Ask Claude
+    to fix CI"; the new-session form hides behind "+ New"; more legible
+    labels (#17).
+  * Phone: key bar (Esc, Tab, ⇧Tab, ^C, arrows, ⏎, Claude/Shell), drawer
+    with backdrop, layout that follows the on-screen keyboard, DOM renderer
+    on touch devices, no clock in the tmux status line (#14).
+  * Matrix "Claude needs you": a wait that lasts 30 s with nobody attached
+    posts one message with a link to the Devdesk hookshot webhook (#28).
+
+ -- Jared Vititoe <jjvititoe1@gmail.com>  Wed, 07 Oct 2026 23:34:48 -0400
+
+devdesk (0.4.0) bookworm; urgency=medium
+
+  * Session status at a glance: Claude hooks record whether each session is
+    working, waiting on you (with Claude's message) or idle. The sidebar shows
+    it with context %, the header shows the current session's state, and a
+    pulsing "needs you" chip jumps to sessions waiting for input.
+  * File & image drop: drag files onto the terminal or paste a screenshot.
+    They're uploaded through ttyd to /var/lib/devdesk/uploads/<session>/ (25 MB
+    max, pruned after 7 days) and the path is pasted into Claude, which
+    attaches images itself.
+  * Ops Alerts panel is live: firing/pending Grafana alert rules with
+    severity, instances, summary and a link, plus an "Ask Claude" button that
+    types an investigation prompt into the current session.
+
+ -- Jared Vititoe <jjvititoe1@gmail.com>  Wed, 07 Oct 2026 19:24:15 -0400
+
+devdesk (0.3.1) bookworm; urgency=medium
+
+  * Auto-deploy: tagged releases trigger CT 126's webhook listener (house HMAC
+    pattern), which runs /usr/lib/devdesk/devdesk-deploy to upgrade the
+    package from the apt registry. Running sessions are untouched.
+
+ -- Jared Vititoe <jjvititoe1@gmail.com>  Wed, 07 Oct 2026 13:20:58 -0400
+
+devdesk (0.3.0) bookworm; urgency=medium
+
+  * Repo / CI panel is live: branch, ahead/behind, uncommitted changes, the
+    Gitea CI status of HEAD (linked to the run) and open PRs for the current
+    session's folder, via `devdesk attach --repo` over the ttyd channel. No
+    sidecar needed; public repos need no token (optional
+    /etc/devdesk/gitea-token for private ones). A notification fires when CI
+    for HEAD finishes while the tab is in the background.
+  * Remote Control verified with resume (same claude.ai session link).
+  * Local settings now go in /etc/devdesk/env.local (read after the packaged
+    env, never shipped), so upgrades no longer stop at a conffile prompt.
+
+ -- Jared Vititoe <jjvititoe1@gmail.com>  Wed, 07 Oct 2026 12:57:04 -0400
+
+devdesk (0.2.1) bookworm; urgency=medium
+
+  * Session hook and status line only record for panes on DevDesk's own
+    tmux server (Claude run with these settings elsewhere no longer writes
+    into DevDesk's state).
+  * The Claude wrapper re-reads /etc/devdesk/env before every Claude launch,
+    so Remote Control and CLAUDE_ARGS changes apply on the next restart.
+
+ -- Jared Vititoe <jjvititoe1@gmail.com>  Wed, 07 Oct 2026 12:54:06 -0400
+
 devdesk (0.2.0) bookworm; urgency=medium
 
   * Sessions no longer need a project folder: any name works and starts in

debian/devdesk.devdesk-tmux.service

@@ -11,6 +11,7 @@ User=root
 Environment=HOME=/root USER=root LOGNAME=root SHELL=/bin/bash LANG=C.UTF-8
 Environment=PATH=/root/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
 EnvironmentFile=-/etc/devdesk/env
+EnvironmentFile=-/etc/devdesk/env.local
 WorkingDirectory=-/root
 RuntimeDirectory=devdesk
 RuntimeDirectoryMode=0700

debian/devdesk.postrm

@@ -2,7 +2,7 @@
 set -e
 
 if [ "$1" = purge ]; then
-    rm -f /etc/devdesk/secret.env
+    rm -f /etc/devdesk/secret.env /etc/devdesk/env.local
     rm -rf /var/lib/devdesk
 fi
 

debian/devdesk.service

@@ -10,6 +10,7 @@ User=root
 Environment=HOME=/root LANG=C.UTF-8
 Environment=PATH=/root/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
 EnvironmentFile=/etc/devdesk/env
+EnvironmentFile=-/etc/devdesk/env.local
 EnvironmentFile=/etc/devdesk/secret.env
 ExecStart=/usr/lib/devdesk/devdesk-serve
 Restart=always

docs/DEPLOY.md

@@ -36,8 +36,49 @@ Then run `authelia validate-config --config /etc/authelia/configuration.yml && s
 - **Cloudflare:** add a CNAME `dev` → apex, DNS-only (grey cloud).
 - **Pi-hole:** add `"10.10.10.27 dev.lotusguild.org"` to `dns.hosts` in `pve-infra/containers/163-pihole/etc/pihole/pihole.toml`. A push auto-deploys it, and LAN clients then reach NPM directly instead of hairpinning.
 
-## 5. Optional hardening
-Enable the Proxmox firewall on CT 126 (`firewall=1` on net0) and allow tcp/7681 only from 10.10.10.27. The same rule suits code-server on :8680.
+## 5. Auto-deploy on release
+A `v*` tag makes CI publish the package, then send a signed webhook (the house HMAC pattern) to CT 126's existing `webhook` listener on :9000. The listener runs `/usr/lib/devdesk/devdesk-deploy <ref>`, which waits for that version in the apt registry and upgrades only `devdesk` with `--force-confold`. Running Claude sessions are untouched. The log is `/var/log/devdesk-deploy.log`.
+
+**Setup, done once:**
+1. Generate a secret.
+2. Add this hook to `/etc/webhook/hooks.json`, next to `126-config-deploy`. The file is local and untracked because it holds secrets.
+   ```json
+   {
+     "id": "devdesk-deploy",
+     "execute-command": "/usr/lib/devdesk/devdesk-deploy",
+     "command-working-directory": "/",
+     "pass-arguments-to-command": [{"source": "payload", "name": "ref"}],
+     "trigger-rule": {"and": [
+       {"match": {"type": "payload-hash-sha256", "secret": "<WEBHOOK_SECRET>",
+                  "parameter": {"source": "header", "name": "X-Gitea-Signature"}}},
+       {"match": {"type": "regex", "regex": "^refs/tags/v[0-9]+\\.[0-9]+\\.[0-9]+$",
+                  "parameter": {"source": "payload", "name": "ref"}}}
+     ]}
+   }
+   ```
+3. Run `systemctl restart webhook`.
+4. Store the same secret as the devdesk repo's Actions secret `WEBHOOK_SECRET`.
+
+## 6. Firewall (required)
+The ttyd credential is the only thing between the LAN and a root shell, so only NPM may reach :7681. CT 126 ships this in pve-infra (`containers/126-codingenvironment/etc/nftables.conf`, installed by its `deploy.sh`):
+
+```
+table inet devdesk {
+    chain input {
+        type filter hook input priority filter - 10; policy accept;
+        tcp dport 7681 ip saddr { 127.0.0.1, 10.10.10.27 } accept
+        tcp dport 7681 ip6 saddr ::1 accept
+        tcp dport 7681 counter reject with tcp reset
+    }
+}
+```
+
+Check from another LAN host: `curl -m3 http://10.10.10.58:7681/` must fail with "connection refused". To rotate the credential: `rm /etc/devdesk/secret.env && dpkg-reconfigure devdesk`, put the new `Authorization` value in NPM proxy host 58's Advanced tab, then `systemctl restart devdesk`.
+
+## 7. Matrix "Claude needs you" (optional)
+1. Deploy a hookshot transform named `Devdesk` (`hookshot/devdesk.js` in the matrix repo; pushing it to `main` auto-deploys it on LXC 151). Look up the hook UUID as described in that repo's README.
+2. `umask 077; echo https://matrix.lotusguild.org/webhook/<uuid> > /etc/devdesk/matrix-webhook`.
+3. Nothing to restart: the next wait that lasts `DEVDESK_MATRIX_DELAY` seconds with nobody attached posts a message.
 
 ## Operations
 | Task | Command |

etc/env

@@ -1,5 +1,8 @@
-# DevDesk configuration. Read by systemd (EnvironmentFile=) and by the devdesk
-# scripts. Plain KEY=value lines only: systemd does not support inline comments.
+# DevDesk defaults, shipped by the package. Don't edit: put your changes in
+# /etc/devdesk/env.local (same KEY=value format, read after this file), so
+# package upgrades never prompt about this file.
+# Read by systemd (EnvironmentFile=) and by the devdesk scripts. Plain KEY=value
+# lines only: systemd does not support inline comments.
 # The ttyd credential lives in /etc/devdesk/secret.env (generated on install).
 
 # Port ttyd listens on (NPM proxies dev.lotusguild.org here).
@@ -15,9 +18,29 @@ DEVDESK_DEFAULT_SESSION=main
 # Where sessions that are not a project folder start (e.g. ops sessions); empty = projects root.
 DEVDESK_DEFAULT_DIR=
 
+# Gitea for the Repo/CI panel. Public repos need no token; for private ones put a
+# read:repository token in /etc/devdesk/gitea-token (mode 600).
+DEVDESK_GITEA_URL=https://code.lotusguild.org
+DEVDESK_GITEA_ALIASES=10.10.10.63
+
+# Grafana for the Ops Alerts panel (firing/pending alert rules). A Viewer
+# service-account token goes in DEVDESK_GRAFANA_TOKEN_FILE (mode 600).
+DEVDESK_GRAFANA_URL=http://10.10.10.49:3000
+DEVDESK_GRAFANA_PUBLIC_URL=https://dashboard.lotusguild.org
+DEVDESK_GRAFANA_TOKEN_FILE=/etc/devdesk/grafana-token
+
 # Claude Code binary and extra arguments for every session.
 CLAUDE_BIN=/root/.local/bin/claude
 CLAUDE_ARGS=
 
+# Where DevDesk is reached in a browser; used for links in Matrix notifications.
+DEVDESK_PUBLIC_URL=https://dev.lotusguild.org
+
+# "Claude needs you" in Matrix when a session waits and no tab or SSH client is
+# attached: put a hookshot webhook URL in this file (mode 600). No file = off.
+# DEVDESK_MATRIX_DELAY: seconds the wait must last before posting.
+DEVDESK_MATRIX_WEBHOOK_FILE=/etc/devdesk/matrix-webhook
+DEVDESK_MATRIX_DELAY=30
+
 # 1 = also enable Remote Control so sessions can be continued from the Claude app.
 DEVDESK_REMOTE_CONTROL=0

libexec/devdesk-claude-run

@@ -10,9 +10,15 @@ set -uo pipefail
 NAME=$(dd_current_session)
 [ -n "$NAME" ] || dd_die "not running inside a DevDesk session"
 
-CLAUDE_BIN=${CLAUDE_BIN:-claude}
 SETTINGS="$DEVDESK_SHARE/claude-settings.json"
-read -r -a EXTRA <<<"${CLAUDE_ARGS:-}"
+
+# Re-read /etc/devdesk/env before every Claude launch, so changes (Remote
+# Control, CLAUDE_ARGS, …) apply on the next restart of Claude in a session.
+reload_config() {
+    dd_load_env
+    CLAUDE_BIN=${CLAUDE_BIN:-claude}
+    read -r -a EXTRA <<<"${CLAUDE_ARGS:-}"
+}
 
 ORANGE=$'\033[38;2;255;107;0m'
 CYAN=$'\033[38;2;0;212;255m'
@@ -66,6 +72,7 @@ printf '\033]2;%s\033\134' "$NAME" # pane title (ST = ESC \\)
 mode=resume
 while :; do
     NAME=$(dd_current_session) # follow renames
+    reload_config
     if [ "$mode" = new ]; then run_new; else run_resume; fi
     rc=$?
     NAME=$(dd_current_session)

libexec/devdesk-deploy

@@ -0,0 +1,54 @@
+#!/bin/bash
+# Upgrade DevDesk from the LotusGuild apt registry. Run by the host's webhook
+# listener (hook "devdesk-deploy") when CI publishes a v* tag; the tag's ref is
+# passed as $1. Safe for running sessions: package upgrades restart only
+# devdesk.service (ttyd), never devdesk-tmux.service where Claude lives.
+set -euo pipefail
+
+LOG=${DEVDESK_DEPLOY_LOG:-/var/log/devdesk-deploy.log}
+SOURCES=${DEVDESK_APT_SOURCES:-sources.list.d/lotusguild.list}
+
+log() {
+    printf '%s %s\n' "$(date '+%F %T')" "$*" >>"$LOG"
+}
+
+exec 9>/run/devdesk-deploy.lock
+flock -w 900 9 || {
+    log "another deploy is still running; giving up"
+    exit 1
+}
+
+want=${1:-}
+want=${want#refs/tags/}
+want=${want#v}
+before=$(dpkg-query -W -f='${Version}' devdesk 2>/dev/null || echo none)
+log "=== deploy: installed $before, release ${want:-latest}"
+
+refresh() {
+    apt-get update -q -o Dir::Etc::sourcelist="$SOURCES" -o Dir::Etc::sourceparts=- \
+        -o APT::Get::List-Cleanup=0 >>"$LOG" 2>&1
+}
+
+# The registry can lag the release by a few seconds: wait for the tagged version.
+candidate=""
+for _ in $(seq 1 18); do
+    refresh || true
+    candidate=$(apt-cache policy devdesk | awk '/Candidate:/ {print $2}')
+    if [ -z "$want" ] || [ "$candidate" = "$want" ]; then
+        break
+    fi
+    sleep 10
+done
+
+if [ -n "$want" ] && [ "$candidate" != "$want" ]; then
+    log "registry still offers $candidate, not $want; giving up"
+    exit 1
+fi
+if [ "$candidate" = "$before" ]; then
+    log "already at $before; nothing to do"
+    exit 0
+fi
+
+DEBIAN_FRONTEND=noninteractive apt-get install -y -q --only-upgrade \
+    -o Dpkg::Options::=--force-confold devdesk </dev/null >>"$LOG" 2>&1
+log "devdesk $before -> $(dpkg-query -W -f='${Version}' devdesk)"

libexec/devdesk-lib.sh

@@ -5,10 +5,19 @@
 # against a throwaway tmux server and state directory.
 
 DEVDESK_ENV=${DEVDESK_ENV:-/etc/devdesk/env}
-if [ -r "$DEVDESK_ENV" ]; then
-    # shellcheck source=/dev/null
-    . "$DEVDESK_ENV"
-fi
+# Local overrides go in env.local: it is never shipped, so upgrades don't prompt about it.
+DEVDESK_ENV_LOCAL=${DEVDESK_ENV_LOCAL:-${DEVDESK_ENV}.local}
+
+dd_load_env() {
+    local f
+    for f in "$DEVDESK_ENV" "$DEVDESK_ENV_LOCAL"; do
+        if [ -r "$f" ]; then
+            # shellcheck source=/dev/null
+            . "$f"
+        fi
+    done
+}
+dd_load_env
 
 : "${DEVDESK_PROJECTS_ROOT:=/root/code}"
 : "${DEVDESK_DEFAULT_DIR:=$DEVDESK_PROJECTS_ROOT}"
@@ -18,13 +27,35 @@ fi
 : "${DEVDESK_LIBEXEC:=/usr/lib/devdesk}"
 : "${DEVDESK_SHARE:=/usr/share/devdesk}"
 : "${DEVDESK_TMUX_UNIT:=devdesk-tmux.service}"
+: "${DEVDESK_GITEA_URL:=https://code.lotusguild.org}"
+: "${DEVDESK_GITEA_ALIASES:=10.10.10.63}"
+: "${DEVDESK_GITEA_TOKEN_FILE:=/etc/devdesk/gitea-token}"
+: "${DEVDESK_GRAFANA_URL:=}"
+: "${DEVDESK_GRAFANA_PUBLIC_URL:=$DEVDESK_GRAFANA_URL}"
+: "${DEVDESK_GRAFANA_TOKEN_FILE:=/etc/devdesk/grafana-token}"
+: "${DEVDESK_UPLOAD_MAX:=26214400}"
+: "${DEVDESK_PUBLIC_URL:=}"
+: "${DEVDESK_MATRIX_WEBHOOK_FILE:=/etc/devdesk/matrix-webhook}"
+: "${DEVDESK_MATRIX_DELAY:=30}"
 
 DEVDESK_REGISTRY="$DEVDESK_STATE_DIR/registry.json"
 DEVDESK_CONTEXT_DIR="$DEVDESK_STATE_DIR/context"
+DEVDESK_STATUS_DIR="$DEVDESK_STATE_DIR/state"
 DEVDESK_NAME_RE='^[A-Za-z0-9][A-Za-z0-9_-]{0,63}$'
 
+# Under ttyd, a command that exits right after printing sometimes loses its last
+# output: ttyd sees the exit and closes the WebSocket before reading the pty
+# (devdesk#35). One-shot replies and errors therefore wait, at most
+# DEVDESK_LINGER seconds, for the browser to hang up once it has the answer
+# (ttyd then sends SIGHUP). devdesk-serve sets DEVDESK_VIA_TTYD=1.
+dd_linger() {
+    [ "${DEVDESK_VIA_TTYD:-}" = 1 ] && [ -t 0 ] || return 0
+    read -r -t "${DEVDESK_LINGER:-1}" _ 2>/dev/null || true
+}
+
 dd_die() {
     printf 'devdesk: %s\n' "$*" >&2
+    dd_linger
     exit 1
 }
 
@@ -101,15 +132,18 @@ dd_registry_set_claude() {
 
 dd_registry_remove() {
     dd_registry_update 'del(.sessions[$n])' --arg n "$1"
-    rm -f "$DEVDESK_CONTEXT_DIR/$1.json"
+    rm -f "$DEVDESK_CONTEXT_DIR/$1.json" "$DEVDESK_STATUS_DIR/$1.json"
 }
 
 dd_registry_rename() {
     dd_registry_update 'if .sessions[$old] then .sessions[$new] = .sessions[$old] | del(.sessions[$old]) else . end' \
         --arg old "$1" --arg new "$2"
-    if [ -f "$DEVDESK_CONTEXT_DIR/$1.json" ]; then
-        mv -f "$DEVDESK_CONTEXT_DIR/$1.json" "$DEVDESK_CONTEXT_DIR/$2.json"
-    fi
+    local d
+    for d in "$DEVDESK_CONTEXT_DIR" "$DEVDESK_STATUS_DIR"; do
+        if [ -f "$d/$1.json" ]; then
+            mv -f "$d/$1.json" "$d/$2.json"
+        fi
+    done
 }
 
 # Project name (directory or its slug) -> absolute directory inside the projects root.
@@ -135,6 +169,15 @@ dd_project_dir() {
     esac
 }
 
+# Upload filename -> safe basename ([A-Za-z0-9._-], no leading dots, max 100 chars).
+dd_safe_filename() {
+    local n=${1##*/}
+    n=${n//[^A-Za-z0-9._-]/_}
+    while [[ $n == .* ]]; do n=${n:1}; done
+    n=${n:0:100}
+    printf '%s' "${n:-upload}"
+}
+
 # Session name -> working directory. Sessions don't need a project: the
 # registry wins, then a project of the same name, then DEVDESK_DEFAULT_DIR.
 dd_resolve_dir() {
@@ -152,8 +195,10 @@ dd_resolve_dir() {
 # Name of the DevDesk session this process runs in. Asks tmux, so it stays
 # right after a rename; falls back to the DEVDESK_SESSION set at creation.
 dd_current_session() {
-    local name=""
-    if [ -n "${TMUX:-}" ] && [ -n "${TMUX_PANE:-}" ]; then
+    local name="" outer=${TMUX:-}
+    # Only DevDesk's own tmux server: a Claude started with these settings in
+    # some other tmux must not write into DevDesk's state.
+    if [ "${outer%%,*}" = "$DEVDESK_SOCKET" ] && [ -n "${TMUX_PANE:-}" ]; then
         name=$(tmux display-message -p -t "$TMUX_PANE" '#S' 2>/dev/null)
     fi
     printf '%s\n' "${name:-${DEVDESK_SESSION:-}}"

libexec/devdesk-notify-matrix

@@ -0,0 +1,41 @@
+#!/bin/bash
+# devdesk-notify-matrix SESSION SINCE
+#
+# Started (detached) by devdesk-state-hook when a session starts waiting on you.
+# After DEVDESK_MATRIX_DELAY seconds, if that same wait is still on and nobody is
+# attached to the session (no browser tab, no SSH client), post one "Claude needs
+# you" message to the hookshot webhook in DEVDESK_MATRIX_WEBHOOK_FILE (devdesk#28).
+set -euo pipefail
+
+# shellcheck source=libexec/devdesk-lib.sh
+. "${DEVDESK_LIBEXEC:-/usr/lib/devdesk}/devdesk-lib.sh"
+
+session=${1:-}
+since=${2:-}
+dd_valid_name "$session" || exit 0
+[[ $since =~ ^[0-9]+$ ]] || exit 0
+[ -r "$DEVDESK_MATRIX_WEBHOOK_FILE" ] || exit 0
+
+sleep "$DEVDESK_MATRIX_DELAY"
+
+state_file="$DEVDESK_STATUS_DIR/$session.json"
+# Still the same wait? (Answering it moves the state on; a new wait has its own notifier.)
+[ "$(jq -rM '"\(.state) \(.since)"' "$state_file" 2>/dev/null)" = "waiting $since" ] || exit 0
+# Anyone looking at it already?
+attached=$(dd_tmux list-sessions -F '#{session_name} #{session_attached}' 2>/dev/null |
+    awk -v s="$session" '$1 == s { print $2 }')
+[ "${attached:-0}" = 0 ] || exit 0
+
+message=$(jq -rM '.message // "Claude is waiting for your input"' "$state_file" 2>/dev/null)
+url=""
+[ -z "$DEVDESK_PUBLIC_URL" ] || url="${DEVDESK_PUBLIC_URL%/}/?arg=$session"
+body=$(jq -cMn --arg s "$session" --arg m "$message" --arg u "$url" --arg h "$(hostname)" \
+    '{session: $s, message: $m, url: (if $u == "" then null else $u end), host: $h,
+      text: ("Claude needs you in " + $s + ": " + $m + (if $u == "" then "" else " — " + $u end))}')
+
+# The webhook URL is a secret (anyone holding it can post to the room): pass it
+# to curl on stdin, never on the command line.
+# shellcheck disable=SC1003 # tr deletes whitespace, quotes and backslashes from the URL
+webhook=$(tr -d '[:space:]"\\' <"$DEVDESK_MATRIX_WEBHOOK_FILE")
+printf 'url = "%s"\n' "$webhook" |
+    curl -fsS --max-time 10 --retry 2 -K - -H 'Content-Type: application/json' --data-binary "$body" >/dev/null

libexec/devdesk-serve

@@ -13,7 +13,7 @@ args=(
     --writable                          # ttyd >= 1.7.4 is read-only by default
     --url-arg                           # ?arg=<session> becomes `devdesk attach <session>`
     --check-origin                      # refuse cross-site WebSocket connections
-    --max-clients "${DEVDESK_MAX_CLIENTS:-8}"
+    --max-clients "${DEVDESK_MAX_CLIENTS:-32}"
     --credential "$DEVDESK_CREDENTIAL"  # injected by NPM as an Authorization header
     --index "${DEVDESK_INDEX:-/usr/share/devdesk/index.html}"
     --debug "${DEVDESK_TTYD_LOG_LEVEL:-3}" # errors+warnings only: notice level would log the credential
@@ -22,4 +22,7 @@ if [ -n "${DEVDESK_BIND:-}" ]; then
     args+=(--interface "$DEVDESK_BIND")
 fi
 
+# Tells `devdesk attach` it talks to a browser through ttyd (see dd_linger).
+export DEVDESK_VIA_TTYD=1
+
 exec "${DEVDESK_TTYD:-/usr/lib/devdesk/bin/ttyd}" "${args[@]}" "${DEVDESK_BIN:-/usr/bin/devdesk}" attach

libexec/devdesk-state-hook

@@ -0,0 +1,56 @@
+#!/bin/bash
+# Claude Code hook (wired in via claude-settings.json) that tracks what Claude is
+# doing in each DevDesk session, for the sidebar's at-a-glance status:
+#   UserPromptSubmit, PostToolUse -> working
+#   Notification                  -> waiting (Claude needs input or a permission)
+#   Stop, SessionStart            -> idle
+#   SessionEnd                    -> exited
+# Fires on every tool call, so it stays tiny and only writes when the state changes.
+# Entering "waiting" also starts devdesk-notify-matrix, which posts to Matrix if
+# the wait lasts and nobody is attached (devdesk#28).
+
+input=$(cat)
+
+outer=${TMUX:-}
+[ "${outer%%,*}" = "${DEVDESK_SOCKET:-/run/devdesk/tmux.sock}" ] && [ -n "${TMUX_PANE:-}" ] || exit 0
+session=$(tmux display-message -p -t "$TMUX_PANE" '#S' 2>/dev/null)
+[[ $session =~ ^[A-Za-z0-9][A-Za-z0-9_-]{0,63}$ ]] || exit 0
+
+IFS=$'\t' read -r event message < <(jq -rM '[.hook_event_name // "", (.message // "" | gsub("[\t\n]"; " "))] | @tsv' <<<"$input" 2>/dev/null)
+case $event in
+UserPromptSubmit | PostToolUse) state=working ;;
+Notification) state=waiting ;;
+Stop | SessionStart) state=idle ;;
+SessionEnd) state=exited ;;
+*) exit 0 ;;
+esac
+
+dir="${DEVDESK_STATE_DIR:-/var/lib/devdesk}/state"
+file="$dir/$session.json"
+# Unchanged state (the common case during tool runs): nothing to write.
+if [ "$state" != waiting ] && [ -f "$file" ] && grep -q "\"state\":\"$state\"" "$file"; then
+    exit 0
+fi
+# A second Notification during the same wait updates the message but keeps
+# `since`, so the wait stays one wait (one Matrix message at most).
+since=$(date +%s)
+was_waiting=0
+if [ "$state" = waiting ] && grep -q '"state":"waiting"' "$file" 2>/dev/null; then
+    was_waiting=1
+    since=$(jq -rM '.since // empty' "$file" 2>/dev/null) || since=$(date +%s)
+    [[ $since =~ ^[0-9]+$ ]] || since=$(date +%s)
+fi
+mkdir -p "$dir" 2>/dev/null || exit 0
+tmp=$(mktemp "$dir/.$session.XXXXXX" 2>/dev/null) || exit 0
+if jq -cMn --arg s "$state" --arg m "$message" --arg e "$event" --argjson t "$since" \
+    '{state: $s, since: $t, event: $e, message: (if $m == "" then null else $m end)}' >"$tmp"; then
+    mv -f "$tmp" "$file"
+else
+    rm -f "$tmp"
+    exit 0
+fi
+if [ "$state" = waiting ] && [ "$was_waiting" = 0 ]; then
+    setsid -f "${DEVDESK_LIBEXEC:-/usr/lib/devdesk}/devdesk-notify-matrix" "$session" "$since" \
+        </dev/null >/dev/null 2>&1 || true
+fi
+exit 0

libexec/devdesk-statusline

@@ -6,11 +6,12 @@
 
 input=$(cat)
 
-session=""
-if [ -n "${TMUX:-}" ] && [ -n "${TMUX_PANE:-}" ]; then
+# Only record for panes on DevDesk's own tmux server.
+session="" outer=${TMUX:-}
+if [ "${outer%%,*}" = "${DEVDESK_SOCKET:-/run/devdesk/tmux.sock}" ] && [ -n "${TMUX_PANE:-}" ]; then
     session=$(tmux display-message -p -t "$TMUX_PANE" '#S' 2>/dev/null)
+    session=${session:-${DEVDESK_SESSION:-}}
 fi
-session=${session:-${DEVDESK_SESSION:-}}
 
 if [[ $session =~ ^[A-Za-z0-9][A-Za-z0-9_-]{0,63}$ ]]; then
     dir="${DEVDESK_STATE_DIR:-/var/lib/devdesk}/context"
@@ -37,12 +38,13 @@ if [[ $session =~ ^[A-Za-z0-9][A-Za-z0-9_-]{0,63}$ ]]; then
     fi
 fi
 
-# Footer line, in TDS colours: session · model · context % · cost
+# Footer line: session · model · context % · cost. ANSI colour numbers, not RGB,
+# so the browser's dark or light palette applies (devdesk#31).
 jq -rM --arg s "$session" '
-    def c($rgb; $t): "\u001b[38;2;\($rgb)m\($t)\u001b[0m";
+    def c($sgr; $t): "\u001b[\($sgr)m\($t)\u001b[0m";
     def pct: if . == null then "—" else "\(. | floor)%" end;
-    [ (if $s != "" then c("255;107;0"; "◈ \($s)") else empty end),
-      c("0;212;255"; .model.display_name // "Claude"),
-      c("127;163;191"; "ctx \(.context_window.used_percentage | pct)"),
-      c("62;96;122"; "$\((.cost.total_cost_usd // 0) * 100 | round / 100)")
-    ] | join(c("62;96;122"; " · "))' <<<"$input" 2>/dev/null || true
+    [ (if $s != "" then c("33"; "◈ \($s)") else empty end),
+      c("36"; .model.display_name // "Claude"),
+      c("37"; "ctx \(.context_window.used_percentage | pct)"),
+      c("37"; "$\((.cost.total_cost_usd // 0) * 100 | round / 100)")
+    ] | join(c("90"; " · "))' <<<"$input" 2>/dev/null || true

share/claude-settings.json

@@ -1,5 +1,6 @@
 {
   "preferredNotifChannel": "terminal_bell",
+  "theme": "dark-ansi",
   "hooks": {
     "SessionStart": [
       {
@@ -8,6 +9,67 @@
             "type": "command",
             "command": "/usr/lib/devdesk/devdesk-session-hook",
             "timeout": 10
+          },
+          {
+            "type": "command",
+            "command": "/usr/lib/devdesk/devdesk-state-hook",
+            "timeout": 5
+          }
+        ]
+      }
+    ],
+    "UserPromptSubmit": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "/usr/lib/devdesk/devdesk-state-hook",
+            "timeout": 5
+          }
+        ]
+      }
+    ],
+    "Notification": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "/usr/lib/devdesk/devdesk-state-hook",
+            "timeout": 5
+          }
+        ]
+      }
+    ],
+    "Stop": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "/usr/lib/devdesk/devdesk-state-hook",
+            "timeout": 5
+          }
+        ]
+      }
+    ],
+    "SessionEnd": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "/usr/lib/devdesk/devdesk-state-hook",
+            "timeout": 5
+          }
+        ]
+      }
+    ],
+    "PostToolUse": [
+      {
+        "matcher": "*",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "/usr/lib/devdesk/devdesk-state-hook",
+            "timeout": 5
           }
         ]
       }

share/tmux.conf

@@ -6,10 +6,10 @@ set -s escape-time 10                  # Esc reaches Claude (interrupt) immediat
 set -s focus-events on
 set -s set-clipboard on                # tmux copy-mode -> OSC 52 -> browser clipboard
 set -s default-terminal "tmux-256color"
-set -as terminal-features ",xterm-256color:RGB"
+set -s terminal-features[90] "xterm-256color:RGB"  # fixed index: re-sourcing must not append
 set -g history-limit 50000
 set -g mouse on                        # wheel scrolls history; Shift+drag selects natively
-set -g allow-passthrough on
+set -g allow-passthrough off       # output may not bypass tmux (title/clipboard spoofing)
 set -g renumber-windows on
 
 # --- bells reach the browser (Claude's terminal_bell notifications) ----------
@@ -24,18 +24,21 @@ set -g set-titles-string "devdesk:#S|#T"
 # --- every new session gets a spare shell next to Claude ---------------------
 set-hook -g session-created "new-window -d -n shell"
 
-# --- LotusGuild TDS colours ---------------------------------------------------
+# --- colours ---------------------------------------------------------------------
+# ANSI colour names, not hex: the browser maps them through its dark or light
+# palette, so the status bar follows DevDesk's theme (devdesk#31). black is the
+# bar, white muted text, cyan the accent, yellow the session name.
 set -g status-position bottom
-set -g status-style "bg=#060c14,fg=#7fa3bf"
-set -g status-left "#[fg=#FF6B00,bold] #S #[fg=#3e607a,nobold]│ "
+set -g status-style "bg=black,fg=white"
+set -g status-left "#[fg=yellow,bold] #S #[fg=brightblack,nobold]│ "
 set -g status-left-length 40
-set -g status-right "#[fg=#3e607a]devdesk #[fg=#00D4FF]%H:%M "
+set -g status-right ""
 set -g window-status-format " #I:#W "
-set -g window-status-current-format "#[fg=#030508,bg=#00D4FF,bold] #I:#W "
-set -g window-status-bell-style "fg=#FFB300,bold"
-set -g message-style "bg=#0d1520,fg=#00D4FF"
-set -g mode-style "bg=#00D4FF,fg=#030508"
-set -g pane-border-style "fg=#0d1520"
-set -g pane-active-border-style "fg=#00D4FF"
+set -g window-status-current-format "#[fg=cyan,reverse,bold] #I:#W "
+set -g window-status-bell-style "fg=yellow,bold"
+set -g message-style "bg=black,fg=cyan"
+set -g mode-style "fg=cyan,reverse"
+set -g pane-border-style "fg=brightblack"
+set -g pane-active-border-style "fg=cyan"
 
 source-file -q /etc/devdesk/tmux.local.conf

tests/attach.bats

@@ -12,6 +12,7 @@ setup() {
     export DEVDESK_LIBEXEC="$REPO/libexec"
     export DEVDESK_SHARE="$REPO/share"
     export DEVDESK_NO_SYSTEMD=1
+    export DEVDESK_MATRIX_WEBHOOK_FILE="$TMP/no-webhook" # never the real room
     export FAKE_LOG="$TMP/claude-args"
     export CLAUDE_BIN="$TMP/fake-claude"
     export PATH="$REPO/bin:$PATH"
@@ -197,6 +198,232 @@ claude_args() {
     [ "$(jq -r '.sessions[] | select(.name=="alpha") | .context.model' <<<"$output")" = Opus ]
 }
 
+@test "hooks ignore Claude running in some other tmux server" {
+    start_server
+    other="$TMP/other.sock"
+    tmux -S "$other" new-session -d -s stranger 'sleep 60'
+    pane=$(tmux -S "$other" display -p -t =stranger '#{pane_id}')
+    echo '{"session_id":"nope","source":"startup"}' |
+        TMUX="$other,1,0" TMUX_PANE="$pane" "$REPO/libexec/devdesk-session-hook"
+    echo '{"model":{"display_name":"Opus"},"context_window":{}}' |
+        TMUX="$other,1,0" TMUX_PANE="$pane" "$REPO/libexec/devdesk-statusline" >/dev/null
+    tmux -S "$other" kill-server
+    [ ! -e "$DEVDESK_STATE_DIR/registry.json" ] || [ "$(jq -r '.sessions | has("stranger")' "$DEVDESK_STATE_DIR/registry.json")" = false ]
+    [ ! -e "$DEVDESK_STATE_DIR/context/stranger.json" ]
+}
+
+@test "repo reports git state and recognises Gitea remotes" {
+    export DEVDESK_GITEA_URL=http://127.0.0.1:9 # nothing listens: CI lookups fail fast
+    repo="$DEVDESK_PROJECTS_ROOT/alpha"
+    git -C "$repo" init -q -b main
+    git -C "$repo" -c user.name=t -c user.email=t@t commit -q --allow-empty -m init
+    git -C "$repo" remote add origin gitea@10.10.10.63:LotusGuild/alpha.git
+    touch "$repo/new-file"
+    run devdesk attach --repo alpha
+    [ "$status" -eq 0 ]
+    [ "$(jq -r '.git' <<<"$output")" = true ]
+    [ "$(jq -r '.branch' <<<"$output")" = main ]
+    [ "$(jq -r '.dirty' <<<"$output")" = 1 ]
+    [ "$(jq -r '.repo' <<<"$output")" = LotusGuild/alpha ]
+    [ "$(jq -r '.ci' <<<"$output")" = null ]
+    git -C "$repo" remote set-url origin https://127.0.0.1:9/LotusGuild/alpha-https.git
+    run devdesk repo alpha
+    [ "$(jq -r '.repo' <<<"$output")" = LotusGuild/alpha-https ]
+    git -C "$repo" remote set-url origin https://github.com/someone/else.git
+    run devdesk repo alpha
+    [ "$(jq -r '.repo' <<<"$output")" = null ]
+    run devdesk repo main
+    [ "$(jq -r '.git' <<<"$output")" = false ]
+}
+
+@test "env.local overrides the packaged env" {
+    mkdir -p "$TMP/etc" "$DEVDESK_PROJECTS_ROOT/alpha/ops"
+    printf 'DEVDESK_DEFAULT_DIR=%s\n' "$DEVDESK_PROJECTS_ROOT" >"$TMP/etc/env"
+    printf 'DEVDESK_DEFAULT_DIR=%s\n' "$DEVDESK_PROJECTS_ROOT/alpha/ops" >"$TMP/etc/env.local"
+    export DEVDESK_ENV="$TMP/etc/env"
+    start_server
+    devdesk new adhoc
+    run tmux -S "$DEVDESK_SOCKET" display -p -t =adhoc:claude '#{pane_current_path}'
+    [ "$output" = "$DEVDESK_PROJECTS_ROOT/alpha/ops" ]
+}
+
+@test "state hook tracks working, waiting and idle per session" {
+    start_server
+    devdesk new alpha
+    pane=$(tmux -S "$DEVDESK_SOCKET" display -p -t =alpha:shell '#{pane_id}')
+    hook() { TMUX="$DEVDESK_SOCKET,1,0" TMUX_PANE="$pane" "$REPO/libexec/devdesk-state-hook"; }
+    state() { jq -r '.sessions[] | select(.name=="alpha") | .status.state // "none"' <<<"$(devdesk attach --list)"; }
+    echo '{"hook_event_name":"UserPromptSubmit","prompt":"hi"}' | hook
+    [ "$(state)" = working ]
+    echo '{"hook_event_name":"Notification","message":"Claude needs your permission to use Bash"}' | hook
+    [ "$(state)" = waiting ]
+    [ "$(jq -r '.message' "$DEVDESK_STATE_DIR/state/alpha.json")" = "Claude needs your permission to use Bash" ]
+    echo '{"hook_event_name":"PostToolUse","tool_name":"Bash"}' | hook
+    [ "$(state)" = working ]
+    echo '{"hook_event_name":"Stop"}' | hook
+    [ "$(state)" = idle ]
+    echo '{"hook_event_name":"PreCompact"}' | hook
+    [ "$(state)" = idle ]
+    devdesk rename alpha beta
+    [ -f "$DEVDESK_STATE_DIR/state/beta.json" ] && [ ! -e "$DEVDESK_STATE_DIR/state/alpha.json" ]
+    devdesk end beta
+    [ ! -e "$DEVDESK_STATE_DIR/state/beta.json" ]
+}
+
+# Local stand-in for the hookshot webhook: appends each POST body to $TMP/posts.
+start_receiver() {
+    python3 - "$TMP" <<'PY' &
+import http.server, sys
+tmp = sys.argv[1]
+class H(http.server.BaseHTTPRequestHandler):
+    def do_POST(self):
+        body = self.rfile.read(int(self.headers['Content-Length']))
+        with open(f'{tmp}/posts', 'ab') as f:
+            f.write(body + b'\n')
+        self.send_response(200); self.end_headers(); self.wfile.write(b'{"ok":true}')
+    def log_message(self, *a):
+        pass
+srv = http.server.HTTPServer(('127.0.0.1', 0), H)
+open(f'{tmp}/port', 'w').write(str(srv.server_port))
+srv.serve_forever()
+PY
+    RECEIVER=$!
+    for _ in $(seq 1 50); do [ -s "$TMP/port" ] && break; sleep 0.1; done
+    printf 'http://127.0.0.1:%s/webhook/test\n' "$(cat "$TMP/port")" >"$TMP/webhook"
+    chmod 600 "$TMP/webhook"
+    export DEVDESK_MATRIX_WEBHOOK_FILE="$TMP/webhook"
+}
+
+posts() { [ -f "$TMP/posts" ] && wc -l <"$TMP/posts" || echo 0; }
+
+@test "a wait nobody is attached to is posted to Matrix once (#28)" {
+    start_server
+    start_receiver
+    export DEVDESK_MATRIX_DELAY=1 DEVDESK_PUBLIC_URL=https://dev.example.org
+    devdesk new alpha
+    pane=$(tmux -S "$DEVDESK_SOCKET" display -p -t =alpha:shell '#{pane_id}')
+    hook() { TMUX="$DEVDESK_SOCKET,1,0" TMUX_PANE="$pane" "$REPO/libexec/devdesk-state-hook"; }
+
+    echo '{"hook_event_name":"Notification","message":"Claude needs your permission to use Bash"}' | hook
+    # a second notification in the same wait: no second message
+    echo '{"hook_event_name":"Notification","message":"Claude is waiting for your input"}' | hook
+    sleep 2.5
+    [ "$(posts)" -eq 1 ]
+    run jq -r '[.session, .url, (.text | test("Claude needs you in alpha"))] | @tsv' "$TMP/posts"
+    [ "$output" = "$(printf 'alpha\thttps://dev.example.org/?arg=alpha\ttrue')" ]
+
+    # answered within the delay: nothing is posted
+    echo '{"hook_event_name":"PostToolUse"}' | hook
+    echo '{"hook_event_name":"Notification","message":"Claude needs your permission to use Edit"}' | hook
+    echo '{"hook_event_name":"PostToolUse"}' | hook
+    sleep 2
+    [ "$(posts)" -eq 1 ]
+
+    # no webhook file: feature off
+    rm "$TMP/webhook"
+    echo '{"hook_event_name":"Notification","message":"again"}' | hook
+    sleep 2
+    [ "$(posts)" -eq 1 ]
+    kill "$RECEIVER"
+}
+
+@test "under ttyd, one-shot replies wait for the browser to hang up (#35)" {
+    start_server
+    # No tty (CLI, tests): no waiting.
+    start=$(date +%s%N)
+    DEVDESK_VIA_TTYD=1 DEVDESK_LINGER=2 devdesk attach --list >/dev/null
+    [ $(( ($(date +%s%N) - start) / 1000000 )) -lt 1500 ]
+    # On a tty, as under ttyd: the reply is printed, then it waits. script's
+    # stdin stays open (like a browser that hasn't hung up); a closed stdin
+    # would hand the command EOF at once.
+    start=$(date +%s%N)
+    run bash -c "sleep 2 | script -qec \"DEVDESK_VIA_TTYD=1 DEVDESK_LINGER=0.6 '$REPO/bin/devdesk' attach --list\" /dev/null"
+    elapsed=$(( ($(date +%s%N) - start) / 1000000 ))
+    [[ $output == *'"sessions"'* ]]
+    [ "$elapsed" -ge 500 ]
+    # Errors are printed before the wait, too.
+    run bash -c "sleep 1 | script -qec \"DEVDESK_VIA_TTYD=1 DEVDESK_LINGER=0.3 '$REPO/bin/devdesk' attach --rename nosuch x\" /dev/null"
+    [[ $output == *"no session named"* ]]
+}
+
+@test "alerts reports unconfigured and unreachable Grafana cleanly" {
+    run env DEVDESK_GRAFANA_URL= devdesk alerts
+    [ "$status" -eq 0 ]
+    [ "$(jq -r '.configured' <<<"$output")" = false ]
+    run env DEVDESK_GRAFANA_URL=http://127.0.0.1:9 devdesk attach --alerts
+    [ "$status" -eq 0 ]
+    [ "$(jq -r '.configured' <<<"$output")" = true ]
+    [ "$(jq -r '.error | length > 0' <<<"$output")" = true ]
+}
+
+@test "upload stores the exact bytes under a sanitised name" {
+    head -c 50001 /dev/urandom >"$TMP/in.bin"
+    run bash -c "base64 -w0 '$TMP/in.bin' | devdesk attach --upload alpha '../../etc/My Shot (1).png' 50001"
+    [ "$status" -eq 0 ]
+    path=$(tail -n1 <<<"$output" | jq -r .path)
+    [[ $path == "$DEVDESK_STATE_DIR/uploads/alpha/"*-My_Shot__1_.png ]]
+    cmp "$TMP/in.bin" "$path"
+    run bash -c "printf short | devdesk attach --upload alpha x.bin 100"
+    [ "$status" -ne 0 ]
+    [[ $output == *"upload incomplete"* ]]
+    run devdesk attach --upload alpha x.bin 999999999999
+    [ "$status" -ne 0 ]
+    run devdesk attach --upload ../x x.bin 10
+    [ "$status" -ne 0 ]
+}
+
+@test "end run from inside the session leaves no ghost registry entry (#3)" {
+    start_server
+    devdesk new alpha
+    tmux -S "$DEVDESK_SOCKET" send-keys -t =alpha:shell "$REPO/bin/devdesk end alpha" Enter
+    for _ in $(seq 1 50); do
+        tmux -S "$DEVDESK_SOCKET" has-session -t =alpha 2>/dev/null || break
+        sleep 0.1
+    done
+    run tmux -S "$DEVDESK_SOCKET" has-session -t =alpha
+    [ "$status" -ne 0 ]
+    [ "$(jq -r '.sessions | has("alpha")' "$DEVDESK_STATE_DIR/registry.json")" = false ]
+}
+
+@test "attach --existing refuses sessions that were ended or renamed (#4)" {
+    start_server
+    run devdesk attach --existing ghost
+    [ "$status" -ne 0 ]
+    [[ $output == *"no longer exists"* ]]
+    run devdesk attach --existing ../x
+    [ "$status" -ne 0 ]
+}
+
+@test "same-second uploads of the same name get distinct files (#6)" {
+    printf 'one' | base64 -w0 >"$TMP/a.b64"
+    printf 'two' | base64 -w0 >"$TMP/b.b64"
+    p1=$(devdesk attach --upload alpha image.png 3 <"$TMP/a.b64" | tail -n1 | jq -r .path)
+    p2=$(devdesk attach --upload alpha image.png 3 <"$TMP/b.b64" | tail -n1 | jq -r .path)
+    [ "$p1" != "$p2" ]
+    [ "$(cat "$p1")" = one ]
+    [ "$(cat "$p2")" = two ]
+    [[ $p1 == *-image.png ]]
+}
+
+@test "a tab in a project path does not break --list (#10)" {
+    mkdir -p "$DEVDESK_PROJECTS_ROOT/odd	name"
+    start_server
+    run devdesk attach --list
+    [ "$status" -eq 0 ]
+    jq -e '.projects | map(.dir) | any(endswith("odd\tname"))' <<<"$output" >/dev/null
+}
+
+@test "repo hides credentials embedded in the remote URL (#11)" {
+    export DEVDESK_GITEA_URL=http://127.0.0.1:9
+    repo="$DEVDESK_PROJECTS_ROOT/alpha"
+    git -C "$repo" init -q -b main
+    git -C "$repo" remote add origin https://jared:hunter2@example.com/x/y.git
+    run devdesk repo alpha
+    [ "$status" -eq 0 ]
+    [ "$(jq -r .remote <<<"$output")" = https://example.com/x/y.git ]
+    [[ $output != *hunter2* ]]
+}
+
 @test "web actions run through attach and answer with JSON" {
     start_server
     run devdesk attach --new web1 alpha

tests/protocol.test.mjs

@@ -2,7 +2,7 @@ import test from 'node:test';
 import assert from 'node:assert/strict';
 import {
   Client, FlowControl, decodeServer, encodeBinaryInput, encodeInit, encodeInput, encodeResize,
-  parseListOutput, parseTitle, sessionFromSearch, slugify, stripAnsi, tokenUrl, wsUrl,
+  parseListOutput, parseTitle, pasteSafe, sessionFromSearch, slugify, stripAnsi, tokenUrl, wsUrl,
 } from '../web/src/protocol.js';
 
 const text = (bytes) => new TextDecoder().decode(bytes);
@@ -80,3 +80,9 @@ test('flow control pauses after highWater pending writes and resumes below lowWa
   assert.equal(flow.release(), null); // 1
   assert.equal(flow.release(), Client.RESUME); // 0
 });
+
+test('untrusted text loses control characters before it is typed (#2)', () => {
+  assert.equal(pasteSafe('ok\nrm -rf /\r\x1b[31mred\x07'), 'ok rm -rf / [31mred ');
+  assert.equal(pasteSafe('plain text'), 'plain text');
+  assert.equal(pasteSafe(null), '');
+});

web/index.template.html

@@ -2,12 +2,21 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-<meta name="color-scheme" content="dark">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
+<meta name="color-scheme" content="dark light">
 <meta name="theme-color" content="#030508">
 <meta name="generator" content="devdesk">
 <title>DevDesk</title>
 <link rel="icon" id="favicon" href="__FAVICON__">
+<script>
+  // Theme before first paint (same key as web_template's lt.theme), no dark flash.
+  try {
+    var t = localStorage.getItem('lt_theme');
+    if (t !== 'light' && t !== 'dark') t = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', t);
+    document.documentElement.style.colorScheme = t;
+  } catch (e) { /* storage blocked: stay dark */ }
+</script>
 <!--STYLES-->
 </head>
 <body class="dd-app">
@@ -16,31 +25,49 @@
   <div class="lt-header-left">
     <div class="lt-brand">
       <span class="lt-brand-title">DevDesk</span>
-      <span class="lt-brand-subtitle">Claude Code workspace</span>
     </div>
     <div class="dd-session">
-      <span class="lt-chip lt-chip-info" id="session-chip">—</span>
+      <button type="button" class="dd-session-chip" id="session-chip" data-state="" aria-haspopup="menu" aria-expanded="false" title="Switch session">
+        <span class="dd-state-dot" aria-hidden="true"></span><span class="dd-session-label" id="session-name">—</span><span class="dd-caret" aria-hidden="true">▾</span>
+      </button>
       <span class="dd-pane-title" id="pane-title"></span>
+      <div class="dd-menu dd-switcher" id="switcher" role="menu" hidden></div>
     </div>
   </div>
   <div class="lt-header-right">
-    <span class="lt-ws-status" id="ws-status" data-state="connecting" role="status">
+    <button type="button" class="lt-chip dd-attention" id="attention-chip" title="Sessions waiting for you"></button>
+    <button type="button" class="lt-btn lt-btn-danger lt-btn-sm dd-reauth" id="reauth" hidden title="Your Authelia session expired. Claude keeps running; sign in again to keep using the panels.">Sign in again</button>
+    <span class="lt-ws-status dd-ws" id="ws-status" data-state="connecting" role="status">
       <span class="lt-dot"></span><span id="ws-label">connecting</span>
     </span>
-    <button type="button" class="lt-chip dd-sso" id="sso-badge" data-state="unknown" title="Signed in through Authelia">SSO</button>
-    <div class="lt-btn-group dd-tools">
-      <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" id="font-down" title="Smaller text" aria-label="Smaller text">A−</button>
-      <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" id="font-up" title="Larger text" aria-label="Larger text">A+</button>
-      <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" id="notify-toggle" title="Desktop notification when Claude needs you">Alerts off</button>
-      <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" id="fullscreen-toggle" title="Fullscreen (also captures browser shortcuts in Chromium)">Full</button>
-      <button type="button" class="lt-btn lt-btn-sm" id="sidebar-toggle" aria-controls="sidebar" aria-expanded="false">Panels</button>
+    <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm dd-cmd-btn" id="cmd-toggle" title="Command palette (Ctrl+Shift+P)" aria-label="Open command palette">⌕<span class="dd-cmd-kbd">&nbsp;⌃⇧P</span></button>
+    <button type="button" class="lt-theme-btn" id="theme-toggle" aria-label="Switch to light mode" title="Switch to light mode">☀</button>
+    <div class="dd-more">
+      <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm dd-more-toggle" id="more-toggle" aria-haspopup="menu" aria-expanded="false" title="Settings" aria-label="Settings">⋯</button>
+      <div class="dd-menu dd-more-menu" id="more-menu" role="menu" hidden>
+        <div class="dd-menu-row">
+          <span>Text size</span>
+          <span class="dd-menu-inline">
+            <button type="button" class="dd-icon-btn" id="font-down" aria-label="Smaller text">A−</button>
+            <span id="font-size">14</span>
+            <button type="button" class="dd-icon-btn" id="font-up" aria-label="Larger text">A+</button>
+          </span>
+        </div>
+        <button type="button" class="dd-menu-item" id="notify-toggle" role="menuitem">Desktop notifications</button>
+        <button type="button" class="dd-menu-item" id="help-open" role="menuitem">Keyboard shortcuts</button>
+        <button type="button" class="dd-menu-item" id="fullscreen-toggle" role="menuitem" title="In Chromium, fullscreen also captures Ctrl+W/Ctrl+T for the terminal">Fullscreen</button>
+        <div class="dd-menu-foot" id="version">devdesk</div>
+      </div>
     </div>
+    <button type="button" class="lt-btn lt-btn-sm dd-panels" id="sidebar-toggle" aria-controls="sidebar" aria-expanded="false">Panels<span class="dd-badge" id="panels-badge" hidden></span></button>
   </div>
 </header>
 
 <main class="dd-main">
   <section class="lt-frame dd-terminal-frame" aria-label="Terminal">
     <div id="terminal" class="dd-terminal"></div>
+    <div id="drop-overlay" class="dd-drop-overlay" hidden><span>Drop to attach to <b id="drop-session">this session</b></span></div>
+    <div id="upload-status" class="dd-upload-status" role="status" hidden></div>
     <div id="overlay" class="dd-overlay" data-tone="info" hidden>
       <div class="lt-frame dd-overlay-card" role="alertdialog" aria-labelledby="overlay-title" aria-describedby="overlay-text">
         <div class="lt-section-header" id="overlay-title">Disconnected</div>
@@ -52,77 +79,54 @@
     </div>
   </section>
 
+  <div class="dd-backdrop" id="backdrop" hidden></div>
   <aside id="sidebar" class="dd-sidebar" aria-label="Panels">
     <section class="lt-frame dd-widget" id="widget-sessions" data-state="live">
       <div class="lt-section-header">Sessions
-        <button type="button" class="dd-header-action" id="sessions-refresh" title="Refresh" aria-label="Refresh sessions">↻</button>
+        <span class="dd-header-actions">
+          <button type="button" class="dd-header-action" id="new-session-toggle" aria-expanded="false" title="New session">+ New</button>
+          <button type="button" class="dd-header-action" id="sessions-refresh" title="Refresh" aria-label="Refresh sessions">↻</button>
+        </span>
       </div>
       <div class="lt-section-body">
-        <ul class="dd-session-list" id="sessions-list"></ul>
-        <form class="dd-new-session" id="new-session-form" autocomplete="off">
-          <input class="lt-input" id="new-session-name" maxlength="64" placeholder="New session, e.g. pbs-upgrade"
+        <form class="dd-new-session" id="new-session-form" autocomplete="off" hidden>
+          <input class="lt-input" id="new-session-name" maxlength="64" placeholder="Name, e.g. pbs-upgrade"
                  aria-label="New session name" spellcheck="false">
           <select class="lt-select" id="project-select" aria-label="Start the new session in a project folder (optional)"></select>
           <button type="submit" class="lt-btn lt-btn-primary lt-btn-sm">Open</button>
         </form>
-        <div class="dd-widget-foot">
-          <button type="button" class="lt-btn lt-btn-ghost lt-btn-sm" id="open-picker">Picker</button>
-          <span class="dd-muted dd-status" id="sessions-status" role="status"></span>
-        </div>
+        <ul class="dd-session-list" id="sessions-list"></ul>
+        <span class="dd-muted dd-status" id="sessions-status" role="status"></span>
       </div>
     </section>
 
-    <section class="lt-frame dd-widget" id="widget-context" data-state="empty">
-      <div class="lt-section-header">Claude Context</div>
+    <section class="lt-frame dd-widget" id="widget-alerts" data-state="empty">
+      <div class="lt-section-header">Ops Alerts <span class="lt-badge lt-badge-sm dd-alert-count"></span></div>
       <div class="lt-section-body">
-        <div class="lt-progress lt-progress--cyan" role="progressbar" aria-label="Context window used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
-          <div class="lt-progress-bar" style="width:0%"></div>
-        </div>
-        <div class="lt-kv-grid dd-context-grid">
-          <span class="lt-kv-key">Context</span><span class="lt-kv-val" data-field="used">—</span>
-          <span class="lt-kv-key">Model</span><span class="lt-kv-val" data-field="model">—</span>
-          <span class="lt-kv-key">Cost</span><span class="lt-kv-val" data-field="cost">—</span>
-          <span class="lt-kv-key">Edits</span><span class="lt-kv-val" data-field="lines">—</span>
-          <span class="lt-kv-key">Updated</span><span class="lt-kv-val" data-field="updated">—</span>
-        </div>
-        <p class="dd-muted dd-stub-note dd-context-note"></p>
+        <ul class="dd-alert-list"><li class="dd-empty">Loading…</li></ul>
+        <p class="dd-muted dd-stub-note dd-alerts-note"></p>
       </div>
     </section>
 
-    <section class="lt-frame dd-widget" id="widget-repo" data-state="stub">
-      <div class="lt-section-header">Repo / CI <span class="lt-badge lt-badge-sm dd-soon">v1.1</span></div>
+    <section class="lt-frame dd-widget" id="widget-repo" data-state="empty">
+      <div class="lt-section-header">Repo / CI</div>
       <div class="lt-section-body">
-        <div class="lt-kv-grid">
+        <div class="lt-kv-grid dd-repo-grid">
           <span class="lt-kv-key">Repo</span><span class="lt-kv-val" data-field="repo">—</span>
           <span class="lt-kv-key">Branch</span><span class="lt-kv-val" data-field="branch">—</span>
           <span class="lt-kv-key">Tree</span><span class="lt-kv-val" data-field="dirty">—</span>
-          <span class="lt-kv-key">CI · HEAD</span><span class="lt-kv-val"><span class="lt-status lt-status-pending" data-field="ci">no data</span></span>
+          <span class="lt-kv-key">CI · HEAD</span><span class="lt-kv-val"><span class="lt-status" data-field="ci">—</span></span>
           <span class="lt-kv-key">Open PRs</span><span class="lt-kv-val" data-field="prs">—</span>
         </div>
-        <p class="dd-muted dd-stub-note">Gitea status for this session's repo arrives with devdesk-api.</p>
+        <p class="dd-muted dd-repo-note"></p>
+        <button type="button" class="lt-btn lt-btn-sm dd-ask dd-fix-ci" hidden>Ask Claude to fix CI</button>
       </div>
     </section>
-
-    <section class="lt-frame dd-widget" id="widget-alerts" data-state="stub">
-      <div class="lt-section-header">Ops Alerts <span class="lt-badge lt-badge-sm dd-soon">v2</span></div>
-      <div class="lt-section-body">
-        <ul class="dd-alert-list">
-          <li class="dd-alert">
-            <span class="lt-dot lt-dot-idle"></span>
-            <span class="dd-alert-text">No alert source connected</span>
-            <button type="button" class="lt-btn lt-btn-sm dd-ask" disabled
-                    data-ask-claude="Investigate the firing alert: ">Ask Claude</button>
-          </li>
-        </ul>
-        <p class="dd-muted dd-stub-note">Firing Grafana alerts, each with an “Ask Claude” prompt.</p>
-      </div>
-    </section>
-
   </aside>
 </main>
 
 <footer class="lt-footer dd-footer">
-  <div class="lt-footer-hints">
+  <div class="lt-footer-hints dd-hints">
     <span class="lt-footer-hint"><span class="lt-footer-key">⇧⏎</span>newline</span>
     <span class="lt-footer-sep">│</span>
     <span class="lt-footer-hint"><span class="lt-footer-key">Esc</span>interrupt</span>
@@ -134,8 +138,23 @@
     <span class="lt-footer-hint"><span class="lt-footer-key">^b d</span>detach</span>
     <span class="lt-footer-sep">│</span>
     <span class="lt-footer-hint"><span class="lt-footer-key">⇧drag</span>select</span>
+    <span class="lt-footer-sep">│</span>
+    <span class="lt-footer-hint"><span class="lt-footer-key">drop / paste</span>attach files</span>
+    <span class="lt-footer-sep">│</span>
+    <span class="lt-footer-hint"><span class="lt-footer-key">^⇧P</span>commands</span>
+    <button type="button" class="dd-footer-help" id="footer-help">all keys</button>
+  </div>
+  <div class="dd-keybar" id="keybar" role="toolbar" aria-label="Terminal keys" hidden>
+    <button type="button" data-keys="esc">Esc</button>
+    <button type="button" data-keys="tab">Tab</button>
+    <button type="button" data-keys="stab">⇧Tab</button>
+    <button type="button" data-keys="ctrlc">^C</button>
+    <button type="button" data-keys="up">↑</button>
+    <button type="button" data-keys="down">↓</button>
+    <button type="button" data-keys="enter">⏎</button>
+    <button type="button" data-keys="claude">Claude</button>
+    <button type="button" data-keys="shell">Shell</button>
   </div>
-  <span class="dd-muted" id="version">devdesk</span>
 </footer>
 
 <!--SCRIPT-->

web/src/alerts.js

@@ -0,0 +1,64 @@
+// Ops Alerts panel: firing/pending Grafana alert rules (`devdesk attach --alerts`),
+// each with an "Ask Claude" button that types an investigation prompt into the
+// current session (without pressing Enter).
+
+import { el } from './dom.js';
+
+const SEVERITY = {
+  critical: 'lt-chip-critical',
+  warning: 'lt-chip-warn',
+};
+
+function age(iso) {
+  const t = Date.parse(iso || '');
+  if (Number.isNaN(t)) return '';
+  const s = Math.max(0, (Date.now() - t) / 1000);
+  if (s < 3600) return `${Math.max(1, Math.floor(s / 60))}m`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h`;
+  return `${Math.floor(s / 86400)}d`;
+}
+
+export function investigatePrompt(alert) {
+  const where = alert.instances?.length ? ` on ${alert.instances.join('; ')}` : '';
+  return `Investigate the ${alert.state} Grafana alert "${alert.name}"`
+    + ` (${alert.severity || 'no severity'}, ${alert.folder} / ${alert.group}${where}, since ${alert.since}).`
+    + ` Summary: ${alert.summary || 'n/a'}. Use the grafana MCP server to look at the rule and the related`
+    + ' metrics, find the cause, and tell me what you would change before changing anything.';
+}
+
+export function renderAlerts(root, data) {
+  const list = root.querySelector('.dd-alert-list');
+  const note = root.querySelector('.dd-alerts-note');
+  const count = root.querySelector('.dd-alert-count');
+  const alerts = data?.alerts ?? [];
+  count.textContent = alerts.length ? String(alerts.length) : '';
+  count.className = `lt-badge lt-badge-sm dd-alert-count${alerts.some((a) => a.severity === 'critical') ? ' lt-badge-p1' : alerts.length ? ' lt-badge-p2' : ''}`;
+
+  if (!data) {
+    root.dataset.state = 'empty';
+    list.replaceChildren(el('li', { class: 'dd-empty' }, 'Loading…'));
+    note.textContent = '';
+    return;
+  }
+  if (!data.configured) {
+    root.dataset.state = 'empty';
+    list.replaceChildren(el('li', { class: 'dd-empty' }, 'Grafana is not configured.'));
+    note.textContent = 'Set DEVDESK_GRAFANA_URL and a token file in /etc/devdesk/env.local.';
+    return;
+  }
+  root.dataset.state = 'live';
+  note.textContent = data.error ? `Grafana unreachable: ${data.error}` : '';
+  if (!alerts.length) {
+    list.replaceChildren(el('li', { class: 'dd-all-clear' },
+      el('span', { class: 'lt-dot lt-dot-up' }), data.error ? 'No data' : 'All clear: nothing firing'));
+    return;
+  }
+  list.replaceChildren(...alerts.map((a) => el('li', { class: `dd-alert is-${a.state}` },
+    el('div', { class: 'dd-alert-head' },
+      el('span', { class: `lt-chip ${SEVERITY[a.severity] || 'lt-chip-info'}` }, a.state === 'pending' ? 'pending' : (a.severity || 'alert')),
+      el('a', { class: 'dd-alert-name', href: a.url, target: '_blank', rel: 'noopener', title: `${a.folder} / ${a.group}` }, a.name),
+      el('span', { class: 'dd-muted dd-alert-age' }, age(a.since))),
+    a.instances?.length ? el('div', { class: 'dd-muted dd-alert-instances' }, a.instances.join(' · ')) : null,
+    a.summary ? el('div', { class: 'dd-alert-summary' }, a.summary) : null,
+    el('button', { type: 'button', class: 'lt-btn lt-btn-sm dd-ask', 'data-ask-claude': investigatePrompt(a) }, 'Ask Claude'))));
+}

web/src/connection.js

@@ -12,11 +12,17 @@ export async function fetchToken() {
   const res = await fetch(tokenUrl(window.location), {
     cache: 'no-store', credentials: 'same-origin', redirect: 'manual',
   });
-  if (res.type === 'opaqueredirect') throw new AuthExpiredError('SSO session expired');
+  if (res.type === 'opaqueredirect') {
+    // Any request can discover an expired Authelia session; the header shows
+    // "Sign in again" when this fires (devdesk#13).
+    window.dispatchEvent(new CustomEvent('devdesk:auth', { detail: 'expired' }));
+    throw new AuthExpiredError('SSO session expired');
+  }
   if (res.status === 401 || res.status === 403 || res.status === 407) {
     throw new UnauthorizedError(`HTTP ${res.status}`);
   }
   if (!res.ok) throw new Error(`token request failed: HTTP ${res.status}`);
+  window.dispatchEvent(new CustomEvent('devdesk:auth', { detail: 'ok' }));
   const body = await res.json();
   return body.token || '';
 }
@@ -94,9 +100,41 @@ export class TtydConnection {
   }
 }
 
+// Side-channel commands each occupy a ttyd client slot and a server process:
+// run at most two at a time (devdesk#8).
+let active = 0;
+const waiting = [];
+async function limited(task) {
+  if (active >= 2) await new Promise((resolve) => waiting.push(resolve));
+  active += 1;
+  try {
+    return await task();
+  } finally {
+    active -= 1;
+    waiting.shift()?.();
+  }
+}
+
 // Run a short-lived `devdesk attach <args…>` and return its output as text.
 // ttyd is the only server-side endpoint, so session actions travel this way.
-export async function runCommand(args, timeoutMs = 8000) {
+export function runCommand(args, timeoutMs = 8000) {
+  return limited(() => runCommandNow(args, timeoutMs));
+}
+
+// A full JSON reply, or devdesk's one-line error.
+function isComplete(text) {
+  const clean = stripAnsi(text);
+  if (/^devdesk: .*\n/m.test(clean)) return true;
+  if (!/\}\s*$/.test(clean)) return false;
+  try {
+    parseListOutput(clean);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function runCommandNow(args, timeoutMs) {
   const token = await fetchToken();
   return new Promise((resolve, reject) => {
     const socket = new WebSocket(wsUrl(window.location, args), ['tty']);
@@ -107,15 +145,26 @@ export async function runCommand(args, timeoutMs = 8000) {
       reject(new Error('devdesk did not answer'));
     }, timeoutMs);
     socket.onopen = () => socket.send(encodeInit(token, 240, 24));
-    socket.onmessage = (event) => {
-      const { type, payload } = decodeServer(event.data);
-      if (type === Server.OUTPUT) chunks.push(payload.slice());
-    };
-    socket.onerror = () => {};
-    socket.onclose = () => {
+    let settled = false;
+    const finish = () => {
+      if (settled) return;
+      settled = true;
       clearTimeout(timer);
       resolve(new TextDecoder().decode(concat(chunks)));
     };
+    socket.onmessage = (event) => {
+      const { type, payload } = decodeServer(event.data);
+      if (type !== Server.OUTPUT) return;
+      chunks.push(payload.slice());
+      // Hang up as soon as the answer is complete: devdesk waits for that
+      // before exiting, so ttyd can't drop its last output (devdesk#35).
+      if (isComplete(new TextDecoder().decode(concat(chunks)))) {
+        finish();
+        socket.close();
+      }
+    };
+    socket.onerror = () => {};
+    socket.onclose = finish;
   });
 }
 
@@ -124,6 +173,96 @@ export async function fetchSessionList() {
   return parseListOutput(await runCommand([LIST_ARG]));
 }
 
+// Firing/pending Grafana alerts (`devdesk attach --alerts`).
+export async function fetchAlerts() {
+  return parseListOutput(await runCommand(['--alerts']));
+}
+
+function toBase64(bytes) {
+  let binary = '';
+  for (let i = 0; i < bytes.length; i += 0x8000) {
+    binary += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
+  }
+  return btoa(binary);
+}
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const UPLOAD_MAX = 25 * 1024 * 1024;
+
+// Upload a file into the session's upload folder through ttyd: wait for the
+// server's ready line, stream the file as base64 input in slices (never the
+// whole file in memory), read back {ok, path}. Fails on 20 s of inactivity
+// rather than a fixed total, so slow links still work (devdesk#9).
+export function uploadFile(session, file, onProgress) {
+  if (!file.size) return Promise.reject(new Error('file is empty'));
+  if (file.size > UPLOAD_MAX) return Promise.reject(new Error('larger than 25 MB'));
+  return limited(() => uploadNow(session, file, onProgress));
+}
+
+async function uploadNow(session, file, onProgress) {
+  const token = await fetchToken();
+  const name = (file.name || 'pasted-image.png').slice(-100);
+  const slice = 3 * 16 * 1024; // multiple of 3: base64 of slices concatenates cleanly
+  return new Promise((resolve, reject) => {
+    const socket = new WebSocket(wsUrl(window.location, ['--upload', session, name, String(file.size)]), ['tty']);
+    socket.binaryType = 'arraybuffer';
+    const decoder = new TextDecoder();
+    let output = '';
+    let sending = false;
+    let idle = 0;
+    const touch = () => {
+      clearTimeout(idle);
+      idle = setTimeout(() => socket.close(), 20000);
+    };
+    const send = async () => {
+      for (let offset = 0; offset < file.size; offset += slice) {
+        while (socket.bufferedAmount > 1 << 20) await sleep(20);
+        if (socket.readyState !== WebSocket.OPEN) return;
+        const bytes = new Uint8Array(await file.slice(offset, offset + slice).arrayBuffer());
+        socket.send(encodeInput(toBase64(bytes)));
+        touch();
+        onProgress?.(Math.min(1, (offset + slice) / file.size));
+      }
+    };
+    touch();
+    socket.onopen = () => socket.send(encodeInit(token, 240, 24));
+    socket.onmessage = (event) => {
+      touch();
+      const { type, payload } = decodeServer(event.data);
+      if (type !== Server.OUTPUT) return;
+      output += decoder.decode(payload, { stream: true });
+      if (!sending && output.includes('DEVDESK-UPLOAD-READY')) {
+        sending = true;
+        send();
+      } else if (sending && isComplete(output.replace(/^[\s\S]*DEVDESK-UPLOAD-READY/, ''))) {
+        socket.close(); // the reply is in; let devdesk exit (devdesk#35)
+      }
+    };
+    socket.onerror = () => {};
+    socket.onclose = () => {
+      clearTimeout(idle);
+      const text = stripAnsi(output.replace(/^[\s\S]*DEVDESK-UPLOAD-READY/, ''));
+      try {
+        const result = parseListOutput(text);
+        if (result.ok && result.path) {
+          resolve(result.path);
+          return;
+        }
+      } catch {
+        // fall through to the error message
+      }
+      const message = text.split(/\r?\n/).map((l) => l.trim()).filter(Boolean).pop();
+      reject(new Error((message || 'upload failed').replace(/^devdesk:\s*/, '')));
+    };
+  });
+}
+
+// Git + Gitea CI status for a session's folder (`devdesk attach --repo NAME`).
+export async function fetchRepo(session) {
+  return parseListOutput(await runCommand(['--repo', session]));
+}
+
 // `devdesk attach --new|--rename|--end …`: resolves on {"ok":true}, otherwise
 // rejects with devdesk's own error message.
 export async function sessionAction(action, ...args) {

web/src/context.js

@@ -1,51 +0,0 @@
-// Claude Context panel: the current session's model, context-window use, cost
-// and edits, from the snapshot devdesk-statusline writes on every Claude update.
-
-import { ago } from './sessions.js';
-
-function compact(tokens) {
-  if (tokens == null) return '—';
-  if (tokens >= 1e6) return `${+(tokens / 1e6).toFixed(tokens % 1e6 ? 1 : 0)}M`;
-  if (tokens >= 1e3) return `${Math.round(tokens / 1e3)}k`;
-  return String(tokens);
-}
-
-export function renderContext(root, session, context) {
-  const set = (field, text) => {
-    const node = root.querySelector(`[data-field="${field}"]`);
-    if (node) node.textContent = text;
-  };
-  const bar = root.querySelector('.lt-progress');
-  const fill = root.querySelector('.lt-progress-bar');
-  const note = root.querySelector('.dd-context-note');
-
-  if (!context) {
-    root.dataset.state = 'empty';
-    fill.style.width = '0%';
-    bar.setAttribute('aria-valuenow', '0');
-    for (const f of ['used', 'model', 'cost', 'lines', 'updated']) set(f, '—');
-    note.textContent = session
-      ? 'No data yet: it appears once Claude has redrawn its status line in this session.'
-      : 'Open a session to see its context.';
-    return;
-  }
-
-  const pct = context.used_pct;
-  root.dataset.state = 'live';
-  fill.style.width = `${Math.min(100, pct ?? 0)}%`;
-  bar.setAttribute('aria-valuenow', String(Math.round(pct ?? 0)));
-  bar.classList.remove('lt-progress--cyan', 'lt-progress--red');
-  if (pct == null || pct < 70) bar.classList.add('lt-progress--cyan');
-  else if (pct >= 90) bar.classList.add('lt-progress--red');
-
-  set('used', pct == null
-    ? `— / ${compact(context.window)}`
-    : `${compact(context.used_tokens)} / ${compact(context.window)} (${pct.toFixed(pct < 10 ? 1 : 0)}%)`);
-  set('model', [context.model, context.effort].filter(Boolean).join(' · ') || '—');
-  set('cost', context.cost_usd == null ? '—' : `$${context.cost_usd.toFixed(2)}`);
-  set('lines', `+${context.lines_added ?? 0} −${context.lines_removed ?? 0}`);
-  set('updated', context.updated ? `${ago(context.updated)} ago`.replace('now ago', 'just now') : '—');
-  note.textContent = pct != null && pct >= 80
-    ? 'Context is filling up; consider /compact or a new conversation.'
-    : '';
-}

web/src/dom.js

@@ -0,0 +1,13 @@
+// Tiny DOM builder: el('a', { class, href, onclick }, ...children). Attributes
+// that are null/undefined/false are skipped; on* keys become event listeners.
+export function el(tag, attrs = {}, ...children) {
+  const node = document.createElement(tag);
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value === undefined || value === null || value === false) continue;
+    if (key === 'class') node.className = value;
+    else if (key.startsWith('on')) node.addEventListener(key.slice(2), value);
+    else node.setAttribute(key, value === true ? '' : value);
+  }
+  node.append(...children.filter((c) => c !== null && c !== undefined));
+  return node;
+}

web/src/main.js

@@ -1,10 +1,17 @@
 /* global __DEVDESK_VERSION__ */
-import { createTerminal, loadFonts } from './term.js';
-import { TtydConnection, fetchToken, AuthExpiredError, UnauthorizedError } from './connection.js';
-import { parseTitle, sessionFromSearch } from './protocol.js';
-import { SessionsPanel, rememberSession } from './sessions.js';
-import { renderContext } from './context.js';
+import { THEMES, createTerminal, loadFonts } from './term.js';
+import { getTheme, initTheme, onThemeChange, toggleTheme } from './theme.js';
+import {
+  TtydConnection, fetchAlerts, fetchRepo, fetchToken, uploadFile, AuthExpiredError, UnauthorizedError,
+} from './connection.js';
+import { parseTitle, pasteSafe, sessionFromSearch } from './protocol.js';
+import { SessionsPanel, recentNames, rememberSession, sessionStatus } from './sessions.js';
+import { renderAlerts } from './alerts.js';
+import { renderRepo } from './repo.js';
 import { bindAskClaude } from './widgets.js';
+import { heardWithin, onShared, share } from './shared.js';
+import { CommandPalette, dialogOpen, openDialog, toast } from './ui.js';
+import { el } from './dom.js';
 import * as notify from './notify.js';
 
 const $ = (id) => document.getElementById(id);
@@ -31,19 +38,27 @@ const ui = {
   body: document.body,
   wsStatus: $('ws-status'),
   wsLabel: $('ws-label'),
-  sso: $('sso-badge'),
+  reauth: $('reauth'),
   sessionChip: $('session-chip'),
+  sessionName: $('session-name'),
+  switcher: $('switcher'),
+  attention: $('attention-chip'),
   paneTitle: $('pane-title'),
   overlay: $('overlay'),
   overlayTitle: $('overlay-title'),
   overlayText: $('overlay-text'),
   overlayActions: $('overlay-actions'),
+  moreToggle: $('more-toggle'),
+  moreMenu: $('more-menu'),
   notifyButton: $('notify-toggle'),
   sidebarButton: $('sidebar-toggle'),
+  panelsBadge: $('panels-badge'),
+  backdrop: $('backdrop'),
 };
 
+const urlSession = sessionFromSearch(window.location.search);
 const state = {
-  session: sessionFromSearch(window.location.search), // null = picker
+  session: urlSession, // null = picker
   conn: null,
   attempts: 0,
   retryTimer: null,
@@ -52,23 +67,24 @@ const state = {
   lastActivity: Date.now(),
 };
 
+const touch = window.matchMedia('(pointer: coarse)').matches;
+const isNarrow = () => !window.matchMedia('(min-width: 1100px)').matches;
+
 let term;
 let fit;
 let sessionsPanel;
+let palette;
+let lastRepo = null;
+let lastAlerts = null;
+let waitingOthers = [];
+let paneTitleRaw = '';
 
 // ---------------------------------------------------------------- status UI
 
 function setWsState(stateName, label) {
   ui.wsStatus.dataset.state = stateName;
   ui.wsLabel.textContent = label;
-}
-
-function setSso(stateName) {
-  ui.sso.dataset.state = stateName;
-  ui.sso.textContent = stateName === 'expired' ? 'SSO expired' : 'SSO';
-  ui.sso.title = stateName === 'expired'
-    ? 'Authelia session expired. Click to sign in again.'
-    : 'Signed in through Authelia';
+  ui.wsStatus.title = label;
 }
 
 function showOverlay({ title, text, actions = [], tone = 'info' }) {
@@ -90,10 +106,188 @@ function hideOverlay() {
   ui.overlay.hidden = true;
 }
 
-function showContext() {
+// Pane title (Claude's own title) only when it says more than the session name.
+function renderPaneTitle() {
+  const bare = paneTitleRaw.replace(/^[^\p{L}\p{N}]+/u, '').trim();
+  ui.paneTitle.textContent = bare && bare !== state.session ? paneTitleRaw : '';
+}
+
+function renderSessionChip() {
   const data = sessionsPanel?.data;
   const current = data?.sessions?.find((s) => s.name === state.session);
-  renderContext($('widget-context'), state.session, current?.context ?? null);
+  const status = current ? sessionStatus(current) : null;
+  ui.sessionName.textContent = state.session || 'picker';
+  ui.sessionChip.dataset.state = status?.key ?? '';
+  ui.sessionChip.title = [
+    state.session ? `Session ${state.session}${status ? ` · ${status.label}` : ''}` : 'Session picker',
+    current?.status?.message,
+    current?.context?.used_pct != null ? `context ${Math.floor(current.context.used_pct)}%` : '',
+    'Click to switch session',
+  ].filter(Boolean).join('\n');
+}
+
+// Other sessions waiting on you: header chip, a notification when one starts
+// waiting (devdesk#15), and the Panels badge. Only the tab that fetched the list
+// notifies, so several open tabs don't ring once each.
+let prevWaiting = new Set();
+function renderAttention(fetched) {
+  const data = sessionsPanel?.data;
+  waitingOthers = (data?.sessions ?? []).filter((s) => s.name !== state.session && sessionStatus(s).key === 'waiting');
+  for (const s of waitingOthers) {
+    if (fetched && !prevWaiting.has(s.name)) notify.ring(s.name, s.status?.message || 'Claude needs your input');
+  }
+  prevWaiting = new Set(waitingOthers.map((s) => s.name));
+  ui.attention.classList.toggle('is-active', waitingOthers.length > 0);
+  ui.attention.textContent = waitingOthers.length === 1 ? `${waitingOthers[0].name} needs you` : `${waitingOthers.length} need you`;
+  ui.attention.title = waitingOthers.map((s) => `${s.name}: ${s.status?.message || 'waiting'}`).join('\n');
+  ui.attention.dataset.target = waitingOthers[0]?.name || '';
+  renderPanelsBadge();
+}
+
+function renderPanelsBadge() {
+  const alerts = lastAlerts?.alerts ?? [];
+  const count = waitingOthers.length + alerts.length;
+  const urgent = waitingOthers.length > 0 || alerts.some((a) => a.severity === 'critical');
+  ui.panelsBadge.hidden = count === 0 || ui.body.classList.contains('dd-sidebar-open');
+  ui.panelsBadge.textContent = String(count);
+  ui.panelsBadge.classList.toggle('is-urgent', urgent);
+  ui.panelsBadge.title = [
+    waitingOthers.length ? `${waitingOthers.length} session(s) need you` : '',
+    alerts.length ? `${alerts.length} Grafana alert(s)` : '',
+  ].filter(Boolean).join(' · ');
+}
+
+function onSessionData({ fetched = false } = {}) {
+  renderSessionChip();
+  renderAttention(fetched);
+  if (!ui.switcher.hidden) renderSwitcher();
+}
+
+function showAlerts(data) {
+  lastAlerts = data;
+  renderAlerts($('widget-alerts'), data);
+  renderPanelsBadge();
+}
+
+let alertsBusy = false;
+async function refreshAlerts() {
+  if (alertsBusy) return;
+  alertsBusy = true;
+  try {
+    showAlerts(await fetchAlerts());
+    share('alerts', lastAlerts);
+  } catch {
+    // Keep the last rendering; the next refresh retries.
+  } finally {
+    alertsBusy = false;
+  }
+}
+
+// ---------------------------------------------------------------- file drop / paste
+
+const uploadUi = $('upload-status');
+let uploadHideTimer = 0;
+function uploadMessage(text, isError = false, sticky = false) {
+  clearTimeout(uploadHideTimer);
+  uploadUi.hidden = false;
+  uploadUi.textContent = text;
+  uploadUi.classList.toggle('is-error', isError);
+  if (!sticky) uploadHideTimer = setTimeout(() => { uploadUi.hidden = true; }, isError ? 8000 : 4000);
+}
+
+async function attachFiles(files) {
+  if (!files.length) return;
+  if (!state.session || !state.conn?.isOpen) {
+    toast.warning('Open a session first: files are attached to the current session.');
+    return;
+  }
+  const session = state.session;
+  const paths = [];
+  for (const file of files) {
+    try {
+      const path = await uploadFile(session, file, (p) =>
+        uploadMessage(`Uploading ${file.name || 'image'}… ${Math.round(p * 100)}%`, false, true));
+      paths.push(path);
+    } catch (error) {
+      uploadUi.hidden = true;
+      toast.error(`${file.name || 'file'}: ${error.message}`);
+      return;
+    }
+  }
+  uploadUi.hidden = true;
+  if (session !== state.session) return;
+  // A pasted image path makes Claude attach the image itself.
+  term.paste(`${paths.join(' ')} `);
+  term.focus();
+  toast.success(paths.length === 1 ? `Attached ${paths[0].split('/').pop()}` : `Attached ${paths.length} files`);
+}
+
+function wireUploads() {
+  const frame = document.querySelector('.dd-terminal-frame');
+  const overlay = $('drop-overlay');
+  let depth = 0;
+  const hasFiles = (event) => [...(event.dataTransfer?.types ?? [])].includes('Files');
+  frame.addEventListener('dragenter', (event) => {
+    if (!hasFiles(event)) return;
+    event.preventDefault();
+    depth += 1;
+    $('drop-session').textContent = state.session || 'a session';
+    overlay.hidden = false;
+  });
+  frame.addEventListener('dragover', (event) => {
+    if (hasFiles(event)) event.preventDefault();
+  });
+  frame.addEventListener('dragleave', () => {
+    depth = Math.max(0, depth - 1);
+    if (!depth) overlay.hidden = true;
+  });
+  frame.addEventListener('drop', (event) => {
+    if (!hasFiles(event)) return;
+    event.preventDefault();
+    depth = 0;
+    overlay.hidden = true;
+    attachFiles([...event.dataTransfer.files]);
+  });
+  // Pasting a screenshot / copied file: upload it instead of pasting text.
+  document.addEventListener('paste', (event) => {
+    const files = [...(event.clipboardData?.files ?? [])];
+    if (!files.length) return;
+    event.preventDefault();
+    event.stopPropagation();
+    attachFiles(files);
+  }, true);
+}
+
+// Repo / CI panel for the current session; notifies when HEAD's CI finishes.
+let lastCi = { key: '', state: '' };
+let repoBusy = false;
+async function refreshRepo() {
+  const session = state.session;
+  if (!session) {
+    lastRepo = null;
+    renderRepo($('widget-repo'), null);
+    return;
+  }
+  if (repoBusy) return;
+  repoBusy = true;
+  try {
+    const repo = await fetchRepo(session);
+    if (session !== state.session) return;
+    renderRepo($('widget-repo'), repo);
+    lastRepo = repo;
+    const key = `${session}@${repo.sha}`;
+    const ci = repo.ci?.total ? repo.ci.state : '';
+    if (key === lastCi.key && lastCi.state === 'pending' && ['success', 'failure', 'error'].includes(ci)) {
+      const text = `CI ${ci === 'success' ? 'passed' : 'failed'} on ${repo.branch} @ ${repo.sha}`;
+      notify.ring(session, text);
+      toast[ci === 'success' ? 'success' : 'error'](text);
+    }
+    lastCi = { key, state: ci };
+  } catch {
+    // Keep the last rendering; the next refresh retries.
+  } finally {
+    repoBusy = false;
+  }
 }
 
 let refreshTimer = 0;
@@ -111,28 +305,32 @@ function updateUrl(session) {
 
 // ---------------------------------------------------------------- connection
 
-function connect(session) {
+// reconnect: automatic re-attach after a drop. It must not re-create a session
+// that was ended or renamed meanwhile, so it asks for --existing (devdesk#4).
+function connect(session, { reconnect = false } = {}) {
   clearTimeout(state.retryTimer);
   state.conn?.dispose();
   state.session = session;
   updateUrl(session);
   sessionsPanel?.setCurrent(session);
-  showContext();
-  ui.sessionChip.textContent = session || 'picker';
+  paneTitleRaw = '';
+  renderPaneTitle();
+  onSessionData();
   hideOverlay();
   setWsState('connecting', 'connecting');
   state.openedAt = 0;
   term.reset();
 
   const conn = new TtydConnection({
-    arg: session,
+    arg: session && reconnect ? ['--existing', session] : session,
     size: () => ({ cols: term.cols, rows: term.rows }),
     onOpen: () => {
       state.openedAt = Date.now();
       state.attempts = 0;
       setWsState('connected', 'live');
-      setSso('ok');
       if (session) rememberSession(session);
+      refreshSoon(800); // opening ?arg=<new name> just created this session
+      refreshRepo();
       fit.fit();
       term.focus();
     },
@@ -185,12 +383,11 @@ function onClosed(code) {
 
 function onFailure(error) {
   if (error instanceof AuthExpiredError) {
-    setSso('expired');
     setWsState('disconnected', 'signed out');
     showOverlay({
       title: 'Sign-in expired',
       text: 'Your Authelia session has expired. Claude keeps running on the server; sign in again to reattach.',
-      actions: [{ label: 'Re-authenticate', primary: true, run: () => window.location.reload() }],
+      actions: [{ label: 'Sign in again', primary: true, run: () => window.location.reload() }],
       tone: 'warn',
     });
     return;
@@ -217,13 +414,13 @@ function scheduleReconnect() {
   showOverlay({
     title: 'Reconnecting',
     text: `Connection lost; Claude keeps running on the server. Retrying in ${seconds}s (attempt ${state.attempts}).`,
-    actions: [{ label: 'Retry now', primary: true, run: () => connect(state.session) }, pickerAction],
+    actions: [{ label: 'Retry now', primary: true, run: () => connect(state.session, { reconnect: true }) }, pickerAction],
   });
-  state.retryTimer = setTimeout(() => connect(state.session), delay);
+  state.retryTimer = setTimeout(() => connect(state.session, { reconnect: true }), delay);
 }
 
 function retrySoon() {
-  if (state.retryTimer && !state.conn?.isOpen) connect(state.session);
+  if (state.retryTimer && !state.conn?.isOpen) connect(state.session, { reconnect: true });
 }
 
 // ---------------------------------------------------------------- titles & bell
@@ -235,12 +432,14 @@ function applyTitle() {
   titleFrame = 0;
   const parsed = parseTitle(pendingTitle);
   if (!parsed) {
-    ui.paneTitle.textContent = pendingTitle;
+    paneTitleRaw = pendingTitle;
+    renderPaneTitle();
     return;
   }
   if (parsed.session === 'picker') {
-    ui.sessionChip.textContent = 'picker';
-    ui.paneTitle.textContent = 'choose a session';
+    ui.sessionName.textContent = 'picker';
+    paneTitleRaw = 'choose a session';
+    renderPaneTitle();
     notify.setBaseTitle('DevDesk · picker');
     return;
   }
@@ -250,61 +449,350 @@ function applyTitle() {
     updateUrl(parsed.session);
     rememberSession(parsed.session);
     sessionsPanel.setCurrent(parsed.session);
-    showContext();
+    onSessionData();
+    refreshRepo();
   }
-  ui.sessionChip.textContent = parsed.session;
-  ui.paneTitle.textContent = parsed.pane;
+  paneTitleRaw = parsed.pane;
+  renderPaneTitle();
   notify.setBaseTitle(`${parsed.session} · DevDesk`);
 }
 
+// ---------------------------------------------------------------- menus
+
+const menus = [];
+function wireMenu(button, menu, onOpen) {
+  menus.push({ button, menu });
+  button.addEventListener('click', (event) => {
+    event.stopPropagation();
+    const open = menu.hidden;
+    closeMenus();
+    if (open) {
+      onOpen?.();
+      menu.hidden = false;
+      button.setAttribute('aria-expanded', 'true');
+    }
+  });
+  menu.addEventListener('click', (event) => event.stopPropagation());
+}
+
+function closeMenus() {
+  for (const { button, menu } of menus) {
+    menu.hidden = true;
+    button.setAttribute('aria-expanded', 'false');
+  }
+}
+
+// Session switcher on the session chip (devdesk#16).
+function renderSwitcher() {
+  const sessions = [...(sessionsPanel?.data?.sessions ?? [])].sort((a, b) =>
+    (b.running - a.running) || ((b.activity || 0) - (a.activity || 0)) || a.name.localeCompare(b.name));
+  const choose = (run) => () => {
+    closeMenus();
+    run();
+  };
+  const items = sessions.map((s) => {
+    const status = sessionStatus(s);
+    const ctx = s.context?.used_pct != null ? ` · ctx ${Math.floor(s.context.used_pct)}%` : '';
+    return el('button', {
+      type: 'button', role: 'menuitem',
+      class: `dd-menu-item dd-switch-item is-${status.key}${s.name === state.session ? ' is-current' : ''}`,
+      title: s.dir || '', onclick: choose(() => connect(s.name)),
+    },
+    el('span', { class: `lt-dot ${status.dot}` }),
+    el('span', { class: 'dd-switch-name' }, s.name),
+    el('span', { class: 'dd-switch-meta' }, `${status.label}${ctx}`));
+  });
+  if (!items.length) items.push(el('div', { class: 'dd-menu-note' }, sessionsPanel?.data ? 'No sessions yet.' : 'Loading…'));
+  ui.switcher.replaceChildren(
+    ...items,
+    el('div', { class: 'dd-menu-sep' }),
+    el('button', {
+      type: 'button', role: 'menuitem', class: 'dd-menu-item',
+      onclick: choose(() => sessionsPanel.newDialog()),
+    }, '+ New session…'),
+    el('button', { type: 'button', role: 'menuitem', class: 'dd-menu-item', onclick: choose(() => connect(null)) }, 'Open picker'),
+  );
+}
+
 // ---------------------------------------------------------------- chrome controls
 
 function setFontSize(size) {
+  if (!Number.isFinite(size)) return;
   const clamped = Math.min(24, Math.max(10, size));
   term.options.fontSize = clamped;
   store.set('fontSize', clamped);
+  $('font-size').textContent = String(clamped);
   fit.fit();
 }
 
-function renderNotifyButton() {
-  const labels = { granted: 'Alerts on', denied: 'Alerts blocked', default: 'Alerts off', unsupported: 'No alerts' };
+async function toggleNotifications() {
   const current = notify.notificationsState();
+  if (current === 'default') {
+    const result = await notify.requestNotifications();
+    if (result === 'granted') toast.success('Desktop notifications on');
+    else if (result === 'denied') toast.warning('The browser blocked notifications for this site');
+  } else if (current === 'granted') {
+    notify.setMuted(!notify.isMuted());
+    toast.info(notify.isMuted() ? 'Desktop notifications muted in this browser' : 'Desktop notifications unmuted');
+  } else {
+    toast.warning(current === 'denied' ? 'Notifications are blocked in the browser\'s site settings' : 'This browser has no notifications');
+  }
+}
+
+// ---------------------------------------------------------------- palette & help
+
+const sendKeys = (keys) => state.conn?.sendInput(keys);
+
+async function copyLink() {
+  const url = new URL(window.location.href);
+  url.search = state.session ? `?arg=${encodeURIComponent(state.session)}` : '';
+  try {
+    await navigator.clipboard.writeText(url.href);
+    toast.success('Link copied');
+  } catch {
+    toast.error('Could not copy: the browser refused clipboard access');
+  }
+}
+
+const openUrl = (url) => window.open(url, '_blank', 'noopener');
+
+// Commands for the palette (devdesk#32), rebuilt on every open.
+function buildCommands() {
+  const sessions = [...(sessionsPanel?.data?.sessions ?? [])].sort((a, b) =>
+    (b.running - a.running) || ((b.activity || 0) - (a.activity || 0)) || a.name.localeCompare(b.name));
+  const current = sessions.find((s) => s.name === state.session);
+  const panelsOpen = ui.body.classList.contains('dd-sidebar-open');
+  const notifyState = notify.notificationsState();
+  const commands = [];
+  const add = (command) => commands.push(command);
+
+  for (const s of sessions) {
+    if (s.name === state.session) continue;
+    const status = sessionStatus(s);
+    add({
+      id: `switch:${s.name}`, group: 'Sessions', label: `Switch to ${s.name}`, hint: status.label, keywords: s.dir,
+      icon: status.key === 'waiting' ? '!' : s.running ? '●' : '○', run: () => connect(s.name),
+    });
+  }
+  add({ id: 'new', group: 'Sessions', icon: '+', label: 'New session…', keywords: 'create open project', run: () => sessionsPanel.newDialog() });
+  if (state.session) {
+    add({ id: 'rename', group: 'Sessions', icon: '✎', label: `Rename ${state.session}…`, run: () => sessionsPanel.rename(state.session) });
+    add({
+      id: 'end', group: 'Sessions', icon: '×', label: `End ${state.session}…`, keywords: 'close kill stop',
+      run: () => sessionsPanel.end(current ?? { name: state.session, running: true }),
+    });
+    add({ id: 'copy-link', group: 'Sessions', icon: '⧉', label: 'Copy link to this session', keywords: 'url share', run: copyLink });
+  }
+  add({ id: 'picker', group: 'Sessions', icon: '≡', label: 'Open the session picker', keywords: 'fzf list', run: () => connect(null) });
+
+  if (state.session && state.conn?.isOpen) {
+    add({ id: 'win-claude', group: 'Terminal', icon: '0', label: 'Claude window', kbd: '^b 0', run: () => sendKeys('\x020') });
+    add({ id: 'win-shell', group: 'Terminal', icon: '1', label: 'Shell window', kbd: '^b 1', run: () => sendKeys('\x021') });
+    add({ id: 'scroll', group: 'Terminal', icon: '⇞', label: 'Scroll back (tmux copy mode, q to leave)', kbd: '^b [', keywords: 'history scrollback', run: () => sendKeys('\x02[') });
+    add({ id: 'detach', group: 'Terminal', icon: '⏏', label: 'Detach (the session keeps running)', kbd: '^b d', run: () => sendKeys('\x02d') });
+  }
+
+  add({
+    id: 'theme', group: 'View', icon: getTheme() === 'light' ? '◐' : '☀', keywords: 'theme light dark mode colour color',
+    label: getTheme() === 'light' ? 'Switch to dark mode' : 'Switch to light mode', run: toggleTheme,
+  });
+  add({ id: 'panels', group: 'View', icon: '▤', label: panelsOpen ? 'Hide panels' : 'Show panels', keywords: 'sidebar', run: () => setSidebar(!panelsOpen) });
+  add({ id: 'font-up', group: 'View', icon: 'A+', label: 'Larger text', keywords: 'font zoom', run: () => setFontSize(term.options.fontSize + 1) });
+  add({ id: 'font-down', group: 'View', icon: 'A−', label: 'Smaller text', keywords: 'font zoom', run: () => setFontSize(term.options.fontSize - 1) });
+  add({ id: 'font-reset', group: 'View', icon: 'A', label: 'Reset text size', keywords: 'font zoom', run: () => setFontSize(14) });
+  add({ id: 'fullscreen', group: 'View', icon: '⛶', label: document.fullscreenElement ? 'Exit fullscreen' : 'Fullscreen', run: toggleFullscreen });
+  if (notifyState !== 'unsupported') {
+    add({
+      id: 'notify', group: 'View', icon: '🔔', keywords: 'notifications alerts bell',
+      label: { default: 'Enable desktop notifications', denied: 'Desktop notifications (blocked)', granted: notify.isMuted() ? 'Unmute desktop notifications' : 'Mute desktop notifications' }[notifyState],
+      run: () => toggleNotifications().then(renderNotifyButton),
+    });
+  }
+
+  if (lastRepo?.url) {
+    add({ id: 'open-repo', group: 'Links', icon: '↗', label: `Open ${lastRepo.repo} in Gitea`, run: () => openUrl(lastRepo.url) });
+    add({ id: 'open-prs', group: 'Links', icon: '↗', label: 'Open pull requests', run: () => openUrl(`${lastRepo.url}/pulls`) });
+    if (lastRepo.ci?.url) add({ id: 'open-ci', group: 'Links', icon: '↗', label: `Open CI run (${lastRepo.ci.state})`, run: () => openUrl(lastRepo.ci.url) });
+  }
+  if (lastAlerts?.alerts?.length) {
+    add({
+      id: 'alerts', group: 'Links', icon: '!', label: `Show ${lastAlerts.alerts.length} ops alert(s)`, keywords: 'grafana',
+      run: () => {
+        setSidebar(true);
+        $('widget-alerts').scrollIntoView({ block: 'start', behavior: 'smooth' });
+      },
+    });
+  }
+  add({ id: 'help', group: 'Help', icon: '?', label: 'Keyboard shortcuts', keywords: 'keys help', run: showHelp });
+
+  // After a command, typing goes back to the terminal unless it opened a dialog.
+  return commands.map((c) => ({
+    ...c,
+    run: () => {
+      c.run();
+      if (!dialogOpen()) term.focus();
+    },
+  }));
+}
+
+const KEY_HELP = [
+  ['Claude', [
+    ['⇧ Enter', 'New line in the prompt'],
+    ['Esc', 'Interrupt Claude'],
+    ['⇧ Tab', 'Cycle mode (auto-accept, plan…)'],
+    ['↑ / ↓', 'Previous / next prompt'],
+    ['Ctrl+C', 'Cancel; twice to quit (the menu offers resume)'],
+  ]],
+  ['Windows & sessions (tmux)', [
+    ['Ctrl-b 0 / 1', 'Claude window / shell window'],
+    ['Ctrl-b s', 'Switch session (the URL follows)'],
+    ['Ctrl-b [', 'Scroll back; q to leave'],
+    ['Ctrl-b d', 'Detach (the session keeps running)'],
+  ]],
+  ['DevDesk', [
+    ['Ctrl+⇧ P', 'Command palette'],
+    ['Ctrl+⇧ C / V', 'Copy selection / paste'],
+    ['⇧ drag', 'Select text in the browser'],
+    ['Drop or paste a file', 'Upload it and attach it for Claude'],
+    ['Ctrl+W', 'Asks before closing; Chromium fullscreen keeps it for the terminal'],
+  ]],
+];
+
+function showHelp() {
+  const body = el('div', { class: 'dd-keys' }, ...KEY_HELP.map(([title, rows]) => el('section', {},
+    el('h3', { class: 'dd-keys-title' }, title),
+    el('dl', { class: 'dd-keys-list' }, ...rows.flatMap(([keys, what]) => [el('dt', {}, el('kbd', {}, keys)), el('dd', {}, what)])))));
+  if (touch) body.append(el('p', { class: 'dd-dialog-hint' }, 'On a phone, the key bar under the terminal sends Esc, Tab, ⇧Tab, Ctrl+C, arrows, Enter and the window switches.'));
+  openDialog({ title: 'Keyboard shortcuts', body, actions: [{ label: 'Close', primary: true }] }).then(() => term.focus());
+}
+
+async function toggleFullscreen() {
+  if (document.fullscreenElement) {
+    await document.exitFullscreen();
+    return;
+  }
+  await document.documentElement.requestFullscreen();
+  // Chromium: capture Ctrl+W/Ctrl+T/Esc etc. for the terminal while fullscreen.
+  navigator.keyboard?.lock?.().catch(() => {});
+}
+
+function renderNotifyButton() {
+  const current = notify.notificationsState();
+  const labels = {
+    unsupported: 'Desktop notifications: unsupported',
+    denied: 'Desktop notifications: blocked by the browser',
+    default: 'Enable desktop notifications',
+    granted: notify.isMuted() ? 'Desktop notifications: muted (unmute)' : 'Desktop notifications: on (mute)',
+  };
   ui.notifyButton.textContent = labels[current];
-  ui.notifyButton.dataset.state = current;
+  ui.notifyButton.disabled = current === 'unsupported' || current === 'denied';
 }
 
 function setSidebar(open) {
   ui.body.classList.toggle('dd-sidebar-open', open);
   ui.sidebarButton.setAttribute('aria-expanded', String(open));
-  store.set('sidebar', open ? 'open' : 'closed');
-  if (open) sessionsPanel?.refresh();
+  ui.backdrop.hidden = !(open && isNarrow());
+  if (!isNarrow()) store.set('sidebar', open ? 'open' : 'closed');
+  if (open) {
+    sessionsPanel?.refresh();
+    refreshAlerts();
+    refreshRepo();
+  }
+  renderPanelsBadge();
+}
+
+function closeDrawerIfNarrow() {
+  if (isNarrow() && ui.body.classList.contains('dd-sidebar-open')) setSidebar(false);
+}
+
+// Phone key bar: keys an on-screen keyboard can't send (devdesk#14).
+const KEYS = {
+  esc: '\x1b', tab: '\t', stab: '\x1b[Z', ctrlc: '\x03', up: '\x1b[A', down: '\x1b[B', enter: '\r',
+  claude: '\x020', shell: '\x021', // tmux prefix (C-b) + window number
+};
+
+function wireKeybar() {
+  if (!touch) return;
+  ui.body.classList.add('dd-touch');
+  const bar = $('keybar');
+  bar.hidden = false;
+  // Don't steal focus from the terminal (that would close the on-screen keyboard).
+  bar.addEventListener('pointerdown', (event) => event.preventDefault());
+  bar.addEventListener('click', (event) => {
+    const key = event.target.closest('[data-keys]')?.dataset.keys;
+    if (key && KEYS[key]) state.conn?.sendInput(KEYS[key]);
+  });
+  // Keep the terminal above the on-screen keyboard.
+  const vv = window.visualViewport;
+  if (vv) {
+    const update = () => {
+      const hidden = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
+      document.documentElement.style.setProperty('--dd-kb', `${hidden}px`);
+    };
+    vv.addEventListener('resize', update);
+    vv.addEventListener('scroll', update);
+  }
 }
 
 function wireChrome() {
   $('font-down').addEventListener('click', () => setFontSize(term.options.fontSize - 1));
   $('font-up').addEventListener('click', () => setFontSize(term.options.fontSize + 1));
   ui.notifyButton.addEventListener('click', async () => {
-    await notify.requestNotifications();
+    await toggleNotifications();
     renderNotifyButton();
   });
-  renderNotifyButton();
-  $('fullscreen-toggle').addEventListener('click', async () => {
-    if (document.fullscreenElement) {
-      await document.exitFullscreen();
-      return;
+  $('fullscreen-toggle').addEventListener('click', () => {
+    closeMenus();
+    toggleFullscreen();
+  });
+  $('help-open').addEventListener('click', () => {
+    closeMenus();
+    showHelp();
+  });
+  $('footer-help').addEventListener('click', showHelp);
+  palette = new CommandPalette(buildCommands);
+  $('cmd-toggle').addEventListener('click', () => palette.open());
+  // Ctrl+Shift+P (⌘⇧P): Ctrl+K belongs to the terminal (kill-line in Claude and bash).
+  document.addEventListener('keydown', (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.shiftKey && !event.altKey && event.code === 'KeyP') {
+      event.preventDefault();
+      event.stopPropagation();
+      if (palette.isOpen) palette.close();
+      else if (!dialogOpen()) palette.open();
     }
-    await document.documentElement.requestFullscreen();
-    // Chromium: capture Ctrl+W/Ctrl+T/Esc etc. for the terminal while fullscreen.
-    navigator.keyboard?.lock?.().catch(() => {});
+  }, true);
+  wireMenu(ui.moreToggle, ui.moreMenu, renderNotifyButton);
+  wireMenu(ui.sessionChip, ui.switcher, () => {
+    renderSwitcher();
+    sessionsPanel.refresh();
   });
-  ui.sidebarButton.addEventListener('click', () => setSidebar(!ui.body.classList.contains('dd-sidebar-open')));
-  const wide = window.matchMedia('(min-width: 1100px)').matches;
-  setSidebar(store.get('sidebar', wide ? 'open' : 'closed') === 'open');
+  document.addEventListener('click', closeMenus);
 
-  ui.sso.addEventListener('click', () => {
-    if (ui.sso.dataset.state === 'expired') window.location.reload();
+  ui.sidebarButton.addEventListener('click', () => setSidebar(!ui.body.classList.contains('dd-sidebar-open')));
+  ui.backdrop.addEventListener('click', () => setSidebar(false));
+  setSidebar(!isNarrow() && store.get('sidebar', 'open') === 'open');
+  window.matchMedia('(min-width: 1100px)').addEventListener('change', () => {
+    ui.backdrop.hidden = !(ui.body.classList.contains('dd-sidebar-open') && isNarrow());
   });
 
+  // Esc closes menus and the narrow-screen drawer before the terminal sees it.
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape' || dialogOpen()) return;
+    const menuOpen = menus.some(({ menu }) => !menu.hidden);
+    const drawerOpen = isNarrow() && ui.body.classList.contains('dd-sidebar-open');
+    if (!menuOpen && !drawerOpen) return;
+    event.preventDefault();
+    event.stopPropagation();
+    closeMenus();
+    if (drawerOpen) setSidebar(false);
+  }, true);
+
+  // "Sign in again" appears only when a request finds the SSO session expired (devdesk#13).
+  window.addEventListener('devdesk:auth', (event) => {
+    ui.reauth.hidden = event.detail !== 'expired';
+  });
+  ui.reauth.addEventListener('click', () => window.location.reload());
+
   // Ctrl+W closes the tab before the terminal sees it; ask first.
   window.addEventListener('beforeunload', (event) => {
     if (state.conn?.isOpen && state.session) {
@@ -317,36 +805,63 @@ function wireChrome() {
     document.addEventListener(type, () => { state.lastActivity = Date.now(); }, { capture: true, passive: true });
   }
   // While you're active, touch the Authelia gate so its inactivity timer doesn't lapse.
-  setInterval(async () => {
+  setInterval(() => {
     if (Date.now() - state.lastActivity > 10 * 60 * 1000) return;
-    try {
-      await fetchToken();
-      setSso('ok');
-    } catch (error) {
-      if (error instanceof AuthExpiredError) setSso('expired');
-    }
+    fetchToken().catch(() => {});
   }, 3 * 60 * 1000);
 
   window.addEventListener('online', retrySoon);
   document.addEventListener('visibilitychange', () => {
     if (!document.hidden) retrySoon();
   });
+  // Session states feed the header chip and the notifications for other sessions,
+  // so poll even in a background tab (browsers throttle that to about once a
+  // minute) — unless another tab just shared a fresh list (devdesk#8, #15).
+  onShared('sessions', (data) => sessionsPanel.accept(data));
   setInterval(() => {
-    if (!document.hidden && ui.body.classList.contains('dd-sidebar-open')) sessionsPanel.refresh();
+    if (!heardWithin('sessions', 16 * 1000)) sessionsPanel.refresh();
   }, 15 * 1000);
+  // Alerts feed the Panels badge too.
+  onShared('alerts', showAlerts);
+  setInterval(() => {
+    if (!heardWithin('alerts', 62 * 1000)) refreshAlerts();
+  }, 60 * 1000);
+  // Repo status: on connect, after Claude's turns, and once a minute (devdesk#5, #8).
+  setInterval(() => {
+    if (!document.hidden && ui.body.classList.contains('dd-sidebar-open')) refreshRepo();
+  }, 60 * 1000);
+  ui.attention.addEventListener('click', () => {
+    if (ui.attention.dataset.target) connect(ui.attention.dataset.target);
+  });
+}
+
+// A bare URL (no ?arg=) reattaches the session you used last, or the most
+// recently active one; the picker is only the fallback (devdesk#16).
+function defaultSession(data) {
+  const sessions = data?.sessions ?? [];
+  const known = new Set(sessions.map((s) => s.name));
+  const recent = recentNames().find((name) => known.has(name));
+  if (recent) return recent;
+  const running = sessions.filter((s) => s.running).sort((a, b) => (b.activity || 0) - (a.activity || 0));
+  return running[0]?.name ?? null;
 }
 
 // ---------------------------------------------------------------- boot
 
 async function boot() {
+  initTheme();
   $('version').textContent = `devdesk ${__DEVDESK_VERSION__}`;
   const fontSize = Math.min(24, Math.max(10, Number(store.get('fontSize', 14)) || 14));
+  $('font-size').textContent = String(fontSize);
   await loadFonts(fontSize);
 
   ({ term, fit } = createTerminal($('terminal'), {
     fontSize,
+    theme: getTheme(),
     onShiftEnter: () => state.conn?.sendInput('\n'),
   }));
+  onThemeChange((theme) => { term.options.theme = THEMES[theme]; });
+  $('theme-toggle').addEventListener('click', toggleTheme);
   term.onData((data) => state.conn?.sendInput(data));
   term.onBinary((data) => state.conn?.sendBinary(data));
   term.onResize(({ cols, rows }) => state.conn?.resize(cols, rows));
@@ -355,8 +870,9 @@ async function boot() {
     if (!titleFrame) titleFrame = requestAnimationFrame(applyTitle);
   });
   term.onBell(() => {
-    notify.ring(state.session, ui.paneTitle.textContent);
-    refreshSoon(); // Claude finished a turn: context numbers just changed
+    notify.ring(state.session, ui.paneTitle.textContent || 'Claude needs your attention');
+    refreshSoon(); // Claude finished a turn: states and context just changed
+    setTimeout(refreshRepo, 2000); // …and maybe committed or pushed
   });
 
   let fitFrame = 0;
@@ -376,11 +892,13 @@ async function boot() {
     nameInput: $('new-session-name'),
     select: $('project-select'),
     refreshButton: $('sessions-refresh'),
-    pickerButton: $('open-picker'),
+    newToggle: $('new-session-toggle'),
     status: $('sessions-status'),
     hooks: {
-      onOpen: (name) => connect(name),
-      onPicker: () => connect(null),
+      onOpen: (name) => {
+        closeDrawerIfNarrow();
+        connect(name);
+      },
       onEnding: () => { state.endingCurrent = true; },
       onEnded: (name) => {
         if (name !== state.session) state.endingCurrent = false;
@@ -391,18 +909,25 @@ async function boot() {
         state.session = to;
         updateUrl(to);
         rememberSession(to);
-        ui.sessionChip.textContent = to;
         sessionsPanel.setCurrent(to);
+        renderSessionChip();
       },
-      onData: () => showContext(),
+      onData: (_data, meta) => onSessionData(meta),
     },
   });
   bindAskClaude($('sidebar'), (text) => {
-    state.conn?.sendInput(text);
+    // Alert text is untrusted: no control characters (a newline would run it in a
+    // shell window, CR would submit), and bracketed paste around it (devdesk#2).
+    term.paste(pasteSafe(text));
+    closeDrawerIfNarrow();
     term.focus();
   });
   wireChrome();
-  connect(state.session);
+  wireKeybar();
+  wireUploads();
+  refreshAlerts();
+  await sessionsPanel.refresh();
+  connect(urlSession ?? defaultSession(sessionsPanel.data));
 }
 
 boot();

web/src/notify.js

@@ -32,11 +32,29 @@ export async function requestNotifications() {
   return Notification.requestPermission();
 }
 
+const MUTE_KEY = 'devdesk.notify.muted';
+
+export function isMuted() {
+  try {
+    return localStorage.getItem(MUTE_KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
+export function setMuted(muted) {
+  try {
+    localStorage.setItem(MUTE_KEY, muted ? '1' : '0');
+  } catch {
+    // Private mode: the mute just won't persist.
+  }
+}
+
 export function ring(session, detail) {
   if (attentive()) return;
   unread += 1;
   render();
-  if (notificationsState() === 'granted') {
+  if (notificationsState() === 'granted' && !isMuted()) {
     const note = new Notification(`Claude · ${session || 'devdesk'}`, {
       body: detail || 'Claude needs your attention',
       tag: `devdesk-${session}`,

web/src/protocol.js

@@ -67,6 +67,14 @@ export function slugify(text) {
     .replace(/^[-_]+/, '').replace(/-+$/, '').slice(0, 64);
 }
 
+// Untrusted text (e.g. Grafana alert annotations) typed into a terminal: drop
+// every control character so it can't run a command (newline in a shell),
+// submit early (CR) or inject escape sequences (devdesk#2).
+export function pasteSafe(text) {
+  // eslint-disable-next-line no-control-regex
+  return String(text ?? '').replace(/[\x00-\x1f\x7f]+/g, ' ');
+}
+
 export function stripAnsi(text) {
   // eslint-disable-next-line no-control-regex
   return text.replace(/\x1b\[[0-9;?]*[ -/]*[@-~]/g, '').replace(/\x1b\][^\x07\x1b]*(\x07|\x1b\\)/g, '');

web/src/repo.js

@@ -0,0 +1,61 @@
+// Repo / CI panel: git state of the current session's folder plus the Gitea CI
+// status of its HEAD commit (`devdesk attach --repo <session>`).
+
+const CI = {
+  success: ['passing', 'lt-status-completed'],
+  failure: ['failed', 'lt-status-failed'],
+  error: ['error', 'lt-status-failed'],
+  pending: ['running', 'lt-status-running'],
+  warning: ['warning', 'lt-status-pending'],
+};
+
+function link(href, text) {
+  const a = document.createElement('a');
+  a.href = href;
+  a.target = '_blank';
+  a.rel = 'noopener';
+  a.textContent = text;
+  return a;
+}
+
+export function renderRepo(root, repo) {
+  const field = (name) => root.querySelector(`[data-field="${name}"]`);
+  const set = (name, value) => field(name).replaceChildren(value);
+  const grid = root.querySelector('.dd-repo-grid');
+  const note = root.querySelector('.dd-repo-note');
+  const fix = root.querySelector('.dd-fix-ci');
+  fix.hidden = true;
+
+  // No repository: one line instead of a grid of dashes (devdesk#17).
+  if (!repo || !repo.git) {
+    root.dataset.state = 'empty';
+    grid.hidden = true;
+    note.textContent = repo ? `Not a git repository: ${repo.dir}` : 'Open a session to see its repository.';
+    return;
+  }
+
+  root.dataset.state = 'live';
+  grid.hidden = false;
+  set('repo', repo.url ? link(repo.url, repo.repo) : (repo.remote || 'no remote'));
+  const sync = repo.upstream
+    ? [repo.ahead ? `↑${repo.ahead}` : '', repo.behind ? `↓${repo.behind}` : ''].filter(Boolean).join(' ') || 'in sync'
+    : 'no upstream';
+  set('branch', `${repo.branch} @ ${repo.sha || '—'} · ${sync}`);
+  set('dirty', repo.dirty ? `${repo.dirty} changed` : 'clean');
+
+  const ci = field('ci');
+  const [label, cls] = repo.ci?.total ? (CI[repo.ci.state] || [repo.ci.state, 'lt-status-pending'])
+    : [repo.ahead ? 'not pushed' : 'no CI', ''];
+  ci.className = `lt-status ${cls}`;
+  ci.replaceChildren(repo.ci?.url ? link(repo.ci.url, label) : label);
+
+  set('prs', repo.url && repo.prs != null ? link(`${repo.url}/pulls`, `${repo.prs} open`) : '—');
+  note.textContent = repo.repo ? '' : 'Not a Gitea repository; CI status unavailable.';
+
+  if (repo.ci?.total && ['failure', 'error'].includes(repo.ci.state)) {
+    fix.hidden = false;
+    fix.dataset.askClaude = `CI is failing for ${repo.repo} on ${repo.branch} at ${repo.sha}`
+      + ` (${repo.ci.url || 'see Gitea Actions'}). Use the gitea MCP server to read the failed job's log,`
+      + ' find the cause, and fix it. Tell me the plan before pushing anything.';
+  }
+}

web/src/sessions.js

@@ -3,6 +3,11 @@
 
 import { fetchSessionList, sessionAction } from './connection.js';
 import { slugify } from './protocol.js';
+import { share } from './shared.js';
+import { el } from './dom.js';
+import { confirmDialog, openDialog, toast } from './ui.js';
+
+export { el };
 
 const RECENTS_KEY = 'devdesk.recents';
 const MAX_RECENTS = 12;
@@ -24,6 +29,11 @@ function writeRecents(recents) {
   }
 }
 
+// Session names this browser used most recently, newest first.
+export function recentNames() {
+  return readRecents().map((r) => r.name);
+}
+
 export function rememberSession(name) {
   if (name) writeRecents([{ name, at: Date.now() }, ...readRecents().filter((r) => r.name !== name)]);
 }
@@ -45,33 +55,42 @@ export function ago(epochSeconds) {
   return `${Math.floor(s / 86400)}d`;
 }
 
-export function el(tag, attrs = {}, ...children) {
-  const node = document.createElement(tag);
-  for (const [key, value] of Object.entries(attrs)) {
-    if (value === undefined || value === null || value === false) continue;
-    if (key === 'class') node.className = value;
-    else if (key.startsWith('on')) node.addEventListener(key.slice(2), value);
-    else node.setAttribute(key, value === true ? '' : value);
+
+// What Claude is doing in a session, from the devdesk-state-hook snapshot.
+// Returns { key, label, dot } for display; key is one of
+// waiting | working | idle | exited | running | dormant.
+export function sessionStatus(s) {
+  if (!s?.running) return { key: 'dormant', label: 'dormant', dot: 'lt-dot-idle' };
+  switch (s.status?.state) {
+    case 'waiting': return { key: 'waiting', label: 'needs you', dot: 'lt-dot-down' };
+    case 'working': return { key: 'working', label: 'working', dot: 'lt-dot-warn' };
+    case 'idle': return { key: 'idle', label: 'idle', dot: 'lt-dot-up' };
+    case 'exited': return { key: 'exited', label: 'Claude exited', dot: 'lt-dot-idle' };
+    default: return { key: 'running', label: 'running', dot: 'lt-dot-up' };
   }
-  node.append(...children.filter((c) => c !== null && c !== undefined));
-  return node;
 }
 
 export class SessionsPanel {
-  // hooks: onOpen(name), onPicker(), onEnded(name), onRenamed(from, to), onData(data)
-  constructor({ list, form, nameInput, select, refreshButton, pickerButton, status, hooks }) {
-    Object.assign(this, { list, nameInput, select, status, hooks });
+  // hooks: onOpen(name), onEnding(name), onEnded(name), onEndAborted(), onRenamed(from, to), onData(data)
+  constructor({ list, form, nameInput, select, refreshButton, newToggle, status, hooks }) {
+    Object.assign(this, { list, form, nameInput, select, newToggle, status, hooks });
     this.current = null;
     this.data = null;
-    this.busy = false;
+    this.pending = null;
     refreshButton.addEventListener('click', () => this.refresh());
-    pickerButton.addEventListener('click', () => hooks.onPicker());
+    newToggle.addEventListener('click', () => this.toggleForm());
     form.addEventListener('submit', (event) => {
       event.preventDefault();
       this.createFromForm();
     });
   }
 
+  toggleForm(open = this.form.hidden) {
+    this.form.hidden = !open;
+    this.newToggle.setAttribute('aria-expanded', String(open));
+    if (open) this.nameInput.focus();
+  }
+
   setCurrent(name) {
     this.current = name;
     if (this.data) this.render();
@@ -82,29 +101,46 @@ export class SessionsPanel {
     this.status.classList.toggle('is-error', isError);
   }
 
-  async refresh() {
-    if (this.busy) return;
-    this.busy = true;
+  // Concurrent callers share the request in flight (boot awaits the first list).
+  refresh() {
+    this.pending ??= this.load().finally(() => { this.pending = null; });
+    return this.pending;
+  }
+
+  // After an action: a poll already in flight may predate it, so fetch again.
+  async reload() {
+    await this.pending;
+    return this.refresh();
+  }
+
+  async load() {
+    let fetched = false;
     try {
       this.data = await fetchSessionList();
+      fetched = true;
+      share('sessions', this.data);
       if (!this.status.classList.contains('is-error')) this.setStatus('');
     } catch (err) {
       this.setStatus(`list unavailable: ${err.message}`, true);
-    } finally {
-      this.busy = false;
     }
     this.render();
-    this.hooks.onData?.(this.data);
+    this.hooks.onData?.(this.data, { fetched });
   }
 
-  async act(label, action, ...args) {
-    this.setStatus(`${label}…`);
+  // A list another tab fetched (devdesk#8).
+  accept(data) {
+    this.data = data;
+    this.render();
+    this.hooks.onData?.(this.data, { fetched: false });
+  }
+
+  // Side-channel action; failures become an error toast (devdesk#34).
+  async act(action, ...args) {
     try {
       await sessionAction(action, ...args);
-      this.setStatus('');
       return true;
     } catch (err) {
-      this.setStatus(err.message, true);
+      toast.error(err.message);
       return false;
     }
   }
@@ -113,42 +149,116 @@ export class SessionsPanel {
     const project = this.select.value;
     const name = slugify(this.nameInput.value) || project;
     if (!name) {
-      this.setStatus('Type a session name or pick a project.', true);
+      toast.warning('Type a session name or pick a project.');
       this.nameInput.focus();
       return;
     }
-    // With a project the session starts in that folder; without one, in the default folder.
-    if (project && !(await this.act('creating', 'new', name, project))) return;
+    if (!(await this.create(name, project))) return;
     this.nameInput.value = '';
     this.select.value = '';
+    this.toggleForm(false);
+  }
+
+  // With a project the session starts in that folder; without one, opening it
+  // creates it in the default folder (or its own project folder, by name).
+  async create(name, project) {
+    if (project && !(await this.act('new', name, project))) return false;
     this.hooks.onOpen(name);
+    return true;
+  }
+
+  projectOptions(select) {
+    const projects = this.data?.projects ?? [];
+    const chosen = select.value;
+    select.replaceChildren(
+      el('option', { value: '' }, `No project (${this.data?.root ?? 'default folder'})`),
+      ...projects.filter((p) => p.name !== this.data?.default)
+        .map((p) => el('option', { value: p.name, title: p.dir }, p.name)));
+    select.value = chosen;
+  }
+
+  // "+ New session…" from the switcher or the command palette (devdesk#33).
+  async newDialog() {
+    const name = el('input', { class: 'lt-input', maxlength: '64', placeholder: 'e.g. pbs-upgrade', spellcheck: 'false', autocomplete: 'off', 'aria-describedby': 'dd-new-hint' });
+    const project = el('select', { class: 'lt-select' });
+    this.projectOptions(project);
+    const hint = el('p', { class: 'dd-dialog-hint', id: 'dd-new-hint' }, 'Letters, numbers, - and _. Any name works; pick a project to start in its folder.');
+    project.addEventListener('change', () => {
+      if (!name.value.trim()) name.placeholder = project.value || 'e.g. pbs-upgrade';
+    });
+    const result = await openDialog({
+      title: 'New session',
+      body: el('div', { class: 'dd-dialog-fields' },
+        el('label', { class: 'dd-field' }, el('span', {}, 'Name'), name),
+        el('label', { class: 'dd-field' }, el('span', {}, 'Project folder'), project),
+        hint),
+      actions: [{ label: 'Cancel' }, { label: 'Open', primary: true }],
+      submit: () => {
+        const value = slugify(name.value) || project.value;
+        if (!value) {
+          hint.textContent = 'Type a name or pick a project.';
+          hint.classList.add('is-error');
+          name.focus();
+          return null;
+        }
+        return { name: value, project: project.value };
+      },
+    });
+    if (result) await this.create(result.name, result.project);
   }
 
   async rename(name) {
-    const answer = window.prompt(`Rename session "${name}" to:`, name);
-    if (answer === null) return;
-    const next = slugify(answer);
-    if (!next || next === name) {
-      if (!next) this.setStatus('Names use letters, numbers, - and _.', true);
-      return;
-    }
-    if (await this.act('renaming', 'rename', name, next)) {
+    const input = el('input', { class: 'lt-input', maxlength: '64', value: name, spellcheck: 'false', autocomplete: 'off', 'aria-describedby': 'dd-rename-hint' });
+    const hint = el('p', { class: 'dd-dialog-hint', id: 'dd-rename-hint' }, 'Claude keeps running; the conversation moves with the session.');
+    const next = await openDialog({
+      title: `Rename ${name}`,
+      size: 'sm',
+      body: el('div', { class: 'dd-dialog-fields' }, el('label', { class: 'dd-field' }, el('span', {}, 'New name'), input), hint),
+      actions: [{ label: 'Cancel' }, { label: 'Rename', primary: true }],
+      onOpen: () => {
+        input.select();
+        return input;
+      },
+      submit: () => {
+        const value = slugify(input.value);
+        if (!value) {
+          hint.textContent = 'Names use letters, numbers, - and _.';
+          hint.classList.add('is-error');
+          return null;
+        }
+        if (value !== name && this.data?.sessions?.some((x) => x.name === value)) {
+          hint.textContent = `A session called ${value} already exists.`;
+          hint.classList.add('is-error');
+          return null;
+        }
+        return value;
+      },
+    });
+    if (!next || next === name) return;
+    if (await this.act('rename', name, next)) {
       renameRecent(name, next);
       this.hooks.onRenamed(name, next);
-      await this.refresh();
+      toast.success(`Renamed ${name} → ${next}`);
+      await this.reload();
     }
   }
 
   async end(session) {
-    const question = session.running
-      ? `End session "${session.name}"?\n\nClaude in this session stops. The conversation stays in Claude's history (claude --resume).`
-      : `Forget dormant session "${session.name}"?`;
-    if (!window.confirm(question)) return;
+    const ok = await confirmDialog({
+      title: session.running ? `End ${session.name}?` : `Forget ${session.name}?`,
+      text: session.running
+        ? 'Claude in this session stops and the session closes. The conversation stays in Claude\'s history (claude --resume).'
+        : 'This dormant session is removed from the list. Its conversation stays in Claude\'s history.',
+      confirmLabel: session.running ? 'End session' : 'Forget',
+      danger: true,
+    });
+    if (!ok) return;
     if (session.name === this.current) this.hooks.onEnding?.(session.name);
-    if (await this.act(session.running ? 'ending' : 'forgetting', 'end', session.name)) {
+    if (await this.act('end', session.name)) {
       forgetRecent(session.name);
       this.hooks.onEnded(session.name);
-      await this.refresh();
+      toast.success(session.running ? `Ended ${session.name}` : `Forgot ${session.name}`);
+      await this.reload();
     } else if (session.name === this.current) {
       this.hooks.onEndAborted?.();
     }
@@ -156,17 +266,29 @@ export class SessionsPanel {
 
   renderSession(s) {
     const isCurrent = s.name === this.current;
-    const ctx = s.context?.used_pct != null ? ` · ctx ${Math.floor(s.context.used_pct)}%` : '';
+    const status = sessionStatus(s);
+    const ctx = s.context?.used_pct != null ? `ctx ${Math.floor(s.context.used_pct)}%` : '';
+    const since = s.status?.since ? ago(s.status.since) : ago(s.activity);
+    const model = isCurrent && s.context?.model ? s.context.model.replace(/^Claude\s+/i, '') : '';
     const meta = s.running
-      ? `${s.attached} attached · ${ago(s.activity)}${ctx}`
+      ? [`${status.label}${since && since !== 'now' ? ` ${since}` : ''}`, ctx, model, s.attached ? `${s.attached} open` : '']
+        .filter(Boolean).join(' · ')
       : 'dormant · resumes Claude';
+    const pct = s.context?.used_pct;
+    const title = [
+      s.dir,
+      status.key === 'waiting' && s.status?.message,
+      s.context?.model && `${s.context.model}${s.context.cost_usd != null ? ` · $${s.context.cost_usd.toFixed(2)}` : ''}`,
+    ].filter(Boolean).join('\n');
     const iconButton = (label, glyph, onclick, extra = '') =>
       el('button', { class: `dd-icon-btn ${extra}`, type: 'button', title: label, 'aria-label': `${label} ${s.name}`, onclick }, glyph);
-    return el('li', { class: `dd-session-item${isCurrent ? ' is-current' : ''}${s.running ? '' : ' is-dormant'}` },
-      el('button', { class: 'dd-session-open', type: 'button', title: s.dir || '', onclick: () => this.hooks.onOpen(s.name) },
-        el('span', { class: `lt-dot ${s.running ? 'lt-dot-up' : 'lt-dot-idle'}` }),
+    return el('li', { class: `dd-session-item is-${status.key}${isCurrent ? ' is-current' : ''}` },
+      el('button', { class: 'dd-session-open', type: 'button', title, onclick: () => this.hooks.onOpen(s.name) },
+        el('span', { class: `lt-dot ${status.dot}` }),
         el('span', { class: 'dd-session-name' }, s.name),
-        el('span', { class: 'dd-session-meta' }, meta)),
+        el('span', { class: 'dd-session-meta' }, meta),
+        pct != null ? el('span', { class: `dd-ctx${pct >= 90 ? ' is-full' : pct >= 70 ? ' is-high' : ''}`, 'aria-hidden': 'true' },
+          el('span', { class: 'dd-ctx-fill', style: `width:${Math.min(100, pct)}%` })) : null),
       el('span', { class: 'dd-session-actions' },
         iconButton('Rename', '✎', () => this.rename(s.name)),
         el('a', {
@@ -199,12 +321,6 @@ export class SessionsPanel {
     if (!items.length) items.push(el('li', { class: 'dd-empty' }, 'No sessions yet.'));
     this.list.replaceChildren(...items);
 
-    const projects = this.data?.projects ?? [];
-    const chosen = this.select.value;
-    this.select.replaceChildren(
-      el('option', { value: '' }, `No project (${this.data?.root ?? 'default folder'})`),
-      ...projects.filter((p) => p.name !== this.data?.default)
-        .map((p) => el('option', { value: p.name, title: p.dir }, p.name)));
-    this.select.value = chosen;
+    this.projectOptions(this.select);
   }
 }

web/src/shared.js

@@ -0,0 +1,31 @@
+// One tab polls for every open DevDesk tab (devdesk#8): whoever fetches the
+// session list or the alerts broadcasts the result, and a tab that heard a fresh
+// result recently skips its own poll. Each poll costs a ttyd client and a PTY.
+
+const channel = typeof BroadcastChannel === 'function' ? new BroadcastChannel('devdesk') : null;
+const heard = new Map();
+const handlers = new Map();
+
+channel?.addEventListener('message', (event) => {
+  const { key, data } = event.data ?? {};
+  const handler = handlers.get(key);
+  if (!handler) return;
+  heard.set(key, Date.now());
+  handler(data);
+});
+
+export function onShared(key, handler) {
+  handlers.set(key, handler);
+}
+
+export function share(key, data) {
+  try {
+    channel?.postMessage({ key, data });
+  } catch {
+    // Not cloneable or channel closed: the other tabs just poll themselves.
+  }
+}
+
+export function heardWithin(key, ms) {
+  return Date.now() - (heard.get(key) ?? 0) < ms;
+}

web/src/term.js

@@ -3,32 +3,77 @@ import { FitAddon } from '@xterm/addon-fit';
 import { WebglAddon } from '@xterm/addon-webgl';
 import { WebLinksAddon } from '@xterm/addon-web-links';
 import { Unicode11Addon } from '@xterm/addon-unicode11';
-import { ClipboardAddon } from '@xterm/addon-clipboard';
+import { Base64, ClipboardAddon } from '@xterm/addon-clipboard';
 
-// LotusGuild TDS tokens (web_template base.css :root) mapped onto the ANSI palette.
-export const THEME = Object.freeze({
-  background: '#010304',
-  foreground: '#c4d9ee',
-  cursor: '#FF6B00',
-  cursorAccent: '#010304',
-  selectionBackground: 'rgba(0, 212, 255, 0.30)',
-  selectionInactiveBackground: 'rgba(0, 212, 255, 0.15)',
-  black: '#0d1520',
-  red: '#FF2D55',
-  green: '#00FF88',
-  yellow: '#FFB300',
-  blue: '#3A8DFF',
-  magenta: '#BF5FFF',
-  cyan: '#00D4FF',
-  white: '#c4d9ee',
-  brightBlack: '#3e607a',
-  brightRed: '#FF5C7A',
-  brightGreen: '#33FFAA',
-  brightYellow: '#FFD700',
-  brightBlue: '#6AA8FF',
-  brightMagenta: '#D08CFF',
-  brightCyan: '#33DFFF',
-  brightWhite: '#FFFFFF',
+// Terminal output (tmux copy-mode, Claude) may *write* the browser clipboard
+// via OSC 52, but must never read it: anything printed could exfiltrate it (devdesk#7).
+const writeOnlyClipboard = {
+  readText: () => '',
+  writeText: (selection, text) => {
+    if (selection === 'c') return navigator.clipboard?.writeText(text).catch(() => {});
+    return undefined;
+  },
+};
+
+// Terminal palettes from the LotusGuild TDS tokens (devdesk#31).
+//
+// DevDesk runs Claude with its `dark-ansi` theme, so Claude draws with these 16
+// colours instead of fixed RGB: body text is bright white, secondary text is
+// white, the band behind your messages is bright black, and text on coloured
+// backgrounds is black. Claude's theme is per process and printed text keeps its
+// colours, so instead of switching Claude, the light palette inverts the grey
+// ramp: bright white is ink, white is muted ink, bright black a light band and
+// black the page. Anything written for dark terminals, Claude's scrollback
+// included, stays readable, and toggling is instant.
+export const THEMES = Object.freeze({
+  dark: Object.freeze({
+    background: '#010304',
+    foreground: '#c4d9ee',
+    cursor: '#FF6B00',
+    cursorAccent: '#010304',
+    selectionBackground: 'rgba(0, 212, 255, 0.30)',
+    selectionInactiveBackground: 'rgba(0, 212, 255, 0.15)',
+    black: '#0d1520',
+    red: '#FF2D55',
+    green: '#00FF88',
+    yellow: '#FFB300',
+    blue: '#3A8DFF',
+    magenta: '#BF5FFF',
+    cyan: '#00D4FF',
+    white: '#9fb6cc',
+    brightBlack: '#3e607a',
+    brightRed: '#FF5C7A',
+    brightGreen: '#33FFAA',
+    brightYellow: '#FFD700',
+    brightBlue: '#6AA8FF',
+    brightMagenta: '#D08CFF',
+    brightCyan: '#33DFFF',
+    brightWhite: '#FFFFFF',
+  }),
+  light: Object.freeze({
+    background: '#f4f6fa',
+    foreground: '#16202e',
+    cursor: '#c44e00',
+    cursorAccent: '#f4f6fa',
+    selectionBackground: 'rgba(0, 98, 184, 0.22)',
+    selectionInactiveBackground: 'rgba(0, 98, 184, 0.12)',
+    black: '#eef1f6',
+    red: '#b5001f',
+    green: '#006d35',
+    yellow: '#8a5a00',
+    blue: '#1f4fbf',
+    magenta: '#6b2fb8',
+    cyan: '#006b86',
+    white: '#556578',
+    brightBlack: '#c9d1dc',
+    brightRed: '#cc1f3d',
+    brightGreen: '#00803e',
+    brightYellow: '#9a6400',
+    brightBlue: '#0062b8',
+    brightMagenta: '#7e3fd0',
+    brightCyan: '#007f9e',
+    brightWhite: '#16202e',
+  }),
 });
 
 export const FONT_FAMILY = '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace';
@@ -45,7 +90,7 @@ export async function loadFonts(size) {
   }
 }
 
-export function createTerminal(container, { fontSize, onShiftEnter }) {
+export function createTerminal(container, { fontSize, theme = 'dark', onShiftEnter }) {
   const term = new Terminal({
     fontFamily: FONT_FAMILY,
     fontSize,
@@ -55,14 +100,14 @@ export function createTerminal(container, { fontSize, onShiftEnter }) {
     allowProposedApi: true, // unicode11
     macOptionIsMeta: true,
     drawBoldTextInBrightColors: false,
-    theme: THEME,
+    theme: THEMES[theme],
   });
 
   const fit = new FitAddon();
   term.loadAddon(fit);
   term.loadAddon(new Unicode11Addon());
   term.unicode.activeVersion = '11';
-  term.loadAddon(new ClipboardAddon()); // OSC 52 from tmux copy-mode / Claude
+  term.loadAddon(new ClipboardAddon(new Base64(), writeOnlyClipboard));
   term.loadAddon(new WebLinksAddon((event, uri) => {
     event.preventDefault();
     window.open(uri, '_blank', 'noopener');
@@ -90,6 +135,8 @@ export function createTerminal(container, { fontSize, onShiftEnter }) {
 
   term.open(container);
 
+  // Touch devices: the DOM renderer is more reliable at high DPR than WebGL.
+  if (window.matchMedia?.('(pointer: coarse)').matches) return { term, fit };
   try {
     const webgl = new WebglAddon();
     webgl.onContextLoss(() => webgl.dispose());

web/src/theme.js

@@ -0,0 +1,62 @@
+// Dark / light theme, interchangeable with web_template's lt.theme (devdesk#31):
+// same localStorage key (lt_theme), same data-theme attribute on <html>, the OS
+// preference while nothing is saved, and tabs follow each other via `storage`.
+// The inline script in index.template.html applies it before first paint.
+
+const KEY = 'lt_theme';
+const prefersLight = window.matchMedia('(prefers-color-scheme: light)');
+const listeners = new Set();
+
+function saved() {
+  try {
+    const value = localStorage.getItem(KEY);
+    return value === 'light' || value === 'dark' ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+export function getTheme() {
+  return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+}
+
+function apply(theme) {
+  const root = document.documentElement;
+  root.setAttribute('data-theme', theme);
+  root.style.colorScheme = theme;
+  document.querySelector('meta[name="theme-color"]')?.setAttribute('content', theme === 'light' ? '#edf0f5' : '#030508');
+  const next = theme === 'light' ? 'dark' : 'light';
+  for (const button of document.querySelectorAll('.lt-theme-btn')) {
+    button.textContent = theme === 'light' ? '◐' : '☀';
+    button.setAttribute('aria-label', `Switch to ${next} mode`);
+    button.title = `Switch to ${next} mode`;
+  }
+  for (const listener of listeners) listener(theme);
+}
+
+export function setTheme(theme) {
+  try {
+    localStorage.setItem(KEY, theme);
+  } catch {
+    // Private mode: the choice lasts until the tab closes.
+  }
+  apply(theme);
+}
+
+export function toggleTheme() {
+  setTheme(getTheme() === 'light' ? 'dark' : 'light');
+}
+
+export function onThemeChange(listener) {
+  listeners.add(listener);
+}
+
+export function initTheme() {
+  apply(saved() ?? (prefersLight.matches ? 'light' : 'dark'));
+  prefersLight.addEventListener('change', (event) => {
+    if (!saved()) apply(event.matches ? 'light' : 'dark');
+  });
+  window.addEventListener('storage', (event) => {
+    if (event.key === KEY) apply(saved() ?? (prefersLight.matches ? 'light' : 'dark'));
+  });
+}

web/src/ui.js

@@ -0,0 +1,295 @@
+// House UI pieces built on web_template's base.css classes, without base.js
+// (its global key handler swallows Esc, which interrupts Claude, and every toast
+// beeps): toasts (devdesk#34), dialogs (#33) and the command palette (#32).
+
+import { el } from './dom.js';
+
+// ---------------------------------------------------------------- toasts
+
+const ICONS = { success: '✓', error: '✗', warning: '!', info: 'i' };
+
+function toastContainer() {
+  let box = document.getElementById('lt-toast-container');
+  if (!box) {
+    box = el('div', { id: 'lt-toast-container', 'aria-live': 'polite' });
+    document.body.append(box);
+  }
+  return box;
+}
+
+function dismiss(node) {
+  if (!node.isConnected) return;
+  clearTimeout(node.dismissTimer);
+  node.classList.add('is-leaving');
+  setTimeout(() => node.remove(), 250);
+}
+
+export function toast(message, type = 'info', duration = 4000) {
+  const box = toastContainer();
+  // At most four on screen: the oldest goes first.
+  while (box.children.length >= 4) box.firstElementChild.remove();
+  const node = el('div', { class: `lt-toast lt-toast-${type}`, role: type === 'error' ? 'alert' : 'status' },
+    el('span', { class: 'lt-toast-icon', 'aria-hidden': 'true' }, `[${ICONS[type] || 'i'}]`),
+    el('span', { class: 'lt-toast-msg' }, message),
+    el('button', { type: 'button', class: 'lt-toast-close', 'aria-label': 'Dismiss', onclick: () => dismiss(node) }, '✕'),
+    el('div', { class: 'lt-toast-progress', style: `animation-duration:${duration}ms` }));
+  box.append(node);
+  node.dismissTimer = setTimeout(() => dismiss(node), duration);
+  node.addEventListener('mouseenter', () => clearTimeout(node.dismissTimer));
+  node.addEventListener('mouseleave', () => { node.dismissTimer = setTimeout(() => dismiss(node), 1500); });
+}
+
+toast.success = (message, duration) => toast(message, 'success', duration);
+toast.error = (message, duration = 8000) => toast(message, 'error', duration);
+toast.warning = (message, duration) => toast(message, 'warning', duration);
+toast.info = (message, duration) => toast(message, 'info', duration);
+
+// ---------------------------------------------------------------- dialogs
+
+let openDialogs = 0;
+export const dialogOpen = () => openDialogs > 0 || document.getElementById('lt-cmd-overlay')?.classList.contains('is-open');
+
+// A .lt-modal dialog. `body` is a node; `actions` are { label, value, primary,
+// danger }. Resolves with the chosen action's value (or `submit()`'s value when
+// a form is submitted), or null when dismissed (✕, Esc, backdrop).
+export function openDialog({ title, body, actions = [], danger = false, size = '', onOpen, submit }) {
+  return new Promise((resolve) => {
+    const opener = document.activeElement;
+    let done = false;
+    const close = (value) => {
+      if (done) return;
+      done = true;
+      openDialogs -= 1;
+      overlay.remove();
+      if (opener?.isConnected) opener.focus();
+      resolve(value);
+    };
+    const titleId = `dd-dialog-${Date.now()}`;
+    const form = el('form', { class: 'lt-modal-body dd-dialog-body', novalidate: '' }, body);
+    form.addEventListener('submit', (event) => {
+      event.preventDefault();
+      const value = submit ? submit() : true;
+      if (value !== undefined && value !== null && value !== false) close(value);
+    });
+    const buttons = actions.map((action) => el('button', {
+      type: action.primary ? 'submit' : 'button',
+      class: `lt-btn lt-btn-sm${action.primary ? (action.danger ? ' lt-btn-danger' : ' lt-btn-primary') : ' lt-btn-ghost'}`,
+      onclick: action.primary ? null : () => close(action.value ?? null),
+    }, action.label));
+    // The primary button submits the form, so Enter in a field does the same.
+    for (const button of buttons) {
+      if (button.type === 'submit') button.setAttribute('form', titleId);
+    }
+    form.id = titleId;
+    const overlay = el('div', { class: 'lt-modal-overlay is-open dd-dialog', role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': `${titleId}-title` },
+      el('div', { class: `lt-modal${size ? ` lt-modal-${size}` : ''}` },
+        el('div', { class: `lt-modal-header${danger ? ' lt-modal-header--danger' : ''}` },
+          el('h2', { class: 'lt-modal-title', id: `${titleId}-title` }, title),
+          el('button', { type: 'button', class: 'lt-modal-close', 'aria-label': 'Close', onclick: () => close(null) }, '✕')),
+        form,
+        buttons.length ? el('div', { class: 'lt-modal-footer' }, ...buttons) : null));
+    overlay.addEventListener('mousedown', (event) => {
+      if (event.target === overlay) close(null);
+    });
+    overlay.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        close(null);
+        return;
+      }
+      if (event.key === 'Tab') trapFocus(overlay, event);
+    });
+    openDialogs += 1;
+    document.body.append(overlay);
+    (onOpen?.(overlay) ?? overlay.querySelector('input, select, textarea, .lt-btn-primary, .lt-btn-danger, .lt-modal-close'))?.focus?.();
+  });
+}
+
+function trapFocus(root, event) {
+  const items = [...root.querySelectorAll('button, input, select, textarea, a[href], [tabindex]:not([tabindex="-1"])')]
+    .filter((node) => !node.disabled && node.offsetParent !== null);
+  if (!items.length) return;
+  const first = items[0];
+  const last = items[items.length - 1];
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+
+export function confirmDialog({ title, text, confirmLabel = 'OK', danger = false }) {
+  return openDialog({
+    title,
+    danger,
+    size: 'sm',
+    body: el('p', { class: 'dd-dialog-text' }, text),
+    actions: [{ label: 'Cancel', value: false }, { label: confirmLabel, primary: true, danger }],
+  }).then(Boolean);
+}
+
+// ---------------------------------------------------------------- command palette
+
+const RECENT_KEY = 'lt_cmd_recent';
+
+function readRecent() {
+  try {
+    const list = JSON.parse(localStorage.getItem(RECENT_KEY) || '[]');
+    return Array.isArray(list) ? list : [];
+  } catch {
+    return [];
+  }
+}
+
+function pushRecent(id) {
+  try {
+    localStorage.setItem(RECENT_KEY, JSON.stringify([id, ...readRecent().filter((x) => x !== id)].slice(0, 5)));
+  } catch {
+    // Private mode: no recents.
+  }
+}
+
+// Commands: { id, label, group, icon?, hint?, kbd?, keywords?, run }. `getCommands`
+// is called on every open, so the list reflects the current sessions and state.
+export class CommandPalette {
+  constructor(getCommands) {
+    this.getCommands = getCommands;
+    this.commands = [];
+    this.visible = [];
+    this.selected = 0;
+    this.opener = null;
+    this.input = el('input', {
+      class: 'lt-cmd-input', type: 'text', placeholder: 'Type a command or a session name…',
+      autocomplete: 'off', spellcheck: 'false', 'aria-label': 'Command', role: 'combobox',
+      'aria-controls': 'dd-cmd-results', 'aria-expanded': 'true',
+    });
+    this.results = el('div', { class: 'lt-cmd-results', id: 'dd-cmd-results', role: 'listbox' });
+    this.overlay = el('div', { class: 'lt-cmd-overlay', id: 'lt-cmd-overlay', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Command palette' },
+      el('div', { class: 'lt-cmd-palette', id: 'lt-cmd-palette' },
+        el('div', { class: 'lt-cmd-input-wrap' }, el('span', { class: 'lt-cmd-prompt', 'aria-hidden': 'true' }, '>'), this.input),
+        this.results,
+        el('div', { class: 'lt-cmd-footer' },
+          el('span', {}, el('kbd', {}, '↑'), el('kbd', {}, '↓'), ' move'),
+          el('span', {}, el('kbd', {}, '⏎'), ' run'),
+          el('span', {}, el('kbd', {}, 'Esc'), ' close'))));
+    document.body.append(this.overlay);
+    this.input.addEventListener('input', () => this.render());
+    this.input.addEventListener('keydown', (event) => this.onKey(event));
+    this.overlay.addEventListener('mousedown', (event) => {
+      if (event.target === this.overlay) this.close();
+    });
+  }
+
+  get isOpen() {
+    return this.overlay.classList.contains('is-open');
+  }
+
+  open(query = '') {
+    this.opener = document.activeElement;
+    this.commands = this.getCommands();
+    this.overlay.classList.add('is-open');
+    this.input.value = query;
+    this.render();
+    this.input.focus();
+  }
+
+  close({ restoreFocus = true } = {}) {
+    if (!this.isOpen) return;
+    this.overlay.classList.remove('is-open');
+    if (restoreFocus && this.opener?.isConnected) this.opener.focus();
+  }
+
+  onKey(event) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      this.move(event.key === 'ArrowDown' ? 1 : -1);
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      this.run(this.visible[this.selected]);
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.close();
+    } else if (event.key === 'Tab') {
+      event.preventDefault();
+    }
+  }
+
+  move(step) {
+    if (!this.visible.length) return;
+    this.selected = (this.selected + step + this.visible.length) % this.visible.length;
+    this.highlight();
+  }
+
+  highlight() {
+    const items = this.results.querySelectorAll('.lt-cmd-item');
+    items.forEach((item, i) => {
+      item.classList.toggle('is-selected', i === this.selected);
+      item.setAttribute('aria-selected', String(i === this.selected));
+    });
+    const current = items[this.selected];
+    if (current) {
+      current.scrollIntoView({ block: 'nearest' });
+      this.input.setAttribute('aria-activedescendant', current.id);
+    }
+  }
+
+  run(command) {
+    if (!command) return;
+    pushRecent(command.id);
+    // The command decides where focus goes (usually the terminal).
+    this.close({ restoreFocus: false });
+    command.run();
+  }
+
+  render() {
+    const words = this.input.value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    const matches = this.commands.filter((c) => {
+      const text = `${c.label} ${c.group} ${c.keywords ?? ''} ${c.hint ?? ''}`.toLowerCase();
+      return words.every((w) => text.includes(w));
+    });
+    const groups = new Map();
+    if (!words.length) {
+      const recent = readRecent().map((id) => matches.find((c) => c.id === id)).filter(Boolean).slice(0, 3);
+      if (recent.length) groups.set('Recent', recent);
+    }
+    for (const command of matches) {
+      if (!groups.has(command.group)) groups.set(command.group, []);
+      groups.get(command.group).push(command);
+    }
+    this.visible = [...groups.values()].flat();
+    this.selected = 0;
+    if (!this.visible.length) {
+      this.results.replaceChildren(el('div', { class: 'lt-cmd-empty' }, `No command matches “${this.input.value.trim()}”`));
+      return;
+    }
+    let index = 0;
+    const nodes = [];
+    for (const [group, commands] of groups) {
+      nodes.push(el('div', { class: 'lt-cmd-group-label', role: 'presentation' }, group));
+      for (const command of commands) {
+        const i = index;
+        nodes.push(el('div', {
+          class: 'lt-cmd-item', id: `dd-cmd-${i}`, role: 'option',
+          onclick: () => this.run(command),
+          onmousemove: () => {
+            if (this.selected !== i) {
+              this.selected = i;
+              this.highlight();
+            }
+          },
+        },
+        el('span', { class: 'lt-cmd-item-icon', 'aria-hidden': 'true' }, command.icon || '◦'),
+        el('span', { class: 'lt-cmd-item-label' }, command.label),
+        command.hint ? el('span', { class: 'dd-cmd-hint' }, command.hint) : null,
+        command.kbd ? el('span', { class: 'lt-cmd-item-kbd' }, command.kbd) : null));
+        index += 1;
+      }
+    }
+    this.results.replaceChildren(...nodes);
+    this.highlight();
+  }
+}

web/src/widgets.js

@@ -1,7 +1,6 @@
-// Sidebar widgets. In v1 only Sessions is live; Repo/CI and Claude Context get
-// data from devdesk-api in v1.1, Ops Alerts in v2. The "Ask Claude" pattern is
-// already wired: any [data-ask-claude] button types its prompt into the current
-// session without pressing Enter, so you can review it before sending.
+// "Ask Claude": any [data-ask-claude] button (Ops Alerts, Repo/CI) types its
+// prompt into the current session without pressing Enter, so you can review it
+// before sending.
 
 export function bindAskClaude(root, send) {
   root.addEventListener('click', (event) => {

web/styles.css

@@ -37,9 +37,12 @@ body.dd-app::after {
 }
 
 .dd-header .lt-header-left {
+  flex: 1 1 auto;
   min-width: 0;
   gap: var(--space-lg);
 }
+.dd-header .lt-header-right { flex: 0 0 auto; }
+.dd-session { flex: 0 1 auto; }
 
 .dd-session {
   display: flex;
@@ -57,26 +60,115 @@ body.dd-app::after {
   max-width: 38vw;
 }
 
-.dd-sso {
-  cursor: default;
-  background: transparent;
+.dd-session-chip {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 6px;
+  max-width: 34vw;
+  padding: 3px 8px;
+  border: 1px solid var(--accent-cyan-border);
+  background: var(--accent-cyan-dim);
+  color: var(--accent-cyan);
   font-family: var(--font-mono);
-}
-.dd-sso[data-state="ok"] { color: var(--accent-green); background: var(--accent-green-dim); }
-.dd-sso[data-state="unknown"] { color: var(--text-muted); }
-.dd-sso[data-state="expired"] {
-  color: var(--accent-red);
-  background: var(--accent-red-dim);
-  text-shadow: var(--glow-red);
+  font-size: 0.78rem;
+  font-weight: 700;
   cursor: pointer;
 }
+.dd-session-chip:hover,
+.dd-session-chip[aria-expanded="true"] { border-color: var(--accent-cyan); box-shadow: var(--box-glow-cyan); }
+.dd-session-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dd-caret { color: var(--text-muted); font-size: 0.7rem; }
+/* Current session's Claude state as a dot on the chip (devdesk#13). */
+.dd-state-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
+.dd-session-chip[data-state="working"] .dd-state-dot { background: var(--accent-amber); box-shadow: 0 0 6px var(--accent-amber); animation: lt-pulse 1.2s ease-in-out infinite; }
+.dd-session-chip[data-state="waiting"] { border-color: rgba(255, 45, 85, 0.6); color: var(--accent-red); background: var(--accent-red-dim); }
+.dd-session-chip[data-state="waiting"] .dd-state-dot { background: var(--accent-red); box-shadow: 0 0 6px var(--accent-red); animation: lt-pulse 1.2s ease-in-out infinite; }
+.dd-session-chip[data-state="idle"] .dd-state-dot { background: var(--accent-green); }
 
-.dd-tools .lt-btn[data-state="granted"] { color: var(--accent-green); border-color: var(--accent-green-border); }
-.dd-tools .lt-btn[data-state="denied"] { color: var(--accent-red); }
+/* Connection status: a dot; the word only when it isn't "live". */
+.dd-ws[data-state="connected"] #ws-label { display: none; }
+
+.dd-panels { position: relative; clip-path: none; } /* the corner cut hid the active border */
+@media (prefers-reduced-motion: reduce), (pointer: coarse) {
+  .dd-attention,
+  .dd-session-chip .dd-state-dot { animation: none !important; }
+}
+/* base.css draws keys in --text-dim (~1.5:1 on this background). */
+.dd-sidebar .lt-kv-key { color: var(--text-secondary); font-size: 0.7rem; }
 #sidebar-toggle[aria-expanded="true"] {
   color: var(--accent-orange);
   border-color: var(--accent-orange-border);
 }
+.dd-badge {
+  margin-left: 6px;
+  min-width: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--accent-amber);
+  color: var(--bg-primary);
+  font-size: 0.62rem;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+}
+.dd-badge.is-urgent { background: var(--accent-red); box-shadow: 0 0 8px var(--accent-red); }
+.dd-badge[hidden] { display: none; }
+
+/* ---- menus (session switcher, ⋯) ----------------------------------------------- */
+.dd-session,
+.dd-more { position: relative; }
+.dd-more-toggle { font-size: 1rem; line-height: 1; padding-inline: 8px; }
+.dd-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  z-index: 40;
+  min-width: 240px;
+  max-width: min(360px, calc(100vw - 16px));
+  max-height: 70vh;
+  overflow-y: auto;
+  padding: 4px;
+  border: 1px solid var(--accent-cyan-border);
+  background: var(--bg-secondary);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), var(--box-glow-cyan);
+}
+.dd-menu[hidden] { display: none; }
+.dd-switcher { left: 0; }
+.dd-more-menu { right: 0; }
+.dd-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  width: 100%;
+  padding: 6px 8px;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  text-align: left;
+  cursor: pointer;
+}
+.dd-menu-item:hover:not(:disabled),
+.dd-menu-item:focus-visible { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+.dd-menu-item:disabled { color: var(--text-muted); cursor: default; }
+.dd-menu-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  font-size: 0.74rem;
+  color: var(--text-secondary);
+}
+.dd-menu-inline { display: inline-flex; align-items: center; gap: 4px; color: var(--text-primary); }
+.dd-menu-sep { height: 1px; margin: 4px 0; background: var(--border-dim); }
+.dd-menu-note { padding: 6px 8px; color: var(--text-muted); font-size: 0.72rem; }
+.dd-menu-foot { padding: 6px 8px 2px; border-top: 1px solid var(--border-dim); margin-top: 4px; color: var(--text-muted); font-size: 0.62rem; }
+.dd-switch-item.is-current { border-color: var(--accent-orange-border); background: var(--accent-orange-dim); }
+.dd-switch-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
+.dd-switch-meta { color: var(--text-muted); font-size: 0.64rem; white-space: nowrap; }
+.dd-switch-item.is-waiting .dd-switch-meta { color: var(--accent-red); }
+.dd-switch-item.is-working .dd-switch-meta { color: var(--accent-amber); }
 
 /* ---- layout ---------------------------------------------------------------- */
 .dd-main {
@@ -134,14 +226,8 @@ body.dd-sidebar-open .dd-sidebar {
   justify-content: flex-start;
 }
 
-.dd-soon {
-  margin-left: auto;
-  color: var(--text-muted);
-  letter-spacing: 0.12em;
-}
-
+.dd-header-actions { margin-left: auto; display: inline-flex; gap: var(--space-sm); }
 .dd-header-action {
-  margin-left: auto;
   background: none;
   border: 0;
   color: var(--accent-cyan);
@@ -153,7 +239,7 @@ body.dd-sidebar-open .dd-sidebar {
 
 .dd-muted {
   color: var(--text-muted);
-  font-size: 0.68rem;
+  font-size: 0.7rem;
 }
 
 .dd-stub-note {
@@ -193,7 +279,7 @@ body.dd-sidebar-open .dd-sidebar {
   text-align: left;
 }
 .dd-session-open:hover { background: var(--accent-cyan-dim); }
-.dd-session-open .lt-dot { grid-row: 1 / span 2; }
+.dd-session-open .lt-dot { grid-row: 1 / span 3; }
 
 .dd-session-name {
   font-size: 0.78rem;
@@ -204,13 +290,48 @@ body.dd-sidebar-open .dd-sidebar {
 }
 
 .dd-session-meta {
-  font-size: 0.62rem;
-  color: var(--text-muted);
+  font-size: 0.68rem;
+  color: var(--text-secondary);
 }
 
+/* Context-window fill under each session (devdesk#17). */
+.dd-ctx {
+  grid-column: 2;
+  height: 2px;
+  margin-top: 3px;
+  background: var(--bg-tertiary);
+  overflow: hidden;
+}
+.dd-ctx-fill { display: block; height: 100%; background: var(--accent-cyan); }
+.dd-ctx.is-high .dd-ctx-fill { background: var(--accent-amber); }
+.dd-ctx.is-full .dd-ctx-fill { background: var(--accent-red); }
+
 .dd-session-item.is-recent .dd-session-name { color: var(--text-secondary); font-weight: 400; }
 
 .dd-session-item.is-dormant .dd-session-name { color: var(--text-secondary); }
+.dd-session-item.is-waiting { border-color: rgba(255, 45, 85, 0.45); background: var(--accent-red-dim); }
+.dd-session-item.is-waiting .dd-session-meta { color: var(--accent-red); }
+.dd-session-item.is-working .dd-session-meta { color: var(--accent-amber); }
+
+/* base.css sets display on .lt-btn/.lt-chip, which beats the [hidden] attribute. */
+.dd-header [hidden] { display: none !important; }
+
+/* Header chip: other sessions waiting on you. */
+.dd-attention {
+  text-transform: none;
+  letter-spacing: 0;
+  max-width: 22vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: none;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  color: var(--accent-red);
+  background: var(--accent-red-dim);
+  animation: lt-pulse 1.6s ease-in-out infinite;
+}
+.dd-attention.is-active { display: inline-flex; }
 
 .dd-session-actions {
   display: flex;
@@ -258,6 +379,7 @@ body.dd-sidebar-open .dd-sidebar {
   padding: 4px 6px;
 }
 
+.dd-new-session[hidden] { display: none; }
 .dd-new-session {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -275,20 +397,65 @@ body.dd-sidebar-open .dd-sidebar {
   gap: var(--space-sm);
 }
 
-/* ---- stub widgets ------------------------------------------------------------ */
+/* ---- ops alerts --------------------------------------------------------------- */
+.dd-alert-count { margin-left: auto; }
+.dd-alert-count:empty { display: none; }
+.dd-alert-list { display: flex; flex-direction: column; gap: var(--space-sm); }
 .dd-alert {
   display: flex;
-  align-items: center;
-  gap: var(--space-sm);
+  flex-direction: column;
+  gap: 3px;
+  padding: 6px 8px;
+  border: 1px solid var(--border-dim);
+  border-left: 2px solid var(--accent-amber);
   font-size: 0.72rem;
-  color: var(--text-secondary);
 }
-.dd-alert-text { flex: 1 1 auto; }
+.dd-alert:has(.lt-chip-critical) { border-left-color: var(--accent-red); }
+.dd-alert-head { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
+.dd-alert-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dd-alert-age { margin-left: auto; white-space: nowrap; }
+.dd-alert-instances { overflow-wrap: anywhere; }
+.dd-alert-summary { color: var(--text-secondary); }
+.dd-alert .dd-ask { align-self: flex-start; margin-top: 2px; }
+.dd-all-clear { display: flex; align-items: center; gap: var(--space-sm); color: var(--accent-green); font-size: 0.74rem; }
 
-.dd-context-grid { margin-top: var(--space-sm); }
+[data-state="stub"] .lt-section-body { opacity: 0.75; }
+.dd-repo-grid[hidden] { display: none; }
+.dd-repo-note:empty { display: none; }
+.dd-fix-ci { margin-top: var(--space-sm); }
+.dd-fix-ci[hidden] { display: none; }
 
-[data-state="stub"] .lt-section-body,
-#widget-context[data-state="empty"] .lt-kv-grid { opacity: 0.6; }
+/* ---- file drop / upload ------------------------------------------------------ */
+.dd-drop-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed var(--accent-cyan);
+  background: rgba(0, 212, 255, 0.08);
+  color: var(--accent-cyan);
+  font-size: 0.9rem;
+  pointer-events: none;
+}
+.dd-drop-overlay[hidden] { display: none; }
+.dd-upload-status {
+  position: absolute;
+  right: 14px;
+  bottom: 16px;
+  z-index: 6;
+  max-width: 70%;
+  padding: 6px 10px;
+  border: 1px solid var(--accent-cyan-border);
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  font-size: 0.72rem;
+  box-shadow: var(--box-glow-cyan);
+  overflow-wrap: anywhere;
+}
+.dd-upload-status[hidden] { display: none; }
+.dd-upload-status.is-error { border-color: rgba(255, 45, 85, 0.5); color: var(--accent-red); }
 
 /* ---- overlay ----------------------------------------------------------------- */
 .dd-overlay {
@@ -337,6 +504,33 @@ body.dd-sidebar-open .dd-sidebar {
 
 .dd-footer .lt-footer-key { margin-right: 4px; }
 
+.dd-keybar { display: flex; gap: 4px; width: 100%; overflow-x: auto; scrollbar-width: none; }
+.dd-keybar[hidden] { display: none; }
+.dd-keybar button {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 34px;
+  padding: 0 4px;
+  border: 1px solid var(--border-dim);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  touch-action: manipulation;
+}
+.dd-keybar button:active { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+
+/* Touch: the key bar replaces the shortcut hints; the page shrinks above the
+   on-screen keyboard (--dd-kb is set from visualViewport). */
+body.dd-touch { --dd-footer-height: 44px; }
+body.dd-touch .dd-hints { display: none; }
+body.dd-touch .dd-main { bottom: calc(var(--dd-footer-height) + var(--dd-kb, 0px) + env(safe-area-inset-bottom, 0px)); }
+body.dd-touch .dd-footer {
+  bottom: var(--dd-kb, 0px);
+  height: calc(var(--dd-footer-height) + env(safe-area-inset-bottom, 0px));
+  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
+}
+
 /* ---- small screens ----------------------------------------------------------- */
 @media (max-width: 1099px) {
   .dd-sidebar {
@@ -344,7 +538,7 @@ body.dd-sidebar-open .dd-sidebar {
     top: var(--dd-gap);
     right: var(--dd-gap);
     bottom: var(--dd-gap);
-    width: min(var(--dd-sidebar-width), calc(100vw - 2 * var(--dd-gap)));
+    width: min(var(--dd-sidebar-width), calc(100vw - 56px)); /* leave a strip to tap out */
     z-index: 20;
     background-color: var(--bg-secondary);
     box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6);
@@ -353,14 +547,135 @@ body.dd-sidebar-open .dd-sidebar {
   .dd-pane-title { display: none; }
 }
 
+.dd-backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 15;
+  background: rgba(1, 3, 4, 0.55);
+}
+.dd-backdrop[hidden] { display: none; }
+
 @media (max-width: 719px) {
   :root { --dd-gap: 4px; }
-  .lt-brand-subtitle,
-  #font-down,
-  #font-up,
-  #fullscreen-toggle,
-  .dd-sso { display: none; }
+  .lt-brand { display: none; }
+  .dd-session-chip { max-width: 46vw; }
+  /* Phones: the red Panels badge and the switcher carry "needs you" instead. */
+  .dd-attention.is-active { display: none; }
+  .dd-header { padding: 0 var(--space-sm); gap: var(--space-sm); }
   .dd-header .lt-header-left { gap: var(--space-sm); }
+  /* base.css hides the WS indicator on phones; keep it as a bare dot. */
+  .dd-header .dd-ws { display: inline-flex; padding: 4px; }
+  .dd-header .dd-ws #ws-label { display: none; }
   .dd-footer .lt-footer-hints .lt-footer-hint:nth-child(n + 5),
   .dd-footer .lt-footer-sep:nth-child(n + 4) { display: none; }
 }
+
+/* ---- light theme (devdesk#31) ---------------------------------------------------
+   base.css restyles every lt- component; these cover DevDesk's own pieces. */
+html[data-theme="light"] .dd-sidebar,
+html[data-theme="light"] .dd-footer { background-image: none; }
+html[data-theme="light"] .dd-overlay { background: rgba(237, 240, 245, 0.82); }
+html[data-theme="light"] .dd-backdrop { background: rgba(17, 24, 39, 0.28); }
+html[data-theme="light"] .dd-menu { box-shadow: 0 8px 28px rgba(50, 80, 130, 0.22), var(--box-glow-cyan); }
+html[data-theme="light"] .dd-drop-overlay { background: var(--accent-cyan-dim); }
+html[data-theme="light"] .dd-upload-status { box-shadow: 0 4px 16px rgba(50, 80, 130, 0.18); }
+html[data-theme="light"] .dd-session-item.is-waiting,
+html[data-theme="light"] .dd-session-chip[data-state="waiting"],
+html[data-theme="light"] .dd-upload-status.is-error { border-color: rgba(181, 0, 31, 0.35); }
+html[data-theme="light"] .dd-badge { color: #ffffff; }
+html[data-theme="light"] .dd-session-chip[data-state="working"] .dd-state-dot,
+html[data-theme="light"] .dd-session-chip[data-state="waiting"] .dd-state-dot { box-shadow: none; }
+@media (max-width: 1099px) {
+  html[data-theme="light"] .dd-sidebar { box-shadow: -8px 0 28px rgba(50, 80, 130, 0.22); }
+}
+
+.dd-header .lt-theme-btn { flex: 0 0 auto; }
+
+/* ---- command palette, dialogs, toasts (devdesk#32-#34) ---------------------------- */
+.dd-cmd-btn { font-size: 0.8rem; letter-spacing: 0.02em; }
+.dd-cmd-kbd { font-size: 0.62rem; opacity: 0.7; }
+.lt-cmd-item.is-selected .dd-cmd-hint { color: inherit; }
+.dd-cmd-hint { color: var(--text-muted); font-size: 0.66rem; white-space: nowrap; }
+html[data-theme="light"] .lt-cmd-item.is-selected { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
+.lt-cmd-results { max-height: min(420px, 60vh); }
+.lt-cmd-footer span { display: inline-flex; align-items: center; gap: 2px; }
+
+.dd-dialog-body { display: flex; flex-direction: column; gap: var(--space-sm); }
+.dd-dialog-fields { display: flex; flex-direction: column; gap: var(--space-md); }
+.dd-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; color: var(--text-secondary); }
+.dd-field .lt-input,
+.dd-field .lt-select { width: 100%; font-size: 0.8rem; }
+.dd-dialog-text { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.5; }
+.dd-dialog-hint { color: var(--text-muted); font-size: 0.7rem; }
+.dd-dialog-hint.is-error { color: var(--accent-red); }
+
+.dd-keys { display: grid; gap: var(--space-lg); }
+.dd-keys-title {
+  margin: 0 0 var(--space-sm);
+  font-size: 0.68rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent-orange);
+}
+.dd-keys-list { display: grid; grid-template-columns: 10.5rem 1fr; gap: 6px var(--space-md); margin: 0; font-size: 0.76rem; }
+.dd-keys-list dt { white-space: nowrap; }
+.dd-keys-list dd { margin: 0; color: var(--text-secondary); }
+.dd-keys kbd {
+  padding: 1px 6px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-tertiary);
+  color: var(--accent-cyan);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+}
+
+.dd-footer-help {
+  margin-left: var(--space-sm);
+  padding: 0 6px;
+  border: 1px solid var(--border-color);
+  background: none;
+  color: var(--accent-cyan);
+  font-family: var(--font-mono);
+  font-size: 0.64rem;
+  cursor: pointer;
+}
+.dd-footer-help:hover { border-color: var(--accent-cyan); }
+
+/* Toasts sit above the footer (and the phone key bar); names keep their case. */
+#lt-toast-container {
+  right: var(--space-md);
+  bottom: calc(var(--dd-footer-height) + var(--dd-kb, 0px) + env(safe-area-inset-bottom, 0px) + var(--space-md));
+  max-width: calc(100vw - 2 * var(--space-md));
+}
+.lt-toast {
+  position: relative;
+  overflow: hidden;
+  text-transform: none;
+  letter-spacing: 0.02em;
+  font-size: 0.74rem;
+  transition: opacity 0.25s ease;
+}
+.lt-toast.is-leaving { opacity: 0; }
+.lt-toast-msg { flex: 1; overflow-wrap: anywhere; }
+.lt-toast-icon { flex: 0 0 auto; }
+.lt-toast-close {
+  flex: 0 0 auto;
+  background: none;
+  border: 0;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+.lt-toast-close:hover { opacity: 1; }
+
+@media (max-width: 719px) {
+  .dd-cmd-kbd { display: none; }
+  #lt-toast-container { left: var(--space-sm); right: var(--space-sm); }
+  .lt-toast { min-width: 0; max-width: none; }
+  .dd-keys-list { grid-template-columns: 1fr; gap: 2px; }
+  .dd-keys-list dd { margin-bottom: var(--space-sm); }
+}
+/* One highlight only: the row under a resting pointer isn't "selected" until the
+   pointer moves (mousemove updates the selection). */
+.lt-cmd-item:hover:not(.is-selected) { background: none; color: inherit; }