jpmschweitzer/clide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

config sidebar wireframe: expandable lists, click-to-open .md

Browse Source 
The Config tab is a browser, not a summary: each category (skills,
agents, commands, hooks, …) is an expandable accordion of the full list,
and file-backed entries open their .md in the right-side reader rather
than truncating to a one-line "…". Updates the T-183 scope to match.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
jpmschweitzer
2026-05-25 11:31:49 +02:00
co-authored by Claude Opus 4.7
parent af02ae39c4
commit da803e17e3
4 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.pql/changelog/ticket_history/2026-05.sql
+1
View File
@@ -2237,3 +2237,4 @@ INSERT INTO ticket_history (ticket_id, field, old_value, new_value, changed_by,
INSERT INTO ticket_history (ticket_id, field, old_value, new_value, changed_by, changed_at, created_at, updated_at, deleted_at, hash, canonical_version) VALUES ('T-178', 'status', 'backlog', 'in_progress', NULL, '2026-05-25 08:10:25', '2026-05-25 08:10:25', '2026-05-25 08:10:25', NULL, '389b95ddaaef1a5ce318bda840b1cde5', 1) ON CONFLICT(hash) DO NOTHING;
INSERT INTO ticket_history (ticket_id, field, old_value, new_value, changed_by, changed_at, created_at, updated_at, deleted_at, hash, canonical_version) VALUES ('T-178', 'status', 'in_progress', 'done', NULL, '2026-05-25 08:21:46', '2026-05-25 08:21:46', '2026-05-25 08:21:46', NULL, 'ddaad91987208966c2720dee370738ed', 1) ON CONFLICT(hash) DO NOTHING;
INSERT INTO ticket_history (ticket_id, field, old_value, new_value, changed_by, changed_at, created_at, updated_at, deleted_at, hash, canonical_version) VALUES ('T-179', 'status', 'in_progress', 'done', NULL, '2026-05-25 08:26:21', '2026-05-25 08:26:21', '2026-05-25 08:26:21', NULL, '58dc0afa577b9aee651d683aa1b9bc69', 1) ON CONFLICT(hash) DO NOTHING;
INSERT INTO ticket_history (ticket_id, field, old_value, new_value, changed_by, changed_at, created_at, updated_at, deleted_at, hash, canonical_version) VALUES ('T-183', 'description', 'A comprehensive read view (with edit affordances where sensible) of the Claude environment, as the Config sub-tab of the sidebar (T-182). Sources: ClaudeConfig (D-76 / T-151, already reads skills, commands, settings, permissions from ~/.claude + .claude layered) plus the stream-json init/initialize payloads (agents, output styles + available styles, MCP servers, models, plugins). Sections: SKILLS, AGENTS, COMMANDS, PERMISSIONS (allow/ask/deny, colour-coded), HOOKS, MCP SERVERS, SETTINGS (model, output style). Show local+global layering (local wins) and that it is watched/live. Covers the interaction-type surfaces documented on anthropic.com so the user can see everything configured for Claude in one place. Acceptance: each section lists its entries from ClaudeConfig + init data; permissions colour-coded by rule kind; layering + source shown; updates live on a watched .claude change; widget tests. Wireframe: docs/design/wireframes/claude-prompts/09-sidebar-config-tab.png. Blocked by T-182 (sub-tab shell).', 'The Config sub-tab (T-182): a browsable view of the Claude environment over ClaudeConfig (D-76 / T-151 — skills, commands, settings, permissions from ~/.claude + .claude, layered) plus the stream-json init/initialize payloads (agents, output styles, MCP servers, models, plugins). Each category is an EXPANDABLE accordion section (no ellipsis truncation): SKILLS, AGENTS, COMMANDS, HOOKS, PERMISSIONS, MCP SERVERS, SETTINGS, each with a count. File-backed entries are CLICKABLE: a skill (SKILL.md), agent (.claude/agents/*.md), or command (.claude/commands/*.md) — clicking fires an open-file action into the right-side markdown reader/editor pane (reusing the existing file-open plumbing, D-6 parity) to show what that skill/agent/command says. Non-file entries render inline: permissions (allow/ask/deny, colour-coded), MCP servers, model, output style; SETTINGS can open settings.json. Show local+global layering (local wins) and that it is watched/live. Acceptance: sections expand/collapse to the full list; clicking a file-backed item opens its .md in the reader; permissions colour-coded by rule kind; updates live on a watched .claude change; widget tests for expand + click-to-open. Wireframe: docs/design/wireframes/claude-prompts/09-sidebar-config-tab.png. Blocked by T-182.', NULL, '2026-05-25 09:31:37', '2026-05-25 09:31:37', '2026-05-25 09:31:37', NULL, '473e88ee9fa895f5dc30fcac5b001fa6', 1) ON CONFLICT(hash) DO NOTHING;
.pql/changelog/tickets/2026-05.sql
+1
View File
@@ -2755,3 +2755,4 @@ INSERT INTO tickets (id, type, parent_id, title, description, status, priority,
INSERT INTO tickets (id, type, parent_id, title, description, status, priority, assigned_to, team, decision_ref, created_at, updated_at, deleted_at, hash, canonical_version) VALUES ('T-181', 'task', 'T-164', 'Per-agent permission-mode cycle badge in the cockpit roster', 'Per-agent permission-mode control in the cockpit roster (extends T-171). Each roster row shows a mode badge (D default / A acceptEdits / P plan). Click cycles the SAFE trio default -> acceptEdits -> plan and sends set_permission_mode to that agent session (a confirmed stream-json control subtype). bypassPermissions is a footgun, so it is reachable only on SHIFT-click (behind a confirm), and the tooltip documents both behaviours. Acceptance: clicking the badge cycles the safe modes and the session receives set_permission_mode; shift-click can reach bypass behind a confirm; the badge reflects the live mode (T-157 status); tooltip explains click vs shift-click; widget + transport tests. Wireframe: docs/design/wireframes/claude-prompts/05-team-cockpit-sidebar.png. Blocked by T-169 (orchestrator).', 'backlog', 'low', NULL, NULL, 'D-77', '2026-05-25 09:16:05', '2026-05-25 09:16:05', NULL, '1223cc1467844aea060d17e4724d28bc', 1) ON CONFLICT(id) DO UPDATE SET type=excluded.type, parent_id=excluded.parent_id, title=excluded.title, description=excluded.description, status=excluded.status, priority=excluded.priority, assigned_to=excluded.assigned_to, team=excluded.team, decision_ref=excluded.decision_ref, updated_at=excluded.updated_at, deleted_at=excluded.deleted_at, hash=excluded.hash, canonical_version=excluded.canonical_version WHERE excluded.updated_at > tickets.updated_at OR (excluded.updated_at = tickets.updated_at AND excluded.hash > tickets.hash);
INSERT INTO tickets (id, type, parent_id, title, description, status, priority, assigned_to, team, decision_ref, created_at, updated_at, deleted_at, hash, canonical_version) VALUES ('T-182', 'task', 'T-164', 'Claude sidebar sub-tabs: Activity / Team / Config', 'The Claude meta-sidebar is overloaded (roster + tasks + messages + stats + config do not fit one scroll). Split it into a sub-tab strip (reuse the search-panel mode-strip pattern) with three tabs: (1) Activity — stats + live runtime visibility (T-141/T-157); (2) Team — roster + tasks + message-feed widget (T-171 + T-180), mostly hidden when solo and auto-fronted when a team is live; (3) Config — the Claude-environment view. Default to Activity. Acceptance: a sub-tab strip switches the sidebar body between the three surfaces; existing stats/team content slots into Activity/Team unchanged; Team auto-fronts on team spawn; widget tests for tab switching. Wireframes: docs/design/wireframes/claude-prompts/07-sidebar-activity-tab.png, 08-sidebar-team-tab.png, 09-sidebar-config-tab.png. Relates to T-141, T-157, T-171, T-180.', 'backlog', 'medium', NULL, NULL, 'D-77', '2026-05-25 09:26:31', '2026-05-25 09:26:31', NULL, 'bd3215543c20c774969362dc59dad249', 1) ON CONFLICT(id) DO UPDATE SET type=excluded.type, parent_id=excluded.parent_id, title=excluded.title, description=excluded.description, status=excluded.status, priority=excluded.priority, assigned_to=excluded.assigned_to, team=excluded.team, decision_ref=excluded.decision_ref, updated_at=excluded.updated_at, deleted_at=excluded.deleted_at, hash=excluded.hash, canonical_version=excluded.canonical_version WHERE excluded.updated_at > tickets.updated_at OR (excluded.updated_at = tickets.updated_at AND excluded.hash > tickets.hash);
INSERT INTO tickets (id, type, parent_id, title, description, status, priority, assigned_to, team, decision_ref, created_at, updated_at, deleted_at, hash, canonical_version) VALUES ('T-183', 'task', 'T-164', 'Claude Config sidebar tab — skills/agents/commands/settings/permissions/hooks/MCP', 'A comprehensive read view (with edit affordances where sensible) of the Claude environment, as the Config sub-tab of the sidebar (T-182). Sources: ClaudeConfig (D-76 / T-151, already reads skills, commands, settings, permissions from ~/.claude + .claude layered) plus the stream-json init/initialize payloads (agents, output styles + available styles, MCP servers, models, plugins). Sections: SKILLS, AGENTS, COMMANDS, PERMISSIONS (allow/ask/deny, colour-coded), HOOKS, MCP SERVERS, SETTINGS (model, output style). Show local+global layering (local wins) and that it is watched/live. Covers the interaction-type surfaces documented on anthropic.com so the user can see everything configured for Claude in one place. Acceptance: each section lists its entries from ClaudeConfig + init data; permissions colour-coded by rule kind; layering + source shown; updates live on a watched .claude change; widget tests. Wireframe: docs/design/wireframes/claude-prompts/09-sidebar-config-tab.png. Blocked by T-182 (sub-tab shell).', 'backlog', 'medium', NULL, NULL, 'D-76', '2026-05-25 09:26:40', '2026-05-25 09:26:40', NULL, '9cbe6736b38163e60c448b0e0af3153d', 1) ON CONFLICT(id) DO UPDATE SET type=excluded.type, parent_id=excluded.parent_id, title=excluded.title, description=excluded.description, status=excluded.status, priority=excluded.priority, assigned_to=excluded.assigned_to, team=excluded.team, decision_ref=excluded.decision_ref, updated_at=excluded.updated_at, deleted_at=excluded.deleted_at, hash=excluded.hash, canonical_version=excluded.canonical_version WHERE excluded.updated_at > tickets.updated_at OR (excluded.updated_at = tickets.updated_at AND excluded.hash > tickets.hash);
INSERT INTO tickets (id, type, parent_id, title, description, status, priority, assigned_to, team, decision_ref, created_at, updated_at, deleted_at, hash, canonical_version) VALUES ('T-183', 'task', 'T-164', 'Claude Config sidebar tab — skills/agents/commands/settings/permissions/hooks/MCP', 'The Config sub-tab (T-182): a browsable view of the Claude environment over ClaudeConfig (D-76 / T-151 — skills, commands, settings, permissions from ~/.claude + .claude, layered) plus the stream-json init/initialize payloads (agents, output styles, MCP servers, models, plugins). Each category is an EXPANDABLE accordion section (no ellipsis truncation): SKILLS, AGENTS, COMMANDS, HOOKS, PERMISSIONS, MCP SERVERS, SETTINGS, each with a count. File-backed entries are CLICKABLE: a skill (SKILL.md), agent (.claude/agents/*.md), or command (.claude/commands/*.md) — clicking fires an open-file action into the right-side markdown reader/editor pane (reusing the existing file-open plumbing, D-6 parity) to show what that skill/agent/command says. Non-file entries render inline: permissions (allow/ask/deny, colour-coded), MCP servers, model, output style; SETTINGS can open settings.json. Show local+global layering (local wins) and that it is watched/live. Acceptance: sections expand/collapse to the full list; clicking a file-backed item opens its .md in the reader; permissions colour-coded by rule kind; updates live on a watched .claude change; widget tests for expand + click-to-open. Wireframe: docs/design/wireframes/claude-prompts/09-sidebar-config-tab.png. Blocked by T-182.', 'backlog', 'medium', NULL, NULL, 'D-76', '2026-05-25 09:26:40', '2026-05-25 09:31:37', NULL, '2011edc54063ca86e8418fdb0d4a81ac', 1) ON CONFLICT(id) DO UPDATE SET type=excluded.type, parent_id=excluded.parent_id, title=excluded.title, description=excluded.description, status=excluded.status, priority=excluded.priority, assigned_to=excluded.assigned_to, team=excluded.team, decision_ref=excluded.decision_ref, updated_at=excluded.updated_at, deleted_at=excluded.deleted_at, hash=excluded.hash, canonical_version=excluded.canonical_version WHERE excluded.updated_at > tickets.updated_at OR (excluded.updated_at = tickets.updated_at AND excluded.hash > tickets.hash);
docs/design/wireframes/claude-prompts/09-sidebar-config-tab.json
+24 -19
View File
@@ -10,29 +10,34 @@
"strip": {"type": "Line", "parent": "panel", "left": 40, "top": 62, "width": 340, "height": 1, "strokeColor": "#2a3038"},
"scope": {"type": "Text", "parent": "panel", "left": 58, "top": 76, "text": "local + global (layered, local wins)", "fontColor": "#5b6470", "fontSize": 10},
"h-skills": {"type": "Text", "parent": "panel", "left": 58, "top": 100, "text": "SKILLS (14)", "fontColor": "#7a8290", "fontSize": 12},
"skills": {"type": "Text", "parent": "panel", "left": 58, "top": 120, "text": "pql · whats-next · git-commit · ui-design …", "fontColor": "#c8d0e0", "fontSize": 12},
"h-skills": {"type": "Text", "parent": "panel", "left": 58, "top": 100, "text": "▾ SKILLS", "fontColor": "#c8d0e0", "fontSize": 12},
"c-skills": {"type": "Text", "parent": "panel", "left": 340, "top": 100, "text": "14", "fontColor": "#5b6470", "fontSize": 11},
"sk1": {"type": "Text", "parent": "panel", "left": 78, "top": 122, "text": "› pql", "fontColor": "#9ec3ef", "fontSize": 12},
"sk2": {"type": "Text", "parent": "panel", "left": 78, "top": 142, "text": "› whats-next", "fontColor": "#9ec3ef", "fontSize": 12},
"sk3": {"type": "Text", "parent": "panel", "left": 78, "top": 162, "text": "› git-commit", "fontColor": "#9ec3ef", "fontSize": 12},
"sk4": {"type": "Text", "parent": "panel", "left": 78, "top": 182, "text": "› ui-design", "fontColor": "#9ec3ef", "fontSize": 12},
"sk5": {"type": "Text", "parent": "panel", "left": 78, "top": 202, "text": "› frame0-wireframe", "fontColor": "#9ec3ef", "fontSize": 12},
"sk6": {"type": "Text", "parent": "panel", "left": 78, "top": 222, "text": "› security-review", "fontColor": "#9ec3ef", "fontSize": 12},
"sk7": {"type": "Text", "parent": "panel", "left": 78, "top": 242, "text": "+ 8 more", "fontColor": "#5b6470", "fontSize": 11},
"h-agents": {"type": "Text", "parent": "panel", "left": 58, "top": 150, "text": "AGENTS (5)", "fontColor": "#7a8290", "fontSize": 12},
"agents": {"type": "Text", "parent": "panel", "left": 58, "top": 170, "text": "claude · Explore · general-purpose · Plan …", "fontColor": "#c8d0e0", "fontSize": 12},
"h-agents": {"type": "Text", "parent": "panel", "left": 58, "top": 272, "text": "▸ AGENTS", "fontColor": "#c8d0e0", "fontSize": 12},
"c-agents": {"type": "Text", "parent": "panel", "left": 344, "top": 272, "text": "5", "fontColor": "#5b6470", "fontSize": 11},
"h-cmds": {"type": "Text", "parent": "panel", "left": 58, "top": 298, "text": "▸ COMMANDS", "fontColor": "#c8d0e0", "fontSize": 12},
"c-cmds": {"type": "Text", "parent": "panel", "left": 340, "top": 298, "text": "28", "fontColor": "#5b6470", "fontSize": 11},
"h-hooks": {"type": "Text", "parent": "panel", "left": 58, "top": 324, "text": "▸ HOOKS", "fontColor": "#c8d0e0", "fontSize": 12},
"c-hooks": {"type": "Text", "parent": "panel", "left": 344, "top": 324, "text": "3", "fontColor": "#5b6470", "fontSize": 11},
"h-cmds": {"type": "Text", "parent": "panel", "left": 58, "top": 200, "text": "COMMANDS (28)", "fontColor": "#7a8290", "fontSize": 12},
"cmds": {"type": "Text", "parent": "panel", "left": 58, "top": 220, "text": "clear · compact · review · security-review …", "fontColor": "#c8d0e0", "fontSize": 12},
"div1": {"type": "Line", "parent": "panel", "left": 58, "top": 350, "width": 304, "height": 1, "strokeColor": "#2a3038"},
"h-perms": {"type": "Text", "parent": "panel", "left": 58, "top": 250, "text": "PERMISSIONS", "fontColor": "#7a8290", "fontSize": 12},
"perm-allow": {"type": "Text", "parent": "panel", "left": 58, "top": 270, "text": "allow: Bash(pql *), Bash(git *), Read", "fontColor": "#5cb87a", "fontSize": 12},
"perm-ask": {"type": "Text", "parent": "panel", "left": 58, "top": 290, "text": "ask: Write, Edit, Bash", "fontColor": "#e0a04a", "fontSize": 12},
"perm-deny": {"type": "Text", "parent": "panel", "left": 58, "top": 310, "text": "deny: —", "fontColor": "#9aa4b2", "fontSize": 12},
"h-perms": {"type": "Text", "parent": "panel", "left": 58, "top": 364, "text": "▾ PERMISSIONS", "fontColor": "#c8d0e0", "fontSize": 12},
"perm-allow": {"type": "Text", "parent": "panel", "left": 78, "top": 386, "text": "allow: Bash(pql *), Bash(git *), Read", "fontColor": "#5cb87a", "fontSize": 12},
"perm-ask": {"type": "Text", "parent": "panel", "left": 78, "top": 406, "text": "ask: Write, Edit, Bash", "fontColor": "#e0a04a", "fontSize": 12},
"perm-deny": {"type": "Text", "parent": "panel", "left": 78, "top": 426, "text": "deny: —", "fontColor": "#9aa4b2", "fontSize": 12},
"h-hooks": {"type": "Text", "parent": "panel", "left": 58, "top": 340, "text": "HOOKS", "fontColor": "#7a8290", "fontSize": 12},
"hooks": {"type": "Text", "parent": "panel", "left": 58, "top": 360, "text": "SessionStart · PreToolUse · Stop", "fontColor": "#c8d0e0", "fontSize": 12},
"h-mcp": {"type": "Text", "parent": "panel", "left": 58, "top": 452, "text": "▸ MCP SERVERS", "fontColor": "#c8d0e0", "fontSize": 12},
"c-mcp": {"type": "Text", "parent": "panel", "left": 340, "top": 452, "text": "5", "fontColor": "#5b6470", "fontSize": 11},
"h-settings": {"type": "Text", "parent": "panel", "left": 58, "top": 478, "text": "▸ SETTINGS", "fontColor": "#c8d0e0", "fontSize": 12},
"h-mcp": {"type": "Text", "parent": "panel", "left": 58, "top": 390, "text": "MCP SERVERS (5)", "fontColor": "#7a8290", "fontSize": 12},
"mcp": {"type": "Text", "parent": "panel", "left": 58, "top": 410, "text": "Drive · Gmail · Calendar · Housekeeping …", "fontColor": "#c8d0e0", "fontSize": 12},
"h-settings": {"type": "Text", "parent": "panel", "left": 58, "top": 440, "text": "SETTINGS", "fontColor": "#7a8290", "fontSize": 12},
"s-model": {"type": "Text", "parent": "panel", "left": 58, "top": 460, "text": "model: opus · output style: default", "fontColor": "#c8d0e0", "fontSize": 12},
"edit-hint": {"type": "Text", "parent": "panel", "left": 58, "top": 700, "text": "↳ source: ~/.claude + .claude · watched", "fontColor": "#5b6470", "fontSize": 10}
"hint": {"type": "Text", "parent": "panel", "left": 58, "top": 706, "text": "click a skill / agent / command → opens its .md in the reader →", "fontColor": "#5b6470", "fontSize": 10}
}
}
docs/design/wireframes/claude-prompts/09-sidebar-config-tab.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 45 KiB