From 3deab5fdf3aaaa148d2ca127e06e72e1cc2ed2ba Mon Sep 17 00:00:00 2001
From: Alex Blank <alexblank@fastmail.com>
Date: Mon, 11 May 2026 20:39:05 +0200
Subject: [PATCH] fix: resolve frontend code quality issues

- Create missing tsconfig.node.json for Vite config compilation
- Create postcss.config.js for Tailwind CSS processing
- Add test dependencies (vitest, testing-library, jsdom)
- Remove missing /vite.svg favicon reference from index.html
---
 .opencode/commands/opsx-apply.md              | 149 +++++++++
 .opencode/commands/opsx-archive.md            | 154 ++++++++++
 .opencode/commands/opsx-explore.md            | 170 +++++++++++
 .opencode/commands/opsx-propose.md            | 103 +++++++
 .../skills/openspec-apply-change/SKILL.md     | 156 ++++++++++
 .../skills/openspec-archive-change/SKILL.md   | 114 +++++++
 .opencode/skills/openspec-explore/SKILL.md    | 288 ++++++++++++++++++
 .opencode/skills/openspec-propose/SKILL.md    | 110 +++++++
 .../content/architecture-overview.html        | 113 +++++++
 .../content/backup-flow.html                  | 110 +++++++
 .../269331-1778521434/content/data-model.html | 128 ++++++++
 .../content/frontend-views.html               | 174 +++++++++++
 .../269331-1778521434/state/server-stopped    |   1 +
 .../269331-1778521434/state/server.log        |   6 +
 .../269331-1778521434/state/server.pid        |   1 +
 frontend/index.html                           |   1 -
 frontend/package.json                         |   6 +-
 frontend/postcss.config.js                    |   6 +
 frontend/tsconfig.node.json                   |  10 +
 openspec/config.yaml                          |  20 ++
 20 files changed, 1818 insertions(+), 2 deletions(-)
 create mode 100644 .opencode/commands/opsx-apply.md
 create mode 100644 .opencode/commands/opsx-archive.md
 create mode 100644 .opencode/commands/opsx-explore.md
 create mode 100644 .opencode/commands/opsx-propose.md
 create mode 100644 .opencode/skills/openspec-apply-change/SKILL.md
 create mode 100644 .opencode/skills/openspec-archive-change/SKILL.md
 create mode 100644 .opencode/skills/openspec-explore/SKILL.md
 create mode 100644 .opencode/skills/openspec-propose/SKILL.md
 create mode 100644 .superpowers/brainstorm/269331-1778521434/content/architecture-overview.html
 create mode 100644 .superpowers/brainstorm/269331-1778521434/content/backup-flow.html
 create mode 100644 .superpowers/brainstorm/269331-1778521434/content/data-model.html
 create mode 100644 .superpowers/brainstorm/269331-1778521434/content/frontend-views.html
 create mode 100644 .superpowers/brainstorm/269331-1778521434/state/server-stopped
 create mode 100644 .superpowers/brainstorm/269331-1778521434/state/server.log
 create mode 100644 .superpowers/brainstorm/269331-1778521434/state/server.pid
 create mode 100644 frontend/postcss.config.js
 create mode 100644 frontend/tsconfig.node.json
 create mode 100644 openspec/config.yaml

