# 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