245 lines
11 KiB
Markdown
245 lines
11 KiB
Markdown
# 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
|