diff --git a/.opencode/commands/opsx-apply.md b/.opencode/commands/opsx-apply.md
new file mode 100644
index 0000000..16d2ef3
--- /dev/null
+++ b/.opencode/commands/opsx-apply.md
@@ -0,0 +1,149 @@
+---
+description: Implement tasks from an OpenSpec change (Experimental)
+---
+
+Implement tasks from an OpenSpec change.
+
+**Input**: Optionally specify a change name (e.g., `/opsx-apply add-auth`). If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
+
+**Steps**
+
+1. **Select the change**
+
+   If a name is provided, use it. Otherwise:
+   - Infer from conversation context if the user mentioned a change
+   - Auto-select if only one active change exists
+   - If ambiguous, run `openspec list --json` to get available changes and use the **AskUserQuestion tool** to let the user select
+
+   Always announce: "Using change: <name>" and how to override (e.g., `/opsx-apply <other>`).
+
+2. **Check status to understand the schema**
+   ```bash
+   openspec status --change "<name>" --json
+   ```
+   Parse the JSON to understand:
+   - `schemaName`: The workflow being used (e.g., "spec-driven")
+   - Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
+
+3. **Get apply instructions**
+
+   ```bash
+   openspec instructions apply --change "<name>" --json
+   ```
+
+   This returns:
+   - `contextFiles`: artifact ID -> array of concrete file paths (varies by schema)
+   - Progress (total, complete, remaining)
+   - Task list with status
+   - Dynamic instruction based on current state
+
+   **Handle states:**
+   - If `state: "blocked"` (missing artifacts): show message, suggest using `/opsx-continue`
+   - If `state: "all_done"`: congratulate, suggest archive
+   - Otherwise: proceed to implementation
+
+4. **Read context files**
+
+   Read every file path listed under `contextFiles` from the apply instructions output.
+   The files depend on the schema being used:
+   - **spec-driven**: proposal, specs, design, tasks
+   - Other schemas: follow the contextFiles from CLI output
+
+5. **Show current progress**
+
+   Display:
+   - Schema being used
+   - Progress: "N/M tasks complete"
+   - Remaining tasks overview
+   - Dynamic instruction from CLI
+
+6. **Implement tasks (loop until done or blocked)**
+
+   For each pending task:
+   - Show which task is being worked on
+   - Make the code changes required
+   - Keep changes minimal and focused
+   - Mark task complete in the tasks file: `- [ ]` → `- [x]`
+   - Continue to next task
+
+   **Pause if:**
+   - Task is unclear → ask for clarification
+   - Implementation reveals a design issue → suggest updating artifacts
+   - Error or blocker encountered → report and wait for guidance
+   - User interrupts
+
+7. **On completion or pause, show status**
+
+   Display:
+   - Tasks completed this session
+   - Overall progress: "N/M tasks complete"
+   - If all done: suggest archive
+   - If paused: explain why and wait for guidance
+
+**Output During Implementation**
+
+```
+## Implementing: <change-name> (schema: <schema-name>)
+
+Working on task 3/7: <task description>
+[...implementation happening...]
+✓ Task complete
+
+Working on task 4/7: <task description>
+[...implementation happening...]
+✓ Task complete
+```
+
+**Output On Completion**
+
+```
+## Implementation Complete
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Progress:** 7/7 tasks complete ✓
+
+### Completed This Session
+- [x] Task 1
+- [x] Task 2
+...
+
+All tasks complete! You can archive this change with `/opsx-archive`.
+```
+
+**Output On Pause (Issue Encountered)**
+
+```
+## Implementation Paused
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Progress:** 4/7 tasks complete
+
+### Issue Encountered
+<description of the issue>
+
+**Options:**
+1. <option 1>
+2. <option 2>
+3. Other approach
+
+What would you like to do?
+```
+
+**Guardrails**
+- Keep going through tasks until done or blocked
+- Always read context files before starting (from the apply instructions output)
+- If task is ambiguous, pause and ask before implementing
+- If implementation reveals issues, pause and suggest artifact updates
+- Keep code changes minimal and scoped to each task
+- Update task checkbox immediately after completing each task
+- Pause on errors, blockers, or unclear requirements - don't guess
+- Use contextFiles from CLI output, don't assume specific file names
+
+**Fluid Workflow Integration**
+
+This skill supports the "actions on a change" model:
+
+- **Can be invoked anytime**: Before all artifacts are done (if tasks exist), after partial implementation, interleaved with other actions
+- **Allows artifact updates**: If implementation reveals design issues, suggest updating artifacts - not phase-locked, work fluidly
diff --git a/.opencode/commands/opsx-archive.md b/.opencode/commands/opsx-archive.md
new file mode 100644
index 0000000..2bd807a
--- /dev/null
+++ b/.opencode/commands/opsx-archive.md
@@ -0,0 +1,154 @@
+---
+description: Archive a completed change in the experimental workflow
+---
+
+Archive a completed change in the experimental workflow.
+
+**Input**: Optionally specify a change name after `/opsx-archive` (e.g., `/opsx-archive add-auth`). If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
+
+**Steps**
+
+1. **If no change name provided, prompt for selection**
+
+   Run `openspec list --json` to get available changes. Use the **AskUserQuestion tool** to let the user select.
+
+   Show only active changes (not already archived).
+   Include the schema used for each change if available.
+
+   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
+
+2. **Check artifact completion status**
+
+   Run `openspec status --change "<name>" --json` to check artifact completion.
+
+   Parse the JSON to understand:
+   - `schemaName`: The workflow being used
+   - `artifacts`: List of artifacts with their status (`done` or other)
+
+   **If any artifacts are not `done`:**
+   - Display warning listing incomplete artifacts
+   - Prompt user for confirmation to continue
+   - Proceed if user confirms
+
+3. **Check task completion status**
+
+   Read the tasks file (typically `tasks.md`) to check for incomplete tasks.
+
+   Count tasks marked with `- [ ]` (incomplete) vs `- [x]` (complete).
+
+   **If incomplete tasks found:**
+   - Display warning showing count of incomplete tasks
+   - Prompt user for confirmation to continue
+   - Proceed if user confirms
+
+   **If no tasks file exists:** Proceed without task-related warning.
+
+4. **Assess delta spec sync state**
+
+   Check for delta specs at `openspec/changes/<name>/specs/`. If none exist, proceed without sync prompt.
+
+   **If delta specs exist:**
+   - Compare each delta spec with its corresponding main spec at `openspec/specs/<capability>/spec.md`
+   - Determine what changes would be applied (adds, modifications, removals, renames)
+   - Show a combined summary before prompting
+
+   **Prompt options:**
+   - If changes needed: "Sync now (recommended)", "Archive without syncing"
+   - If already synced: "Archive now", "Sync anyway", "Cancel"
+
+   If user chooses sync, use Task tool (subagent_type: "general-purpose", prompt: "Use Skill tool to invoke openspec-sync-specs for change '<name>'. Delta spec analysis: <include the analyzed delta spec summary>"). Proceed to archive regardless of choice.
+
+5. **Perform the archive**
+
+   Create the archive directory if it doesn't exist:
+   ```bash
+   mkdir -p openspec/changes/archive
+   ```
+
+   Generate target name using current date: `YYYY-MM-DD-<change-name>`
+
+   **Check if target already exists:**
+   - If yes: Fail with error, suggest renaming existing archive or using different date
+   - If no: Move the change directory to archive
+
+   ```bash
+   mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
+   ```
+
+6. **Display summary**
+
+   Show archive completion summary including:
+   - Change name
+   - Schema that was used
+   - Archive location
+   - Spec sync status (synced / sync skipped / no delta specs)
+   - Note about any warnings (incomplete artifacts/tasks)
+
+**Output On Success**
+
+```
+## Archive Complete
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Archived to:** openspec/changes/archive/YYYY-MM-DD-<name>/
+**Specs:** ✓ Synced to main specs
+
+All artifacts complete. All tasks complete.
+```
+
+**Output On Success (No Delta Specs)**
+
+```
+## Archive Complete
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Archived to:** openspec/changes/archive/YYYY-MM-DD-<name>/
+**Specs:** No delta specs
+
+All artifacts complete. All tasks complete.
+```
+
+**Output On Success With Warnings**
+
+```
+## Archive Complete (with warnings)
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Archived to:** openspec/changes/archive/YYYY-MM-DD-<name>/
+**Specs:** Sync skipped (user chose to skip)
+
+**Warnings:**
+- Archived with 2 incomplete artifacts
+- Archived with 3 incomplete tasks
+- Delta spec sync was skipped (user chose to skip)
+
+Review the archive if this was not intentional.
+```
+
+**Output On Error (Archive Exists)**
+
+```
+## Archive Failed
+
+**Change:** <change-name>
+**Target:** openspec/changes/archive/YYYY-MM-DD-<name>/
+
+Target archive directory already exists.
+
+**Options:**
+1. Rename the existing archive
+2. Delete the existing archive if it's a duplicate
+3. Wait until a different date to archive
+```
+
+**Guardrails**
+- Always prompt for change selection if not provided
+- Use artifact graph (openspec status --json) for completion checking
+- Don't block archive on warnings - just inform and confirm
+- Preserve .openspec.yaml when moving to archive (it moves with the directory)
+- Show clear summary of what happened
+- If sync is requested, use the Skill tool to invoke `openspec-sync-specs` (agent-driven)
+- If delta specs exist, always run the sync assessment and show the combined summary before prompting
diff --git a/.opencode/commands/opsx-explore.md b/.opencode/commands/opsx-explore.md
new file mode 100644
index 0000000..7db25f6
--- /dev/null
+++ b/.opencode/commands/opsx-explore.md
@@ -0,0 +1,170 @@
+---
+description: Enter explore mode - think through ideas, investigate problems, clarify requirements
+---
+
+Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes.
+
+**IMPORTANT: Explore mode is for thinking, not implementing.** You may read files, search code, and investigate the codebase, but you must NEVER write code or implement features. If the user asks you to implement something, remind them to exit explore mode first and create a change proposal. You MAY create OpenSpec artifacts (proposals, designs, specs) if the user asks—that's capturing thinking, not implementing.
+
+**This is a stance, not a workflow.** There are no fixed steps, no required sequence, no mandatory outputs. You're a thinking partner helping the user explore.
+
+**Input**: The argument after `/opsx-explore` is whatever the user wants to think about. Could be:
+- A vague idea: "real-time collaboration"
+- A specific problem: "the auth system is getting unwieldy"
+- A change name: "add-dark-mode" (to explore in context of that change)
+- A comparison: "postgres vs sqlite for this"
+- Nothing (just enter explore mode)
+
+---
+
+## The Stance
+
+- **Curious, not prescriptive** - Ask questions that emerge naturally, don't follow a script
+- **Open threads, not interrogations** - Surface multiple interesting directions and let the user follow what resonates. Don't funnel them through a single path of questions.
+- **Visual** - Use ASCII diagrams liberally when they'd help clarify thinking
+- **Adaptive** - Follow interesting threads, pivot when new information emerges
+- **Patient** - Don't rush to conclusions, let the shape of the problem emerge
+- **Grounded** - Explore the actual codebase when relevant, don't just theorize
+
+---
+
+## What You Might Do
+
+Depending on what the user brings, you might:
+
+**Explore the problem space**
+- Ask clarifying questions that emerge from what they said
+- Challenge assumptions
+- Reframe the problem
+- Find analogies
+
+**Investigate the codebase**
+- Map existing architecture relevant to the discussion
+- Find integration points
+- Identify patterns already in use
+- Surface hidden complexity
+
+**Compare options**
+- Brainstorm multiple approaches
+- Build comparison tables
+- Sketch tradeoffs
+- Recommend a path (if asked)
+
+**Visualize**
+```
+┌─────────────────────────────────────────┐
+│     Use ASCII diagrams liberally        │
+├─────────────────────────────────────────┤
+│                                         │
+│      ┌────────┐         ┌────────┐      │
+│      │ State  │────────▶│ State  │      │
+│      │   A    │         │   B    │      │
+│      └────────┘         └────────┘      │
+│                                         │
+│   System diagrams, state machines,      │
+│   data flows, architecture sketches,    │
+│   dependency graphs, comparison tables  │
+│                                         │
+└─────────────────────────────────────────┘
+```
+
+**Surface risks and unknowns**
+- Identify what could go wrong
+- Find gaps in understanding
+- Suggest spikes or investigations
+
+---
+
+## OpenSpec Awareness
+
+You have full context of the OpenSpec system. Use it naturally, don't force it.
+
+### Check for context
+
+At the start, quickly check what exists:
+```bash
+openspec list --json
+```
+
+This tells you:
+- If there are active changes
+- Their names, schemas, and status
+- What the user might be working on
+
+If the user mentioned a specific change name, read its artifacts for context.
+
+### When no change exists
+
+Think freely. When insights crystallize, you might offer:
+
+- "This feels solid enough to start a change. Want me to create a proposal?"
+- Or keep exploring - no pressure to formalize
+
+### When a change exists
+
+If the user mentions a change or you detect one is relevant:
+
+1. **Read existing artifacts for context**
+   - `openspec/changes/<name>/proposal.md`
+   - `openspec/changes/<name>/design.md`
+   - `openspec/changes/<name>/tasks.md`
+   - etc.
+
+2. **Reference them naturally in conversation**
+   - "Your design mentions using Redis, but we just realized SQLite fits better..."
+   - "The proposal scopes this to premium users, but we're now thinking everyone..."
+
+3. **Offer to capture when decisions are made**
+
+    | Insight Type               | Where to Capture               |
+    |----------------------------|--------------------------------|
+    | New requirement discovered | `specs/<capability>/spec.md` |
+    | Requirement changed        | `specs/<capability>/spec.md` |
+    | Design decision made       | `design.md`                  |
+    | Scope changed              | `proposal.md`                |
+    | New work identified        | `tasks.md`                   |
+    | Assumption invalidated     | Relevant artifact              |
+
+   Example offers:
+   - "That's a design decision. Capture it in design.md?"
+   - "This is a new requirement. Add it to specs?"
+   - "This changes scope. Update the proposal?"
+
+4. **The user decides** - Offer and move on. Don't pressure. Don't auto-capture.
+
+---
+
+## What You Don't Have To Do
+
+- Follow a script
+- Ask the same questions every time
+- Produce a specific artifact
+- Reach a conclusion
+- Stay on topic if a tangent is valuable
+- Be brief (this is thinking time)
+
+---
+
+## Ending Discovery
+
+There's no required ending. Discovery might:
+
+- **Flow into a proposal**: "Ready to start? I can create a change proposal."
+- **Result in artifact updates**: "Updated design.md with these decisions"
+- **Just provide clarity**: User has what they need, moves on
+- **Continue later**: "We can pick this up anytime"
+
+When things crystallize, you might offer a summary - but it's optional. Sometimes the thinking IS the value.
+
+---
+
+## Guardrails
+
+- **Don't implement** - Never write code or implement features. Creating OpenSpec artifacts is fine, writing application code is not.
+- **Don't fake understanding** - If something is unclear, dig deeper
+- **Don't rush** - Discovery is thinking time, not task time
+- **Don't force structure** - Let patterns emerge naturally
+- **Don't auto-capture** - Offer to save insights, don't just do it
+- **Do visualize** - A good diagram is worth many paragraphs
+- **Do explore the codebase** - Ground discussions in reality
+- **Do question assumptions** - Including the user's and your own
diff --git a/.opencode/commands/opsx-propose.md b/.opencode/commands/opsx-propose.md
new file mode 100644
index 0000000..b063a7e
--- /dev/null
+++ b/.opencode/commands/opsx-propose.md
@@ -0,0 +1,103 @@
+---
+description: Propose a new change - create it and generate all artifacts in one step
+---
+
+Propose a new change - create the change and generate all artifacts in one step.
+
+I'll create a change with artifacts:
+- proposal.md (what & why)
+- design.md (how)
+- tasks.md (implementation steps)
+
+When ready to implement, run /opsx-apply
+
+---
+
+**Input**: The argument after `/opsx-propose` is the change name (kebab-case), OR a description of what the user wants to build.
+
+**Steps**
+
+1. **If no input provided, ask what they want to build**
+
+   Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+   > "What change do you want to work on? Describe what you want to build or fix."
+
+   From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
+
+   **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
+
+2. **Create the change directory**
+   ```bash
+   openspec new change "<name>"
+   ```
+   This creates a scaffolded change at `openspec/changes/<name>/` with `.openspec.yaml`.
+
+3. **Get the artifact build order**
+   ```bash
+   openspec status --change "<name>" --json
+   ```
+   Parse the JSON to get:
+   - `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
+   - `artifacts`: list of all artifacts with their status and dependencies
+
+4. **Create artifacts in sequence until apply-ready**
+
+   Use the **TodoWrite tool** to track progress through the artifacts.
+
+   Loop through artifacts in dependency order (artifacts with no pending dependencies first):
+
+   a. **For each artifact that is `ready` (dependencies satisfied)**:
+      - Get instructions:
+        ```bash
+        openspec instructions <artifact-id> --change "<name>" --json
+        ```
+      - The instructions JSON includes:
+        - `context`: Project background (constraints for you - do NOT include in output)
+        - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
+        - `template`: The structure to use for your output file
+        - `instruction`: Schema-specific guidance for this artifact type
+        - `outputPath`: Where to write the artifact
+        - `dependencies`: Completed artifacts to read for context
+      - Read any completed dependency files for context
+      - Create the artifact file using `template` as the structure
+      - Apply `context` and `rules` as constraints - but do NOT copy them into the file
+      - Show brief progress: "Created <artifact-id>"
+
+   b. **Continue until all `applyRequires` artifacts are complete**
+      - After creating each artifact, re-run `openspec status --change "<name>" --json`
+      - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
+      - Stop when all `applyRequires` artifacts are done
+
+   c. **If an artifact requires user input** (unclear context):
+      - Use **AskUserQuestion tool** to clarify
+      - Then continue with creation
+
+5. **Show final status**
+   ```bash
+   openspec status --change "<name>"
+   ```
+
+**Output**
+
+After completing all artifacts, summarize:
+- Change name and location
+- List of artifacts created with brief descriptions
+- What's ready: "All artifacts created! Ready for implementation."
+- Prompt: "Run `/opsx-apply` to start implementing."
+
+**Artifact Creation Guidelines**
+
+- Follow the `instruction` field from `openspec instructions` for each artifact type
+- The schema defines what each artifact should contain - follow it
+- Read dependency artifacts for context before creating new ones
+- Use `template` as the structure for your output file - fill in its sections
+- **IMPORTANT**: `context` and `rules` are constraints for YOU, not content for the file
+  - Do NOT copy `<context>`, `<rules>`, `<project_context>` blocks into the artifact
+  - These guide what you write, but should never appear in the output
+
+**Guardrails**
+- Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
+- Always read dependency artifacts before creating a new one
+- If context is critically unclear, ask the user - but prefer making reasonable decisions to keep momentum
+- If a change with that name already exists, ask if user wants to continue it or create a new one
+- Verify each artifact file exists after writing before proceeding to next
diff --git a/.opencode/skills/openspec-apply-change/SKILL.md b/.opencode/skills/openspec-apply-change/SKILL.md
new file mode 100644
index 0000000..86c881d
--- /dev/null
+++ b/.opencode/skills/openspec-apply-change/SKILL.md
@@ -0,0 +1,156 @@
+---
+name: openspec-apply-change
+description: Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.
+license: MIT
+compatibility: Requires openspec CLI.
+metadata:
+  author: openspec
+  version: "1.0"
+  generatedBy: "1.3.1"
+---
+
+Implement tasks from an OpenSpec change.
+
+**Input**: Optionally specify a change name. If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
+
+**Steps**
+
+1. **Select the change**
+
+   If a name is provided, use it. Otherwise:
+   - Infer from conversation context if the user mentioned a change
+   - Auto-select if only one active change exists
+   - If ambiguous, run `openspec list --json` to get available changes and use the **AskUserQuestion tool** to let the user select
+
+   Always announce: "Using change: <name>" and how to override (e.g., `/opsx-apply <other>`).
+
+2. **Check status to understand the schema**
+   ```bash
+   openspec status --change "<name>" --json
+   ```
+   Parse the JSON to understand:
+   - `schemaName`: The workflow being used (e.g., "spec-driven")
+   - Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
+
+3. **Get apply instructions**
+
+   ```bash
+   openspec instructions apply --change "<name>" --json
+   ```
+
+   This returns:
+   - `contextFiles`: artifact ID -> array of concrete file paths (varies by schema - could be proposal/specs/design/tasks or spec/tests/implementation/docs)
+   - Progress (total, complete, remaining)
+   - Task list with status
+   - Dynamic instruction based on current state
+
+   **Handle states:**
+   - If `state: "blocked"` (missing artifacts): show message, suggest using openspec-continue-change
+   - If `state: "all_done"`: congratulate, suggest archive
+   - Otherwise: proceed to implementation
+
+4. **Read context files**
+
+   Read every file path listed under `contextFiles` from the apply instructions output.
+   The files depend on the schema being used:
+   - **spec-driven**: proposal, specs, design, tasks
+   - Other schemas: follow the contextFiles from CLI output
+
+5. **Show current progress**
+
+   Display:
+   - Schema being used
+   - Progress: "N/M tasks complete"
+   - Remaining tasks overview
+   - Dynamic instruction from CLI
+
+6. **Implement tasks (loop until done or blocked)**
+
+   For each pending task:
+   - Show which task is being worked on
+   - Make the code changes required
+   - Keep changes minimal and focused
+   - Mark task complete in the tasks file: `- [ ]` → `- [x]`
+   - Continue to next task
+
+   **Pause if:**
+   - Task is unclear → ask for clarification
+   - Implementation reveals a design issue → suggest updating artifacts
+   - Error or blocker encountered → report and wait for guidance
+   - User interrupts
+
+7. **On completion or pause, show status**
+
+   Display:
+   - Tasks completed this session
+   - Overall progress: "N/M tasks complete"
+   - If all done: suggest archive
+   - If paused: explain why and wait for guidance
+
+**Output During Implementation**
+
+```
+## Implementing: <change-name> (schema: <schema-name>)
+
+Working on task 3/7: <task description>
+[...implementation happening...]
+✓ Task complete
+
+Working on task 4/7: <task description>
+[...implementation happening...]
+✓ Task complete
+```
+
+**Output On Completion**
+
+```
+## Implementation Complete
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Progress:** 7/7 tasks complete ✓
+
+### Completed This Session
+- [x] Task 1
+- [x] Task 2
+...
+
+All tasks complete! Ready to archive this change.
+```
+
+**Output On Pause (Issue Encountered)**
+
+```
+## Implementation Paused
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Progress:** 4/7 tasks complete
+
+### Issue Encountered
+<description of the issue>
+
+**Options:**
+1. <option 1>
+2. <option 2>
+3. Other approach
+
+What would you like to do?
+```
+
+**Guardrails**
+- Keep going through tasks until done or blocked
+- Always read context files before starting (from the apply instructions output)
+- If task is ambiguous, pause and ask before implementing
+- If implementation reveals issues, pause and suggest artifact updates
+- Keep code changes minimal and scoped to each task
+- Update task checkbox immediately after completing each task
+- Pause on errors, blockers, or unclear requirements - don't guess
+- Use contextFiles from CLI output, don't assume specific file names
+
+**Fluid Workflow Integration**
+
+This skill supports the "actions on a change" model:
+
+- **Can be invoked anytime**: Before all artifacts are done (if tasks exist), after partial implementation, interleaved with other actions
+- **Allows artifact updates**: If implementation reveals design issues, suggest updating artifacts - not phase-locked, work fluidly
diff --git a/.opencode/skills/openspec-archive-change/SKILL.md b/.opencode/skills/openspec-archive-change/SKILL.md
new file mode 100644
index 0000000..12e2f70
--- /dev/null
+++ b/.opencode/skills/openspec-archive-change/SKILL.md
@@ -0,0 +1,114 @@
+---
+name: openspec-archive-change
+description: Archive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.
+license: MIT
+compatibility: Requires openspec CLI.
+metadata:
+  author: openspec
+  version: "1.0"
+  generatedBy: "1.3.1"
+---
+
+Archive a completed change in the experimental workflow.
+
+**Input**: Optionally specify a change name. If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
+
+**Steps**
+
+1. **If no change name provided, prompt for selection**
+
+   Run `openspec list --json` to get available changes. Use the **AskUserQuestion tool** to let the user select.
+
+   Show only active changes (not already archived).
+   Include the schema used for each change if available.
+
+   **IMPORTANT**: Do NOT guess or auto-select a change. Always let the user choose.
+
+2. **Check artifact completion status**
+
+   Run `openspec status --change "<name>" --json` to check artifact completion.
+
+   Parse the JSON to understand:
+   - `schemaName`: The workflow being used
+   - `artifacts`: List of artifacts with their status (`done` or other)
+
+   **If any artifacts are not `done`:**
+   - Display warning listing incomplete artifacts
+   - Use **AskUserQuestion tool** to confirm user wants to proceed
+   - Proceed if user confirms
+
+3. **Check task completion status**
+
+   Read the tasks file (typically `tasks.md`) to check for incomplete tasks.
+
+   Count tasks marked with `- [ ]` (incomplete) vs `- [x]` (complete).
+
+   **If incomplete tasks found:**
+   - Display warning showing count of incomplete tasks
+   - Use **AskUserQuestion tool** to confirm user wants to proceed
+   - Proceed if user confirms
+
+   **If no tasks file exists:** Proceed without task-related warning.
+
+4. **Assess delta spec sync state**
+
+   Check for delta specs at `openspec/changes/<name>/specs/`. If none exist, proceed without sync prompt.
+
+   **If delta specs exist:**
+   - Compare each delta spec with its corresponding main spec at `openspec/specs/<capability>/spec.md`
+   - Determine what changes would be applied (adds, modifications, removals, renames)
+   - Show a combined summary before prompting
+
+   **Prompt options:**
+   - If changes needed: "Sync now (recommended)", "Archive without syncing"
+   - If already synced: "Archive now", "Sync anyway", "Cancel"
+
+   If user chooses sync, use Task tool (subagent_type: "general-purpose", prompt: "Use Skill tool to invoke openspec-sync-specs for change '<name>'. Delta spec analysis: <include the analyzed delta spec summary>"). Proceed to archive regardless of choice.
+
+5. **Perform the archive**
+
+   Create the archive directory if it doesn't exist:
+   ```bash
+   mkdir -p openspec/changes/archive
+   ```
+
+   Generate target name using current date: `YYYY-MM-DD-<change-name>`
+
+   **Check if target already exists:**
+   - If yes: Fail with error, suggest renaming existing archive or using different date
+   - If no: Move the change directory to archive
+
+   ```bash
+   mv openspec/changes/<name> openspec/changes/archive/YYYY-MM-DD-<name>
+   ```
+
+6. **Display summary**
+
+   Show archive completion summary including:
+   - Change name
+   - Schema that was used
+   - Archive location
+   - Whether specs were synced (if applicable)
+   - Note about any warnings (incomplete artifacts/tasks)
+
+**Output On Success**
+
+```
+## Archive Complete
+
+**Change:** <change-name>
+**Schema:** <schema-name>
+**Archived to:** openspec/changes/archive/YYYY-MM-DD-<name>/
+**Specs:** ✓ Synced to main specs (or "No delta specs" or "Sync skipped")
+
+All artifacts complete. All tasks complete.
+```
+
+**Guardrails**
+- Always prompt for change selection if not provided
+- Use artifact graph (openspec status --json) for completion checking
+- Don't block archive on warnings - just inform and confirm
+- Preserve .openspec.yaml when moving to archive (it moves with the directory)
+- Show clear summary of what happened
+- If sync is requested, use openspec-sync-specs approach (agent-driven)
+- If delta specs exist, always run the sync assessment and show the combined summary before prompting
diff --git a/.opencode/skills/openspec-explore/SKILL.md b/.opencode/skills/openspec-explore/SKILL.md
new file mode 100644
index 0000000..8c7225c
--- /dev/null
+++ b/.opencode/skills/openspec-explore/SKILL.md
@@ -0,0 +1,288 @@
+---
+name: openspec-explore
+description: Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
+license: MIT
+compatibility: Requires openspec CLI.
+metadata:
+  author: openspec
+  version: "1.0"
+  generatedBy: "1.3.1"
+---
+
+Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes.
+
+**IMPORTANT: Explore mode is for thinking, not implementing.** You may read files, search code, and investigate the codebase, but you must NEVER write code or implement features. If the user asks you to implement something, remind them to exit explore mode first and create a change proposal. You MAY create OpenSpec artifacts (proposals, designs, specs) if the user asks—that's capturing thinking, not implementing.
+
+**This is a stance, not a workflow.** There are no fixed steps, no required sequence, no mandatory outputs. You're a thinking partner helping the user explore.
+
+---
+
+## The Stance
+
+- **Curious, not prescriptive** - Ask questions that emerge naturally, don't follow a script
+- **Open threads, not interrogations** - Surface multiple interesting directions and let the user follow what resonates. Don't funnel them through a single path of questions.
+- **Visual** - Use ASCII diagrams liberally when they'd help clarify thinking
+- **Adaptive** - Follow interesting threads, pivot when new information emerges
+- **Patient** - Don't rush to conclusions, let the shape of the problem emerge
+- **Grounded** - Explore the actual codebase when relevant, don't just theorize
+
+---
+
+## What You Might Do
+
+Depending on what the user brings, you might:
+
+**Explore the problem space**
+- Ask clarifying questions that emerge from what they said
+- Challenge assumptions
+- Reframe the problem
+- Find analogies
+
+**Investigate the codebase**
+- Map existing architecture relevant to the discussion
+- Find integration points
+- Identify patterns already in use
+- Surface hidden complexity
+
+**Compare options**
+- Brainstorm multiple approaches
+- Build comparison tables
+- Sketch tradeoffs
+- Recommend a path (if asked)
+
+**Visualize**
+```
+┌─────────────────────────────────────────┐
+│     Use ASCII diagrams liberally        │
+├─────────────────────────────────────────┤
+│                                         │
+│      ┌────────┐         ┌────────┐      │
+│      │ State  │────────▶│ State  │      │
+│      │   A    │         │   B    │      │
+│      └────────┘         └────────┘      │
+│                                         │
+│   System diagrams, state machines,      │
+│   data flows, architecture sketches,    │
+│   dependency graphs, comparison tables  │
+│                                         │
+└─────────────────────────────────────────┘
+```
+
+**Surface risks and unknowns**
+- Identify what could go wrong
+- Find gaps in understanding
+- Suggest spikes or investigations
+
+---
+
+## OpenSpec Awareness
+
+You have full context of the OpenSpec system. Use it naturally, don't force it.
+
+### Check for context
+
+At the start, quickly check what exists:
+```bash
+openspec list --json
+```
+
+This tells you:
+- If there are active changes
+- Their names, schemas, and status
+- What the user might be working on
+
+### When no change exists
+
+Think freely. When insights crystallize, you might offer:
+
+- "This feels solid enough to start a change. Want me to create a proposal?"
+- Or keep exploring - no pressure to formalize
+
+### When a change exists
+
+If the user mentions a change or you detect one is relevant:
+
+1. **Read existing artifacts for context**
+   - `openspec/changes/<name>/proposal.md`
+   - `openspec/changes/<name>/design.md`
+   - `openspec/changes/<name>/tasks.md`
+   - etc.
+
+2. **Reference them naturally in conversation**
+   - "Your design mentions using Redis, but we just realized SQLite fits better..."
+   - "The proposal scopes this to premium users, but we're now thinking everyone..."
+
+3. **Offer to capture when decisions are made**
+
+    | Insight Type               | Where to Capture               |
+    |----------------------------|--------------------------------|
+    | New requirement discovered | `specs/<capability>/spec.md` |
+    | Requirement changed        | `specs/<capability>/spec.md` |
+    | Design decision made       | `design.md`                  |
+    | Scope changed              | `proposal.md`                |
+    | New work identified        | `tasks.md`                   |
+    | Assumption invalidated     | Relevant artifact              |
+
+   Example offers:
+   - "That's a design decision. Capture it in design.md?"
+   - "This is a new requirement. Add it to specs?"
+   - "This changes scope. Update the proposal?"
+
+4. **The user decides** - Offer and move on. Don't pressure. Don't auto-capture.
+
+---
+
+## What You Don't Have To Do
+
+- Follow a script
+- Ask the same questions every time
+- Produce a specific artifact
+- Reach a conclusion
+- Stay on topic if a tangent is valuable
+- Be brief (this is thinking time)
+
+---
+
+## Handling Different Entry Points
+
+**User brings a vague idea:**
+```
+User: I'm thinking about adding real-time collaboration
+
+You: Real-time collab is a big space. Let me think about this...
+
+      COLLABORATION SPECTRUM
+      ════════════════════════════════════════════
+
+      Awareness          Coordination         Sync
+          │                   │                 │
+          ▼                   ▼                 ▼
+      ┌────────┐         ┌────────┐        ┌────────┐
+      │Presence│         │Cursors │        │  CRDT  │
+      │  "3    │         │ Multi  │        │Conflict│
+      │online" │         │ select │        │  free  │
+      └────────┘         └────────┘        └────────┘
+          │                   │                 │
+       trivial            moderate           complex
+
+      Where's your head at?
+```
+
+**User brings a specific problem:**
+```
+User: The auth system is a mess
+
+You: [reads codebase]
+
+     ┌─────────────────────────────────────────────┐
+     │              CURRENT AUTH FLOW              │
+     └─────────────────────────────────────────────┘
+                        │
+          ┌─────────────┼─────────────┐
+          ▼             ▼             ▼
+     ┌─────────┐  ┌─────────┐  ┌─────────┐
+     │ Google  │  │  GitHub │  │  Email  │
+     │  OAuth  │  │  OAuth  │  │  Magic  │
+     └────┬────┘  └────┬────┘  └────┬────┘
+          │             │             │
+          └─────────────┼─────────────┘
+                        ▼
+                  ┌───────────┐
+                  │  Session  │
+                  └─────┬─────┘
+                        │
+                        ▼
+                  ┌───────────┐
+                  │   Perms   │
+                  └───────────┘
+
+     I see three tangles. Which one's burning?
+```
+
+**User is stuck mid-implementation:**
+```
+User: /opsx-explore add-auth-system
+      The OAuth integration is more complex than expected
+
+You: [reads change artifacts]
+
+     You're on task 4: "Implement OAuth flow"
+
+     Let me trace what's involved...
+
+     [draws diagram, explores options, suggests paths]
+
+     Want to update the design to reflect this?
+     Or add a spike task to investigate?
+```
+
+**User wants to compare options:**
+```
+User: Should we use Postgres or SQLite?
+
+You: Generic answer is boring. What's the context?
+
+User: A CLI tool that tracks local dev environments
+
+You: That changes everything.
+
+     ┌─────────────────────────────────────────────────┐
+     │          CLI TOOL DATA STORAGE                  │
+     └─────────────────────────────────────────────────┘
+
+     Key constraints:
+     • No daemon running
+     • Must work offline
+     • Single user
+
+                  SQLite          Postgres
+     Deployment   embedded ✓      needs server ✗
+     Offline      yes ✓           no ✗
+     Single file  yes ✓           no ✗
+
+     SQLite. Not even close.
+
+     Unless... is there a sync component?
+```
+
+---
+
+## Ending Discovery
+
+There's no required ending. Discovery might:
+
+- **Flow into a proposal**: "Ready to start? I can create a change proposal."
+- **Result in artifact updates**: "Updated design.md with these decisions"
+- **Just provide clarity**: User has what they need, moves on
+- **Continue later**: "We can pick this up anytime"
+
+When it feels like things are crystallizing, you might summarize:
+
+```
+## What We Figured Out
+
+**The problem**: [crystallized understanding]
+
+**The approach**: [if one emerged]
+
+**Open questions**: [if any remain]
+
+**Next steps** (if ready):
+- Create a change proposal
+- Keep exploring: just keep talking
+```
+
+But this summary is optional. Sometimes the thinking IS the value.
+
+---
+
+## Guardrails
+
+- **Don't implement** - Never write code or implement features. Creating OpenSpec artifacts is fine, writing application code is not.
+- **Don't fake understanding** - If something is unclear, dig deeper
+- **Don't rush** - Discovery is thinking time, not task time
+- **Don't force structure** - Let patterns emerge naturally
+- **Don't auto-capture** - Offer to save insights, don't just do it
+- **Do visualize** - A good diagram is worth many paragraphs
+- **Do explore the codebase** - Ground discussions in reality
+- **Do question assumptions** - Including the user's and your own
diff --git a/.opencode/skills/openspec-propose/SKILL.md b/.opencode/skills/openspec-propose/SKILL.md
new file mode 100644
index 0000000..05fdc62
--- /dev/null
+++ b/.opencode/skills/openspec-propose/SKILL.md
@@ -0,0 +1,110 @@
+---
+name: openspec-propose
+description: Propose a new change with all artifacts generated in one step. Use when the user wants to quickly describe what they want to build and get a complete proposal with design, specs, and tasks ready for implementation.
+license: MIT
+compatibility: Requires openspec CLI.
+metadata:
+  author: openspec
+  version: "1.0"
+  generatedBy: "1.3.1"
+---
+
+Propose a new change - create the change and generate all artifacts in one step.
+
+I'll create a change with artifacts:
+- proposal.md (what & why)
+- design.md (how)
+- tasks.md (implementation steps)
+
+When ready to implement, run /opsx-apply
+
+---
+
+**Input**: The user's request should include a change name (kebab-case) OR a description of what they want to build.
+
+**Steps**
+
+1. **If no clear input provided, ask what they want to build**
+
+   Use the **AskUserQuestion tool** (open-ended, no preset options) to ask:
+   > "What change do you want to work on? Describe what you want to build or fix."
+
+   From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
+
+   **IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
+
+2. **Create the change directory**
+   ```bash
+   openspec new change "<name>"
+   ```
+   This creates a scaffolded change at `openspec/changes/<name>/` with `.openspec.yaml`.
+
+3. **Get the artifact build order**
+   ```bash
+   openspec status --change "<name>" --json
+   ```
+   Parse the JSON to get:
+   - `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
+   - `artifacts`: list of all artifacts with their status and dependencies
+
+4. **Create artifacts in sequence until apply-ready**
+
+   Use the **TodoWrite tool** to track progress through the artifacts.
+
+   Loop through artifacts in dependency order (artifacts with no pending dependencies first):
+
+   a. **For each artifact that is `ready` (dependencies satisfied)**:
+      - Get instructions:
+        ```bash
+        openspec instructions <artifact-id> --change "<name>" --json
+        ```
+      - The instructions JSON includes:
+        - `context`: Project background (constraints for you - do NOT include in output)
+        - `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
+        - `template`: The structure to use for your output file
+        - `instruction`: Schema-specific guidance for this artifact type
+        - `outputPath`: Where to write the artifact
+        - `dependencies`: Completed artifacts to read for context
+      - Read any completed dependency files for context
+      - Create the artifact file using `template` as the structure
+      - Apply `context` and `rules` as constraints - but do NOT copy them into the file
+      - Show brief progress: "Created <artifact-id>"
+
+   b. **Continue until all `applyRequires` artifacts are complete**
+      - After creating each artifact, re-run `openspec status --change "<name>" --json`
+      - Check if every artifact ID in `applyRequires` has `status: "done"` in the artifacts array
+      - Stop when all `applyRequires` artifacts are done
+
+   c. **If an artifact requires user input** (unclear context):
+      - Use **AskUserQuestion tool** to clarify
+      - Then continue with creation
+
+5. **Show final status**
+   ```bash
+   openspec status --change "<name>"
+   ```
+
+**Output**
+
+After completing all artifacts, summarize:
+- Change name and location
+- List of artifacts created with brief descriptions
+- What's ready: "All artifacts created! Ready for implementation."
+- Prompt: "Run `/opsx-apply` or ask me to implement to start working on the tasks."
+
+**Artifact Creation Guidelines**
+
+- Follow the `instruction` field from `openspec instructions` for each artifact type
+- The schema defines what each artifact should contain - follow it
+- Read dependency artifacts for context before creating new ones
+- Use `template` as the structure for your output file - fill in its sections
+- **IMPORTANT**: `context` and `rules` are constraints for YOU, not content for the file
+  - Do NOT copy `<context>`, `<rules>`, `<project_context>` blocks into the artifact
+  - These guide what you write, but should never appear in the output
+
+**Guardrails**
+- Create ALL artifacts needed for implementation (as defined by schema's `apply.requires`)
+- Always read dependency artifacts before creating a new one
+- If context is critically unclear, ask the user - but prefer making reasonable decisions to keep momentum
+- If a change with that name already exists, ask if user wants to continue it or create a new one
+- Verify each artifact file exists after writing before proceeding to next
diff --git a/.superpowers/brainstorm/269331-1778521434/content/architecture-overview.html b/.superpowers/brainstorm/269331-1778521434/content/architecture-overview.html
new file mode 100644
index 0000000..36c779f
--- /dev/null
+++ b/.superpowers/brainstorm/269331-1778521434/content/architecture-overview.html
@@ -0,0 +1,113 @@
+<h2>Architecture Overview</h2>
+<p class="subtitle">High-level system design for the backup tool</p>
+
+<div class="section">
+  <div class="mockup">
+    <div class="mockup-header">System Architecture</div>
+    <div class="mockup-body">
+      <div style="display: flex; flex-direction: column; gap: 20px;">
+        
+        <!-- Frontend Layer -->
+        <div style="border: 2px solid #4CAF50; border-radius: 8px; padding: 15px; background: #f8fff8;">
+          <div class="label" style="color: #4CAF50;">Frontend Layer</div>
+          <div style="display: flex; gap: 15px; margin-top: 10px;">
+            <div style="flex: 1; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
+              <strong>Dashboard View</strong><br>
+              <small>Overview, stats, recent backups</small>
+            </div>
+            <div style="flex: 1; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
+              <strong>Backup View</strong><br>
+              <small>Jobs, sources, schedules</small>
+            </div>
+            <div style="flex: 1; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
+              <strong>Settings View</strong><br>
+              <small>Config, storage, notifications</small>
+            </div>
+          </div>
+        </div>
+
+        <!-- API Layer -->
+        <div style="text-align: center; color: #666; font-size: 24px;">↓ REST API ↓</div>
+
+        <!-- Backend Layer -->
+        <div style="border: 2px solid #2196F3; border-radius: 8px; padding: 15px; background: #f0f8ff;">
+          <div class="label" style="color: #2196F3;">Backend Layer (Python)</div>
+          <div style="display: flex; gap: 15px; margin-top: 10px; flex-wrap: wrap;">
+            <div style="flex: 1; min-width: 120px; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
+              <strong>API Server</strong><br>
+              <small>FastAPI/Flask</small>
+            </div>
+            <div style="flex: 1; min-width: 120px; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
+              <strong>Backup Engine</strong><br>
+              <small>Core logic</small>
+            </div>
+            <div style="flex: 1; min-width: 120px; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
+              <strong>Scheduler</strong><br>
+              <small>APScheduler</small>
+            </div>
+            <div style="flex: 1; min-width: 120px; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
+              <strong>Source Adapters</strong><br>
+              <small>SSH, DB, Local</small>
+            </div>
+          </div>
+        </div>
+
+        <!-- Data Layer -->
+        <div style="text-align: center; color: #666; font-size: 24px;">↓ Persistence ↓</div>
+
+        <div style="border: 2px solid #FF9800; border-radius: 8px; padding: 15px; background: #fff8f0;">
+          <div class="label" style="color: #FF9800;">Data Layer</div>
+          <div style="display: flex; gap: 15px; margin-top: 10px;">
+            <div style="flex: 1; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
+              <strong>SQLite Database</strong><br>
+              <small>Jobs, sources, history, config</small>
+            </div>
+            <div style="flex: 1; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
+              <strong>File Storage</strong><br>
+              <small>Backup archives</small>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Key Design Principles</h3>
+  <ul>
+    <li><strong>Source-agnostic</strong>: Adapter pattern for different backup sources (local, SSH, future cloud)</li>
+    <li><strong>Job-driven</strong>: Everything is a job - manual or scheduled, full or incremental</li>
+    <li><strong>SQLite for simplicity</strong>: Single file database, no external DB server needed</li>
+    <li><strong>REST API</strong>: Clean separation between frontend and backend</li>
+    <li><strong>Extensible</strong>: Plugin architecture for new source types and storage backends</li>
+  </ul>
+</div>
+
+<div class="section">
+  <h3>Technology Stack</h3>
+  <div style="display: flex; gap: 20px;">
+    <div style="flex: 1;">
+      <h4>Backend</h4>
+      <ul>
+        <li>Python 3.11+</li>
+        <li>FastAPI (async, auto-docs)</li>
+        <li>SQLAlchemy + Alembic</li>
+        <li>APScheduler (job scheduling)</li>
+        <li>Paramiko (SSH)</li>
+        <li>rsync/libsync (incremental backups)</li>
+      </ul>
+    </div>
+    <div style="flex: 1;">
+      <h4>Frontend</h4>
+      <ul>
+        <li>React 18+ with TypeScript</li>
+        <li>TanStack Query (data fetching)</li>
+        <li>React Router (navigation)</li>
+        <li>Tailwind CSS (styling)</li>
+        <li>Recharts (dashboard charts)</li>
+      </ul>
+    </div>
+  </div>
+</div>
diff --git a/.superpowers/brainstorm/269331-1778521434/content/backup-flow.html b/.superpowers/brainstorm/269331-1778521434/content/backup-flow.html
new file mode 100644
index 0000000..a930f4b
--- /dev/null
+++ b/.superpowers/brainstorm/269331-1778521434/content/backup-flow.html
@@ -0,0 +1,110 @@
+<h2>Backup Flow</h2>
+<p class="subtitle">How a backup job executes from trigger to completion</p>
+
+<div class="section">
+  <div class="mockup">
+    <div class="mockup-header">Backup Execution Flow</div>
+    <div class="mockup-body">
+      <div style="display: flex; flex-direction: column; gap: 0;">
+        
+        <!-- Step 1 -->
+        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #f0f8ff; border-radius: 8px; border-left: 4px solid #2196F3;">
+          <div style="background: #2196F3; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">1</div>
+          <div style="flex: 1;">
+            <div style="font-weight: bold;">Trigger</div>
+            <div style="color: #666; font-size: 14px;">Manual click or scheduled cron trigger fires</div>
+          </div>
+        </div>
+        
+        <div style="text-align: center; color: #2196F3; font-size: 20px;">↓</div>
+        
+        <!-- Step 2 -->
+        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #fff8f0; border-radius: 8px; border-left: 4px solid #FF9800;">
+          <div style="background: #FF9800; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">2</div>
+          <div style="flex: 1;">
+            <div style="font-weight: bold;">Create Execution Record</div>
+            <div style="color: #666; font-size: 14px;">Insert row into job_executions with status "pending"</div>
+          </div>
+        </div>
+        
+        <div style="text-align: center; color: #FF9800; font-size: 20px;">↓</div>
+        
+        <!-- Step 3 -->
+        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #f8fff8; border-radius: 8px; border-left: 4px solid #4CAF50;">
+          <div style="background: #4CAF50; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">3</div>
+          <div style="flex: 1;">
+            <div style="font-weight: bold;">Connect to Source</div>
+            <div style="color: #666; font-size: 14px;">Establish connection (local filesystem, SSH, or database)</div>
+          </div>
+        </div>
+        
+        <div style="text-align: center; color: #4CAF50; font-size: 20px;">↓</div>
+        
+        <!-- Step 4 -->
+        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #faf0ff; border-radius: 8px; border-left: 4px solid #9C27B0;">
+          <div style="background: #9C27B0; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">4</div>
+          <div style="flex: 1;">
+            <div style="font-weight: bold;">Determine Backup Strategy</div>
+            <div style="color: #666; font-size: 14px;">Full backup OR incremental based on last successful backup</div>
+          </div>
+        </div>
+        
+        <div style="text-align: center; color: #9C27B0; font-size: 20px;">↓</div>
+        
+        <!-- Step 5 -->
+        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #f0f8ff; border-radius: 8px; border-left: 4px solid #2196F3;">
+          <div style="background: #2196F3; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">5</div>
+          <div style="flex: 1;">
+            <div style="font-weight: bold;">Execute Backup</div>
+            <div style="color: #666; font-size: 14px;">Transfer data, compress, encrypt (if enabled), calculate checksums</div>
+          </div>
+        </div>
+        
+        <div style="text-align: center; color: #2196F3; font-size: 20px;">↓</div>
+        
+        <!-- Step 6 -->
+        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #f8fff8; border-radius: 8px; border-left: 4px solid #4CAF50;">
+          <div style="background: #4CAF50; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">6</div>
+          <div style="flex: 1;">
+            <div style="font-weight: bold;">Verify & Store</div>
+            <div style="color: #666; font-size: 14px;">Verify checksum, store metadata in backups table, update execution status</div>
+          </div>
+        </div>
+        
+        <div style="text-align: center; color: #4CAF50; font-size: 20px;">↓</div>
+        
+        <!-- Step 7 -->
+        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #fff8f0; border-radius: 8px; border-left: 4px solid #FF9800;">
+          <div style="background: #FF9800; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">7</div>
+          <div style="flex: 1;">
+            <div style="font-weight: bold;">Cleanup & Retention</div>
+            <div style="color: #666; font-size: 14px;">Apply retention policy, remove old backups, update storage stats</div>
+          </div>
+        </div>
+        
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Error Handling</h3>
+  <ul>
+    <li><strong>Connection failures</strong>: Retry 3x with exponential backoff, then mark as failed</li>
+    <li><strong>Partial backups</strong>: Mark as failed if any source file fails; keep partial for inspection</li>
+    <li><strong>Storage full</strong>: Check before starting, alert if < 10% free space</li>
+    <li><strong>Checksum mismatch</strong>: Delete corrupted backup, retry once, alert admin</li>
+    <li><strong>Concurrent jobs</strong>: Queue or cancel based on resource availability</li>
+  </ul>
+</div>
+
+<div class="section">
+  <h3>Extensibility Design</h3>
+  <p>The system is designed for easy extension:</p>
+  <ul>
+    <li><strong>Source adapters</strong>: Abstract base class for new source types (S3, Azure, etc.)</li>
+    <li><strong>Storage backends</strong>: Pluggable storage interface for cloud destinations</li>
+    <li><strong>Notification channels</strong>: Webhook, email, Slack plugins for alerts</li>
+    <li><strong>Compression algorithms</strong>: Configurable (gzip, bzip2, zstd, none)</li>
+  </ul>
+</div>
diff --git a/.superpowers/brainstorm/269331-1778521434/content/data-model.html b/.superpowers/brainstorm/269331-1778521434/content/data-model.html
new file mode 100644
index 0000000..6203855
--- /dev/null
+++ b/.superpowers/brainstorm/269331-1778521434/content/data-model.html
@@ -0,0 +1,128 @@
+<h2>Data Model</h2>
+<p class="subtitle">SQLite database schema for the backup tool</p>
+
+<div class="section">
+  <div class="mockup">
+    <div class="mockup-header">Entity Relationship Diagram</div>
+    <div class="mockup-body">
+      <div style="display: flex; flex-direction: column; gap: 15px; font-family: monospace; font-size: 14px;">
+
+        <!-- Sources -->
+        <div style="border: 2px solid #4CAF50; border-radius: 6px; padding: 12px; background: #f8fff8;">
+          <div style="font-weight: bold; color: #4CAF50; margin-bottom: 8px;">📁 sources</div>
+          <div style="display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px;">
+            <span style="color: #d32f2f;">PK</span> <span>id</span> <span style="color: #666;">INTEGER</span>
+            <span>  </span> <span>name</span> <span style="color: #666;">TEXT</span>
+            <span>  </span> <span>type</span> <span style="color: #666;">TEXT (local|ssh|database)</span>
+            <span>  </span> <span>config</span> <span style="color: #666;">JSON</span>
+            <span>  </span> <span>created_at</span> <span style="color: #666;">DATETIME</span>
+            <span>  </span> <span>updated_at</span> <span style="color: #666;">DATETIME</span>
+          </div>
+        </div>
+
+        <!-- Jobs -->
+        <div style="border: 2px solid #2196F3; border-radius: 6px; padding: 12px; background: #f0f8ff;">
+          <div style="font-weight: bold; color: #2196F3; margin-bottom: 8px;">⚙️ jobs</div>
+          <div style="display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px;">
+            <span style="color: #d32f2f;">PK</span> <span>id</span> <span style="color: #666;">INTEGER</span>
+            <span>  </span> <span>name</span> <span style="color: #666;">TEXT</span>
+            <span>  </span> <span>source_id</span> <span style="color: #666;">INTEGER → sources</span>
+            <span>  </span> <span>strategy</span> <span style="color: #666;">TEXT (full|incremental)</span>
+            <span>  </span> <span>destination_path</span> <span style="color: #666;">TEXT</span>
+            <span>  </span> <span>exclude_patterns</span> <span style="color: #666;">JSON</span>
+            <span>  </span> <span>enabled</span> <span style="color: #666;">BOOLEAN</span>
+            <span>  </span> <span>created_at</span> <span style="color: #666;">DATETIME</span>
+            <span>  </span> <span>updated_at</span> <span style="color: #666;">DATETIME</span>
+          </div>
+        </div>
+
+        <!-- Schedules -->
+        <div style="border: 2px solid #FF9800; border-radius: 6px; padding: 12px; background: #fff8f0;">
+          <div style="font-weight: bold; color: #FF9800; margin-bottom: 8px;">📅 schedules</div>
+          <div style="display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px;">
+            <span style="color: #d32f2f;">PK</span> <span>id</span> <span style="color: #666;">INTEGER</span>
+            <span>  </span> <span>job_id</span> <span style="color: #666;">INTEGER → jobs</span>
+            <span>  </span> <span>cron_expression</span> <span style="color: #666;">TEXT</span>
+            <span>  </span> <span>enabled</span> <span style="color: #666;">BOOLEAN</span>
+            <span>  </span> <span>created_at</span> <span style="color: #666;">DATETIME</span>
+          </div>
+        </div>
+
+        <!-- Job Executions -->
+        <div style="border: 2px solid #9C27B0; border-radius: 6px; padding: 12px; background: #faf0ff;">
+          <div style="font-weight: bold; color: #9C27B0; margin-bottom: 8px;">▶️ job_executions</div>
+          <div style="display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px;">
+            <span style="color: #d32f2f;">PK</span> <span>id</span> <span style="color: #666;">INTEGER</span>
+            <span>  </span> <span>job_id</span> <span style="color: #666;">INTEGER → jobs</span>
+            <span>  </span> <span>status</span> <span style="color: #666;">TEXT (pending|running|success|failed|cancelled)</span>
+            <span>  </span> <span>started_at</span> <span style="color: #666;">DATETIME</span>
+            <span>  </span> <span>completed_at</span> <span style="color: #666;">DATETIME</span>
+            <span>  </span> <span>bytes_processed</span> <span style="color: #666;">INTEGER</span>
+            <span>  </span> <span>bytes_backed_up</span> <span style="color: #666;">INTEGER</span>
+            <span>  </span> <span>error_message</span> <span style="color: #666;">TEXT</span>
+            <span>  </span> <span>triggered_by</span> <span style="color: #666;">TEXT (manual|schedule)</span>
+          </div>
+        </div>
+
+        <!-- Backups -->
+        <div style="border: 2px solid #607D8B; border-radius: 6px; padding: 12px; background: #f5f5f5;">
+          <div style="font-weight: bold; color: #607D8B; margin-bottom: 8px;">💾 backups</div>
+          <div style="display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px;">
+            <span style="color: #d32f2f;">PK</span> <span>id</span> <span style="color: #666;">INTEGER</span>
+            <span>  </span> <span>execution_id</span> <span style="color: #666;">INTEGER → job_executions</span>
+            <span>  </span> <span>storage_path</span> <span style="color: #666;">TEXT</span>
+            <span>  </span> <span>size_bytes</span> <span style="color: #666;">INTEGER</span>
+            <span>  </span> <span>checksum</span> <span style="color: #666;">TEXT</span>
+            <span>  </span> <span>type</span> <span style="color: #666;">TEXT (full|incremental)</span>
+            <span>  </span> <span>parent_backup_id</span> <span style="color: #666;">INTEGER → backups (for incremental)</span>
+            <span>  </span> <span>created_at</span> <span style="color: #666;">DATETIME</span>
+          </div>
+        </div>
+
+        <!-- Settings -->
+        <div style="border: 2px solid #795548; border-radius: 6px; padding: 12px; background: #faf5f0;">
+          <div style="font-weight: bold; color: #795548; margin-bottom: 8px;">⚙️ settings</div>
+          <div style="display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px;">
+            <span style="color: #d32f2f;">PK</span> <span>key</span> <span style="color: #666;">TEXT</span>
+            <span>  </span> <span>value</span> <span style="color: #666;">TEXT</span>
+            <span>  </span> <span>updated_at</span> <span style="color: #666;">DATETIME</span>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Key Relationships</h3>
+  <ul>
+    <li><strong>sources → jobs</strong>: One source can have many jobs (different backup strategies for the same data)</li>
+    <li><strong>jobs → schedules</strong>: One job can have one schedule (1:1 for simplicity)</li>
+    <li><strong>jobs → job_executions</strong>: One job has many executions over time</li>
+    <li><strong>job_executions → backups</strong>: Each execution produces one or more backup archives</li>
+    <li><strong>backups → backups</strong>: Self-referencing for incremental chain (parent_backup_id)</li>
+  </ul>
+</div>
+
+<div class="section">
+  <h3>Design Decisions</h3>
+  <div class="pros-cons">
+    <div class="pros">
+      <h4>Pros</h4>
+      <ul>
+        <li>Flexible source config via JSON (extensible for new source types)</li>
+        <li>Execution history tracking for audit and debugging</li>
+        <li>Incremental backup chain support</li>
+        <li>Simple key-value settings (easy to extend)</li>
+      </ul>
+    </div>
+    <div class="cons">
+      <h4>Cons>/h4>
+      <ul>
+        <li>JSON config loses some type safety (mitigated by validation)</li>
+        <li>No built-in backup retention policy table (can be added later)</li>
+      </ul>
+    </div>
+  </div>
+</div>
diff --git a/.superpowers/brainstorm/269331-1778521434/content/frontend-views.html b/.superpowers/brainstorm/269331-1778521434/content/frontend-views.html
new file mode 100644
index 0000000..f460e3a
--- /dev/null
+++ b/.superpowers/brainstorm/269331-1778521434/content/frontend-views.html
@@ -0,0 +1,174 @@
+<h2>Frontend Views</h2>
+<p class="subtitle">UI mockups for the three main views</p>
+
+<div class="section">
+  <h3>Dashboard View</h3>
+  <div class="mockup">
+    <div class="mockup-header">Dashboard</div>
+    <div class="mockup-body">
+      <div class="mock-nav">
+        <span style="font-weight: bold;">🛡️ Backup Tool</span> | Dashboard | Backups | Settings
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin: 20px 0;">
+        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 6px; text-align: center;">
+          <div style="font-size: 32px; font-weight: bold; color: #4CAF50;">12</div>
+          <div style="color: #666;">Active Jobs</div>
+        </div>
+        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 6px; text-align: center;">
+          <div style="font-size: 32px; font-weight: bold; color: #2196F3;">847</div>
+          <div style="color: #666;">Total Backups</div>
+        </div>
+        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 6px; text-align: center;">
+          <div style="font-size: 32px; font-weight: bold; color: #FF9800;">2.4 TB</div>
+          <div style="color: #666;">Storage Used</div>
+        </div>
+        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 6px; text-align: center;">
+          <div style="font-size: 32px; font-weight: bold; color: #f44336;">1</div>
+          <div style="color: #666;">Failed (24h)</div>
+        </div>
+      </div>
+      
+      <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px;">
+        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 6px;">
+          <div style="font-weight: bold; margin-bottom: 10px;">Recent Backup Activity</div>
+          <div style="display: flex; flex-direction: column; gap: 8px;">
+            <div style="display: flex; justify-content: space-between; padding: 8px; background: #f5f5f5; border-radius: 4px;">
+              <span>📁 Home Server Files</span>
+              <span style="color: #4CAF50;">✓ Success</span>
+              <span style="color: #666;">2 hours ago</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; padding: 8px; background: #f5f5f5; border-radius: 4px;">
+              <span>🗄️ Production DB</span>
+              <span style="color: #4CAF50;">✓ Success</span>
+              <span style="color: #666;">5 hours ago</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; padding: 8px; background: #f5f5f5; border-radius: 4px;">
+              <span>📁 Cloud Storage Sync</span>
+              <span style="color: #f44336;">✗ Failed</span>
+              <span style="color: #666;">1 day ago</span>
+            </div>
+          </div>
+        </div>
+        
+        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 6px;">
+          <div style="font-weight: bold; margin-bottom: 10px;">Storage Overview</div>
+          <div style="height: 150px; background: linear-gradient(to bottom, #e3f2fd 0%, #bbdefb 100%); border-radius: 4px; display: flex; align-items: center; justify-content: center;">
+            [Pie Chart: Storage by Job]
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Backup View</h3>
+  <div class="mockup">
+    <div class="mockup-header">Backups</div>
+    <div class="mockup-body">
+      <div class="mock-nav">
+        <span>🛡️ Backup Tool</span> | Dashboard | <span style="font-weight: bold;">Backups</span> | Settings
+      </div>
+      
+      <div style="display: flex; justify-content: space-between; margin: 20px 0;">
+        <div>
+          <button class="mock-button">+ New Job</button>
+          <button class="mock-button">+ New Source</button>
+        </div>
+        <div>
+          <input class="mock-input" placeholder="Search jobs..." style="width: 200px;">
+        </div>
+      </div>
+      
+      <div style="border: 1px solid #ddd; border-radius: 6px; overflow: hidden;">
+        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; background: #f5f5f5; padding: 10px; font-weight: bold;">
+          <div>Job Name</div>
+          <div>Source</div>
+          <div>Strategy</div>
+          <div>Schedule</div>
+          <div>Last Run</div>
+          <div>Status</div>
+        </div>
+        
+        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; padding: 10px; border-top: 1px solid #eee;">
+          <div>🏠 Home Server Files</div>
+          <div>Local Path</div>
+          <div><span style="background: #e3f2fd; padding: 2px 8px; border-radius: 12px; font-size: 12px;">Incremental</span></div>
+          <div>Daily at 2 AM</div>
+          <div>2 hours ago</div>
+          <div><span style="color: #4CAF50;">● Active</span></div>
+        </div>
+        
+        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; padding: 10px; border-top: 1px solid #eee;">
+          <div>🗄️ Production DB</div>
+          <div>PostgreSQL</div>
+          <div><span style="background: #fff3e0; padding: 2px 8px; border-radius: 12px; font-size: 12px;">Full</span></div>
+          <div>Hourly</div>
+          <div>5 hours ago</div>
+          <div><span style="color: #4CAF50;">● Active</span></div>
+        </div>
+        
+        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; padding: 10px; border-top: 1px solid #eee;">
+          <div>☁️ Cloud Storage Sync</div>
+          <div>SSH (AWS)</div>
+          <div><span style="background: #e3f2fd; padding: 2px 8px; border-radius: 12px; font-size: 12px;">Incremental</span></div>
+          <div>Weekly (Sun)</div>
+          <div>1 day ago</div>
+          <div><span style="color: #f44336;">● Failed</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <h3>Settings View</h3>
+  <div class="mockup">
+    <div class="mockup-header">Settings</div>
+    <div class="mockup-body">
+      <div class="mock-nav">
+        <span>🛡️ Backup Tool</span> | Dashboard | Backups | <span style="font-weight: bold;">Settings</span>
+      </div>
+      
+      <div style="display: grid; grid-template-columns: 200px 1fr; gap: 20px; margin-top: 20px;">
+        <div style="border-right: 1px solid #ddd; padding-right: 20px;">
+          <div style="padding: 10px; background: #e3f2fd; border-radius: 4px; font-weight: bold;">General</div>
+          <div style="padding: 10px;">Storage</div>
+          <div style="padding: 10px;">Notifications</div>
+          <div style="padding: 10px;">Security</div>
+          <div style="padding: 10px;">Logs</div>
+        </div>
+        
+        <div>
+          <div style="margin-bottom: 20px;">
+            <div style="font-weight: bold; margin-bottom: 8px;">Default Backup Location</div>
+            <input class="mock-input" value="/var/backups/backup-tool" style="width: 300px;">
+          </div>
+          
+          <div style="margin-bottom: 20px;">
+            <div style="font-weight: bold; margin-bottom: 8px;">Retention Policy</div>
+            <select class="mock-input" style="width: 200px;">
+              <option>Keep all backups</option>
+              <option>Keep last 30 days</option>
+              <option selected>Keep last 10 versions</option>
+            </select>
+          </div>
+          
+          <div style="margin-bottom: 20px;">
+            <div style="font-weight: bold; margin-bottom: 8px;">Compression</div>
+            <label><input type="checkbox" checked> Enable compression (gzip)</label>
+          </div>
+          
+          <div style="margin-bottom: 20px;">
+            <div style="font-weight: bold; margin-bottom: 8px;">Encryption</div>
+            <label><input type="checkbox"> Enable AES-256 encryption</label>
+          </div>
+          
+          <div>
+            <button class="mock-button">Save Changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/.superpowers/brainstorm/269331-1778521434/state/server-stopped b/.superpowers/brainstorm/269331-1778521434/state/server-stopped
new file mode 100644
index 0000000..1691b8d
--- /dev/null
+++ b/.superpowers/brainstorm/269331-1778521434/state/server-stopped
@@ -0,0 +1 @@
+{"reason":"idle timeout","timestamp":1778524615786}
diff --git a/.superpowers/brainstorm/269331-1778521434/state/server.log b/.superpowers/brainstorm/269331-1778521434/state/server.log
new file mode 100644
index 0000000..66bc776
--- /dev/null
+++ b/.superpowers/brainstorm/269331-1778521434/state/server.log
@@ -0,0 +1,6 @@
+{"type":"server-started","port":63865,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:63865","screen_dir":"/home/alex/projects/backup-tool/.superpowers/brainstorm/269331-1778521434/content","state_dir":"/home/alex/projects/backup-tool/.superpowers/brainstorm/269331-1778521434/state"}
+{"type":"screen-added","file":"/home/alex/projects/backup-tool/.superpowers/brainstorm/269331-1778521434/content/architecture-overview.html"}
+{"type":"screen-added","file":"/home/alex/projects/backup-tool/.superpowers/brainstorm/269331-1778521434/content/data-model.html"}
+{"type":"screen-added","file":"/home/alex/projects/backup-tool/.superpowers/brainstorm/269331-1778521434/content/frontend-views.html"}
+{"type":"screen-added","file":"/home/alex/projects/backup-tool/.superpowers/brainstorm/269331-1778521434/content/backup-flow.html"}
+{"type":"server-stopped","reason":"idle timeout"}
diff --git a/.superpowers/brainstorm/269331-1778521434/state/server.pid b/.superpowers/brainstorm/269331-1778521434/state/server.pid
new file mode 100644
index 0000000..73b8876
--- /dev/null
+++ b/.superpowers/brainstorm/269331-1778521434/state/server.pid
@@ -0,0 +1 @@
+269339
diff --git a/frontend/index.html b/frontend/index.html
index bd95874..c001480 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Backup Tool</title>
   </head>
diff --git a/frontend/package.json b/frontend/package.json
index 6ca6f62..3518745 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,10 @@
     "postcss": "^8.4.32",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vitest": "^1.1.0",
+    "@testing-library/react": "^14.1.0",
+    "@testing-library/jest-dom": "^6.2.0",
+    "jsdom": "^23.0.0"
   }
 }
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/openspec/config.yaml b/openspec/config.yaml
new file mode 100644
index 0000000..392946c
--- /dev/null
+++ b/openspec/config.yaml
@@ -0,0 +1,20 @@
+schema: spec-driven
+
+# Project context (optional)
+# This is shown to AI when creating artifacts.
+# Add your tech stack, conventions, style guides, domain knowledge, etc.
+# Example:
+#   context: |
+#     Tech stack: TypeScript, React, Node.js
+#     We use conventional commits
+#     Domain: e-commerce platform
+
+# Per-artifact rules (optional)
+# Add custom rules for specific artifacts.
+# Example:
+#   rules:
+#     proposal:
+#       - Keep proposals under 500 words
+#       - Always include a "Non-goals" section
+#     tasks:
+#       - Break tasks into chunks of max 2 hours