feat(ui): declutter sidebar footer

- terminals, ai agents, context always shown; other views under a remembered More fold - settings on its own line; context gets layers icon - update task.md
codejunction · Oct 4, 2026 · Oct 3, 2026 · Oct 3, 2026 · Oct 4, 2026 · Oct 4, 2026
commit 7f144cea22e71380c9cea5d9b65b332e600eb780
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,6 +30,7 @@ All notable changes to shelldeck are listed here. The format follows [Keep a Cha
 - Fixed: a redacted value could corrupt a stored context event (secrets are now redacted per value before serializing).
 - Devin CLI: commands and flags cross-checked from web sources (slash commands `/compact /clear /new /model /context /resume /plan /revert /exit`, shell tool `exec` captured); its hooks are limited to the events Devin accepts.
 - Smart recall without embeddings: `sd recall --smart`, a Context page toggle and the `recall_agent` setting expand the query with an installed agent's smallest model (claude haiku, gemini flash-lite, codex/devin small tier) in its non-interactive mode. Only the query is sent; results are cached; it falls back to keywords.
+- Tidier sidebar: Terminals, AI agents and Context stay visible; Bookmarks, Scheduler, Tasks, History, Task manager, Devices and Scratchpad fold under *More* (remembered); Settings gets its own line; Context has its own icon.
 - Hand-off files include a context snapshot, and the installed agent skill teaches the context workflow.
 
 ## [0.0.6] - 2026-10-01

diff --git a/CLAUDE.md b/CLAUDE.md
@@ -116,7 +116,7 @@ uv tool install --force -e .        # global sd/shelldeck from this checkout (th
 - `shelldeck/static/`:
   - `index.html` (boot overlay, shell).
   - `app.css`.
-  - `app.js`: state, `Term` class, layout tree and free canvas, sidebar, palette, shortcuts, boot.
+  - `app.js`: state, `Term` class, layout tree and free canvas, sidebar, palette, shortcuts, boot. Sidebar footer: Terminals, AI agents and Context always shown; the other views sit in the `#sb-more` *More* fold (open state in localStorage `sbMore`, auto-opens on one of its views); Settings + `#conn` on their own line.
   - `views.js`: bookmarks, scheduler, tasks, settings, add-project, alarms.
   - `devices.js`: Devices view (signed-in browsers, in use / idle, revoke).
   - `editor.js`: `openFile(path, {sid, mode, line})` dialog: textarea + line-number gutter, markdown preview, image view, Ctrl+S, dirty guard through `dialog().canClose`. Used by `sd edit/view`, the palette's *Open file…* and clickable paths when the `editor` setting is `shelldeck`.

diff --git a/docs/task.md b/docs/task.md
@@ -195,6 +195,10 @@
 - **2026-10-04 — 0.0.7rc2 published to PyPI** (release run 37227723591, CI green
   on Windows and Ubuntu, py3.12–3.14). Installed from PyPI and checked (version,
   `sd recall --smart`).
+- **2026-10-04 — Sidebar decluttered (user feedback):** primary links
+  (Terminals, AI agents, Context) stay visible; seven tools fold under a
+  remembered *More* (auto-opens when one is active); Settings has its own line;
+  Context got a layers icon. Checked in a browser, closed and open.
 - **2026-10-04 — Docs:** README, CHANGELOG (Unreleased), CLAUDE.md,
   `docs/agent-automation.md` and `docs/agent-report.schema.json` describe the
   lifecycle, report API, waits and context commands.

diff --git a/shelldeck/static/app.css b/shelldeck/static/app.css
@@ -430,13 +430,44 @@ i[data-icon] svg {
   border-top: 1px solid var(--border);
   padding-top: 6px;
   margin-top: 6px;
+  display: grid;
+  gap: 1px;
+}
+
+/* "More": the less-used views, folded away so the projects list keeps the room */
+.sb-more > summary {
+  list-style: none;
+  cursor: pointer;
+}
+.sb-more > summary::-webkit-details-marker { display: none; }
+.sb-more > summary .chev {
+  margin-left: auto;
+  display: inline-flex;
+  color: var(--faint);
+  transform: rotate(-90deg);
+  transition: transform 0.15s ease;
+}
+.sb-more[open] > summary .chev { transform: none; }
+.sb-more-items {
+  display: grid;
+  gap: 1px;
+  padding-left: 10px;
+  margin-left: 15px;
+  border-left: 1px solid var(--border);
 }
+.sb-more-items .sb-link { padding-top: 5px; padding-bottom: 5px; }
 
-.sb-row {
+/* Settings: its own line at the very bottom, with the connection dot */
+.sb-settings {
   display: flex;
   align-items: center;
   gap: 6px;
+  border-top: 1px solid var(--border);
+  margin-top: 5px;
+  padding-top: 5px;
 }
+@media (prefers-reduced-motion: reduce) { .sb-more > summary .chev { transition: none; } }
+
 
 .conn {
   width: 8px;

diff --git a/shelldeck/static/app.js b/shelldeck/static/app.js
@@ -1605,6 +1605,7 @@ export function switchView(view) {
   S.view = view;
   for (const v of ["terminals", "bookmarks", "scheduler", "tasks", "monitor", "history", "devices", "agents", "scratch", "context"]) $(`#view-${v}`).hidden = v !== view;
   for (const b of $$(".sb-link[data-view]")) b.classList.toggle("active", b.dataset.view === view && view !== "terminals");
+  if ($("#sb-more .sb-link.active")) $("#sb-more").open = true; // a view inside "More" keeps it open
   $("#term-actions").hidden = view !== "terminals";
   if (mobile.matches) $("#app").classList.remove("sb-mobile-open");
   if (view === "terminals") {
@@ -2105,3 +2106,12 @@ async function init() {
 }
 
 init();
+
+// sidebar "More" group: remember open/closed per browser
+{
+  const more = document.getElementById("sb-more");
+  if (more) {
+    more.open = store.get("sbMore", false) || !!more.querySelector(".sb-link.active");
+    more.addEventListener("toggle", () => store.set("sbMore", more.open));
+  }
+}
diff --git a/shelldeck/static/index.html b/shelldeck/static/index.html
@@ -42,16 +42,21 @@
         <nav id="projects" class="sb-projects"></nav>
         <div class="sb-foot">
           <button class="sb-link" data-action="view" data-view="terminals"><i data-icon="terminal"></i>Terminals</button>
-          <button class="sb-link" data-action="view" data-view="bookmarks"><i data-icon="bookmark"></i>Bookmarks</button>
-          <button class="sb-link" data-action="view" data-view="scheduler"><i data-icon="clock"></i>Scheduler</button>
-          <button class="sb-link" data-action="view" data-view="tasks"><i data-icon="kanban"></i>Tasks</button>
-          <button class="sb-link" data-action="view" data-view="history"><i data-icon="history"></i>History</button>
-          <button class="sb-link" data-action="view" data-view="monitor"><i data-icon="activity"></i>Task manager</button>
-          <button class="sb-link" data-action="view" data-view="devices"><i data-icon="devices"></i>Devices</button>
-          <button class="sb-link" data-action="view" data-view="scratch"><i data-icon="note"></i>Scratchpad</button>
-          <button class="sb-link" data-action="view" data-view="context"><i data-icon="sparkle"></i>Context</button>
           <button class="sb-link sb-agents" data-action="view" data-view="agents"><i data-icon="sparkle"></i>AI agents<span class="sb-count" hidden></span></button>
-          <div class="sb-row">
+          <button class="sb-link" data-action="view" data-view="context"><i data-icon="layers"></i>Context</button>
+          <details class="sb-more" id="sb-more">
+            <summary class="sb-link"><i data-icon="grid"></i>More<span class="chev"><i data-icon="chevron"></i></span></summary>
+            <div class="sb-more-items">
+              <button class="sb-link" data-action="view" data-view="bookmarks"><i data-icon="bookmark"></i>Bookmarks</button>
+              <button class="sb-link" data-action="view" data-view="scheduler"><i data-icon="clock"></i>Scheduler</button>
+              <button class="sb-link" data-action="view" data-view="tasks"><i data-icon="kanban"></i>Tasks</button>
+              <button class="sb-link" data-action="view" data-view="history"><i data-icon="history"></i>History</button>
+              <button class="sb-link" data-action="view" data-view="monitor"><i data-icon="activity"></i>Task manager</button>
+              <button class="sb-link" data-action="view" data-view="devices"><i data-icon="devices"></i>Devices</button>
+              <button class="sb-link" data-action="view" data-view="scratch"><i data-icon="note"></i>Scratchpad</button>
+            </div>
+          </details>
+          <div class="sb-settings">
             <button class="sb-link" data-action="settings"><i data-icon="settings"></i>Settings</button>
             <span id="conn" class="conn" title="Server connection"></span>
           </div>

diff --git a/shelldeck/static/ui.js b/shelldeck/static/ui.js
@@ -114,6 +114,7 @@ const P = {
   refresh: '<path d="M21 12a9 9 0 1 1-2.6-6.36M21 3v6h-6"/>',
   share: '<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/>',
   note: '<path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9Z"/><path d="M14 3v6h6M8 13h8M8 17h5"/>',
+  layers: '<path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 13 9 5 9-5"/>',
 };
 
 export function icon(name) {