lfg2025/archy
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 33 Wiki Activity
Files
9aaf8d4b959bbd8d425d28677ec78c97737e4569
archy/.claude/plans/sequential-jingling-moth.md
Dorian ee15fbc457 bug fixes from sxsw
2026-03-14 17:12:41 +00:00

11 KiB
Raw Blame History

Manage — Claude Code Configuration Dashboard

Context

You have 77 skills, 15 hooks, 17 memory files, 19 plans, and settings across 5 projects + global scope. All stored as flat files (markdown with YAML frontmatter, JSON, bash scripts) under ~/.claude/ and {project}/.claude/. Currently the only way to manage these is manually editing files. This project creates a visual web dashboard for browsing, creating, editing, and organizing all of it.

Project location: /Users/dorian/Projects/Manage Stack: Vue 3 + Vite + TypeScript + Tailwind + Pinia (frontend) + Express + tsx (backend) Design: Glassmorphism dark theme (matching Archipelago aesthetic)

Architecture

Browser (localhost:5173)          Express Server (localhost:3141)
+-----------------------+         +----------------------------+
|  Vue 3 SPA            |  fetch  |  /api/projects             |
|  +-- Dashboard        | ------> |  /api/skills (CRUD)        |
|  +-- Skills           |         |  /api/hooks (CRUD)         |
|  +-- Hooks            |  SSE    |  /api/memory (CRUD)        |
|  +-- Memory           | <------ |  /api/plans (CRUD)         |
|  +-- Plans            |         |  /api/settings (R/W)       |
|  +-- Settings         |         |  /api/claude-md (R/W)      |
|  +-- CLAUDE.md        |         |  /api/search               |
+-----------------------+         |  /api/events (SSE)         |
                                  +-------------+--------------+
                                                | chokidar
                                  +-------------v--------------+
                                  |  ~/.claude/                 |
                                  |  ~/Projects/*/.claude/      |
                                  +----------------------------+

Single command start: npm start runs both server + Vite via concurrently.

Phase 1: Foundation — Project Setup + Dashboard

1.1 Scaffold project

  • npm create vite@latest with Vue + TypeScript
  • Install deps: express, cors, gray-matter, chokidar, concurrently, tsx, @vueuse/core, vue-router, pinia, fuse.js
  • Configure vite.config.ts with @ alias and /api proxy to :3141
  • Configure Tailwind with glassmorphism tokens from archy

1.2 Design system (src/style.css)

  • Port glassmorphism classes from neode-ui/src/style.css: .glass-card, .glass-button, .path-option-card, .info-card, .scope-badge
  • New classes: .skill-card, .hook-node, .memory-tree-item, .plan-progress-bar, .editor-panel
  • Background: #0a0a0a, accent: #fb923c

1.3 Backend: Project discovery

  • server/index.ts — Express on :3141 with CORS + JSON body parser
  • server/lib/discovery.ts — Scan ~/Projects/ for dirs with .claude/, decode ~/.claude/projects/ encoded paths, count skills/hooks/memory/plans per project
  • GET /api/projects — Return project list with counts

1.4 Frontend: App shell + Dashboard

  • AppShell.vue — Sidebar (project switcher + nav links) + router-view content area
  • Sidebar.vue — "Global" at top, then project list; active project highlighted; click to switch scope
  • Dashboard.vue — Stats row (total skills/hooks/memory/plans) + project cards grid
  • ProjectCard.vue — Glass card showing project name, path, skill/hook/memory counts, click to select
  • stores/projects.ts — Pinia store: projects[], activeProject, fetchProjects(), setActiveProject()

Verify: npm start opens browser, sidebar shows 5 projects + global, dashboard shows stats.

Phase 2: Skills Manager

2.1 Backend

  • server/lib/skill-parser.ts — Parse SKILL.md YAML frontmatter via gray-matter, handle both skills/{name}/SKILL.md (dir-based) and skills/{name}.md (flat) formats
  • server/lib/fs-utils.ts — Safe read/write/delete/mkdir helpers with atomic writes
  • server/routes/skills.ts — Full CRUD + POST /api/skills/move for scope transfers

2.2 Frontend

  • Skills.vue — Top bar: scope filter, grid/list toggle, category dropdown, search. Grid of SkillCards. FAB for "New Skill"
  • SkillCard.vue — Name, description (truncated), scope badge, category color stripe, allowed-tools pills. Click opens editor.
  • SkillEditor.vue — Slide-in panel: frontmatter form (name, description, category, tags, allowed-tools, disable-model-invocation toggle) + Monaco editor for markdown body + live preview
  • InheritanceMap.vue — Two-column view: global skills left, project skills right, connecting lines for name-matched overrides
  • Drag-and-drop: Drag SkillCard between global/project columns to move/copy. Uses vue-draggable-plus.

Verify: Browse all 77 skills, create/edit/delete, drag between scopes, see inheritance.

Phase 3: Hooks Manager

3.1 Backend

  • server/lib/hook-parser.ts — Parse settings.json hook entries + read referenced .sh files. Detect orphaned scripts.
  • server/routes/hooks.ts — CRUD + PUT /toggle for enable/disable. Creates .sh + updates settings.json atomically.

3.2 Frontend

  • Hooks.vue — Grouped by event type (PreToolUse, PostToolUse, UserPromptSubmit, Stop, SessionEnd)
  • HookPipeline.vue — Visual flow per hook: [Event Badge] -> [Matcher Pill] -> [Script Name] -> [Action] with CSS-drawn connecting arrows
  • HookCard.vue — Event type badge (color-coded), matcher, script filename, enabled/disabled toggle switch
  • HookEditor.vue — Monaco editor for .sh script + form for event type and matcher pattern
  • Orphaned scripts in "Unlinked Scripts" section with "Link" button

Verify: See all 15 hooks in pipeline view, toggle enable/disable, edit scripts, create new hook.

Phase 4: Memory Browser

4.1 Backend

  • server/lib/memory-parser.ts — Parse from both locations: {project}/.claude/memory/ (git-tracked) and ~/.claude/projects/{encoded}/memory/ (private). Parse YAML frontmatter.
  • server/routes/memory.ts — CRUD + auto-sync MEMORY.md index on create/delete

4.2 Frontend

  • Memory.vue — Split layout: tree panel (left 300px) + content panel (right)
  • MemoryTree.vue — Collapsible tree: Project -> Scope -> Type -> Files. Type badges: user (blue), feedback (orange), project (green), reference (purple)
  • MemoryEditor.vue — Frontmatter form (name, description, type dropdown) + Monaco editor + markdown preview toggle
  • Search input at top filters across titles and content

Verify: Browse all 17 memory files in tree, types color-coded, edit with preview, create new, MEMORY.md auto-updates.

Phase 5: Plans Tracker

5.1 Backend

  • server/lib/plan-parser.ts — Extract title from #, phases from ##, tasks from - [ ]/- [x] with line numbers. Calculate completion percentages.
  • server/routes/plans.ts — CRUD + PUT /task for toggling single checkbox by line number

5.2 Frontend

  • PlanCard.vue — Title, overall progress bar, phase count, "12/47 tasks" text
  • PlanDetail.vue — Expanded: title, summary, phases as sections with TaskCheckboxes
  • PhaseBar.vue — Segmented bar: green (done) / amber (in-progress) / gray (pending)
  • TaskCheckbox.vue — Click toggles checkbox, instant API call to update file
  • "Edit Raw" switches to Monaco. "New Plan" uses overnight template.

Verify: See all 19 plans with progress bars, toggle checkboxes that persist, create new plan.

Phase 6: Settings + CLAUDE.md Editor

6.1 Settings

  • Settings.vue — Scope tabs (Global / Project). Sections:
    • Permissions: toggle switches for allowed tools
    • Hooks: visual tree of event -> matcher -> command with add/remove
    • Plugins: installed plugin cards with enable/disable
    • Effort Level: dropdown
    • Raw JSON: toggle to edit settings.json directly in Monaco

6.2 CLAUDE.md

  • ClaudeMd.vue — Scope tabs. Monaco editor with markdown syntax. Live preview panel. Unsaved changes indicator. Save button.

Verify: Edit settings, toggle permissions, edit CLAUDE.md with preview, confirm files updated.

Phase 7: Polish — File Watching, Search, Animations

7.1 Live file watching

  • server/lib/file-watcher.ts — chokidar watches all .claude/ dirs. Debounce 300ms. Push SSE events.
  • useFileWatcher.ts composable — EventSource connection, triggers store refresh on changes

7.2 Global search

  • GET /api/search?q=bitcoin — Full-text across skills, memory, plans, CLAUDE.md
  • TopBar.vue — Cmd+K search input with dropdown results

7.3 Drag-and-drop refinement

  • vue-draggable-plus for skills between scopes and plan task reordering

7.4 Final polish

  • Loading skeletons, empty states, confirm dialogs on deletes
  • Keyboard shortcuts: Cmd+K (search), Cmd+S (save), Escape (close panels)
  • View transitions (fade + slide)

Verify: External file edits trigger UI refresh. Cmd+K searches everything. Drag skills between scopes.

Project Structure

Manage/
+-- package.json
+-- tsconfig.json
+-- vite.config.ts
+-- tailwind.config.ts
+-- index.html
+-- .gitignore
+-- server/
|   +-- index.ts
|   +-- tsconfig.json
|   +-- routes/
|   |   +-- projects.ts, skills.ts, hooks.ts, memory.ts
|   |   +-- plans.ts, settings.ts, claude-md.ts, search.ts
|   +-- lib/
|   |   +-- discovery.ts, skill-parser.ts, hook-parser.ts
|   |   +-- memory-parser.ts, plan-parser.ts, settings-parser.ts
|   |   +-- file-watcher.ts, fs-utils.ts
|   +-- types/
|       +-- index.ts
+-- src/
|   +-- main.ts, App.vue, style.css
|   +-- api/client.ts
|   +-- router/index.ts
|   +-- stores/ (projects, skills, hooks, memory, plans, settings, search)
|   +-- types/ (skill, hook, memory, plan, project, settings)
|   +-- composables/ (useFileWatcher, useMarkdownPreview, useMonaco)
|   +-- views/ (Dashboard, Skills, Hooks, Memory, Plans, Settings, ClaudeMd)
|   +-- components/
|       +-- layout/ (AppShell, Sidebar, TopBar)
|       +-- shared/ (GlassCard, GlassButton, ScopeBadge, MonacoEditor, etc.)
|       +-- dashboard/ (ProjectCard, QuickStats)
|       +-- skills/ (SkillCard, SkillEditor, SkillList, InheritanceMap)
|       +-- hooks/ (HookPipeline, HookCard, HookEditor)
|       +-- memory/ (MemoryTree, MemoryCard, MemoryEditor)
|       +-- plans/ (PlanCard, PlanDetail, PhaseBar, TaskCheckbox)
|       +-- settings/ (PermissionToggle, HookConfig, PluginCard)
+-- public/
    +-- favicon.svg

Key Libraries

Library Purpose
express + cors Backend HTTP server
tsx Run TypeScript server without build step
concurrently Run server + Vite in one command
gray-matter Parse YAML frontmatter from markdown
chokidar Watch filesystem for live updates
monaco-editor + @monaco-editor/loader Code editor (md, bash, json, yaml)
marked + highlight.js Markdown rendering with syntax highlighting
vue-draggable-plus Drag-and-drop for skills and plan tasks
fuse.js Client-side fuzzy search
@vueuse/core Vue utilities (useEventSource, useDebounceFn)

Key Decisions

  • Express over Bun: More predictable on macOS, better middleware ecosystem
  • SSE over WebSocket: File watching is server->client only. SSE auto-reconnects, simpler.
  • Monaco over CodeMirror: VS Code-like editing for all 4 file types
  • Atomic settings.json writes: Read-modify-write with temp file + rename
  • MEMORY.md auto-sync: Create/delete memory files auto-updates the index
  • Both skill formats: Parser handles dir-based and flat-file skills
Reference in New Issue View Git Blame Copy Permalink