panopticon-cli 0.4.33 → 0.5.1

package/skills/myn-standards/SKILL.md

@@ -0,0 +1,351 @@
+---
+name: myn-standards
+description: >
+  Mind Your Now coding standards, design system, and component patterns.
+  Auto-applied when writing or reviewing MYN code.
+triggers:
+  - myn component
+  - mind your now
+  - myn styling
+  - myn design
+  - myn frontend
+  - myn ui
+  - notification toast
+  - task card
+  - briefing
+---
+
+# Mind Your Now Design System & Coding Standards
+
+## Brand Identity
+
+### Brand Colors
+
+| Name | Hex | Tailwind Token | Usage |
+|------|-----|----------------|-------|
+| All-Knowing Blu | `#00AEEF` | `brand-blue` | Primary brand, links, CTAs |
+| Yours Truly Blu | `#80D7F7` | `brand-blue-light` | Hover states, light accents |
+| Golden Hour Yellow | `#FFC60B` | `brand-yellow` | Accent, highlights, "now" in wordmark |
+| Midnight Blue | `#0C4064` | `brand-dark` | Headings on light backgrounds |
+
+### Brand Wordmark
+
+```tsx
+<h1>
+  <span className="text-blue-800">mind</span>
+  <span className="font-thin text-blue-200">your</span>
+  <span className="text-yellow-500">now</span>
+</h1>
+```
+
+### Logo
+
+- Asset: `/images/logo-no-text.png` (sun-burst motif)
+- Always paired with the wordmark on splash/auth screens
+
+## Color System
+
+### Semantic Colors
+
+| Token | Light | Dark | Usage |
+|-------|-------|------|-------|
+| `semantic-success` | `#22C55E` | `#4ADE80` | Completed, positive |
+| `semantic-warning` | `#F59E0B` | `#FBBF24` | Attention needed |
+| `semantic-error` | `#EF4444` | `#F87171` | Errors, overdue |
+| `semantic-info` | `#3B82F6` | `#60A5FA` | Informational |
+
+### Priority Colors
+
+| Priority | Hex | Token |
+|----------|-----|-------|
+| Critical | `#EF4444` | `priority-critical` |
+| High | `#F97316` | `priority-high` |
+| Medium | `#EAB308` | `priority-medium` |
+| Low | `#22C55E` | `priority-low` |
+| None | `#6B7280` | `priority-none` |
+
+### MYN Task Type Colors (Methodology)
+
+| Type | Hex | Token |
+|------|-----|-------|
+| Parking Lot | `#F04F23` | `taskType-parkinglot` |
+| Over the Horizon | `#F9913B` | `taskType-overthehorizon` |
+| Critical Now | `#0C803D` | `taskType-critical` |
+| Opportunity Now | `#107CC4` | `taskType-opportunitynow` |
+| Tomorrow | `#854EB1` | `taskType-tomorrow` |
+
+### Shadcn/UI Semantic Tokens (CSS Variables)
+
+```
+--background       Page background (white / slate-950)
+--foreground       Primary text (slate-950 / slate-50)
+--card             Card backgrounds (white / slate-900)
+--muted            Muted backgrounds (slate-100 / slate-800)
+--muted-foreground Secondary text (slate-500 / slate-400)
+--border           Borders (slate-200 / slate-700)
+--primary          Primary actions (blue-600 / blue-500)
+--destructive      Destructive actions (red-600 / red-500)
+--ring             Focus rings (blue-500 / blue-400)
+```
+
+### App Background
+
+- Light: `#eff6ff` (blue-50)
+- Dark: `#0f172a` (slate-900)
+- Surfaces: `#1e293b` dark, `#334155` elevated dark
+
+## Typography
+
+### Font Stack
+
+- **Primary**: Inter (all UI text)
+- **Monospace**: SF Mono, Monaco, Cascadia Code
+- **Accessibility**: Tiresias Infofont, OpenDyslexic3 (user-selectable)
+- All legacy font aliases (Roboto, Lato, Montserrat, SF Pro) map to Inter
+
+### Type Scale
+
+| Token | Size | Weight | Letter Spacing | Usage |
+|-------|------|--------|----------------|-------|
+| `display` | 2.441rem (39px) | 700 | -0.02em | Hero headlines |
+| `h1` | 1.953rem (31px) | 700 | -0.01em | Page titles |
+| `h2` | 1.563rem (25px) | 600 | -0.01em | Section headers |
+| `h3` | 1.25rem (20px) | 600 | -- | Card headers |
+| `body-lg` | 1.125rem (18px) | 400 | -- | Large body text |
+| `body` | 1rem (16px) | 400 | -- | Default body text |
+| `body-sm` | 0.875rem (14px) | 400 | -- | Compact text, task titles |
+| `caption` | 0.75rem (12px) | 400 | -- | Labels, hints |
+| `overline` | 0.625rem (10px) | 600 | 0.1em | Category labels |
+
+### Text Colors
+
+```
+text-foreground         Primary text
+text-muted-foreground   Secondary text, labels, icons
+text-primary            Links, emphasis
+text-destructive        Errors
+text-card-foreground    Text on cards
+```
+
+## Spacing & Layout
+
+### Spacing Scale
+
+Standard Tailwind 4px base: `1`=4px, `2`=8px, `3`=12px, `4`=16px, `6`=24px, `8`=32px
+
+### Common Patterns
+
+```tsx
+// Page container
+<div className="max-w-[1320px] mx-auto pt-4 px-3 sm:px-4 lg:px-6">
+
+// Two-column grid (sidebar visible at xl)
+<div className="grid gap-7 xl:grid-cols-[minmax(0,820px)_420px]">
+
+// Card padding
+p-3   // Compact
+p-4   // Standard
+p-5   // Spacious
+
+// Section gaps
+mt-3  // Between compact sections
+mt-4  // Between standard sections
+gap-2 // Icon + text
+gap-3 // Form elements
+```
+
+### Breakpoints
+
+| Token | Width | Usage |
+|-------|-------|-------|
+| `xxs` | 350px | Small phones |
+| `sm` | 640px | Small tablets |
+| `md` | 768px | Tablets |
+| `lg` | 1024px | Small desktops |
+| `xl` | 1280px | Desktop (sidebar visible) |
+
+## Border & Shadow
+
+### Border Radius
+
+```
+rounded-md   (6px)  Buttons, inputs, small cards
+rounded-lg   (8px)  Cards, panels
+rounded-xl   (12px) Large cards, modals
+rounded-full        Pills, avatars
+```
+
+### Shadows
+
+```
+shadow-sm   Sidebar cards, secondary
+shadow-md   Main cards, primary content
+shadow-lg   Dropdowns, modals
+shadow-xl   Popovers, overlays
+shadow-2xl  Dialogs
+```
+
+### Opacity Modifiers
+
+```tsx
+bg-muted/40         // Very subtle containers
+border-border/50    // Container borders (default)
+border-border/60    // Button/input borders
+ring-ring/40        // Focus state ring
+```
+
+## Component Patterns
+
+### Buttons
+
+| Size | Height | Padding | Icon | Usage |
+|------|--------|---------|------|-------|
+| xs | `h-7` | `px-2` | `h-3.5 w-3.5` | Inline actions |
+| sm | `h-8` | `px-3` | `h-4 w-4` | Secondary actions |
+| md | `h-9` | `px-3` | `h-4 w-4` | Icon buttons |
+| lg | `h-10` | `px-4` | `h-5 w-5` | Primary actions |
+
+```tsx
+// Primary
+"h-10 px-4 rounded-md bg-primary text-primary-foreground hover:opacity-90"
+
+// Secondary
+"h-10 px-4 rounded-md border border-border/60 bg-card hover:bg-muted"
+
+// Ghost
+"h-9 px-3 rounded-md hover:bg-muted"
+
+// Icon
+"h-9 w-9 rounded-md hover:bg-muted text-muted-foreground"
+```
+
+### Cards
+
+```tsx
+// Main card (primary, higher elevation)
+<Card className="bg-card text-card-foreground rounded-lg shadow-md">
+
+// Sidebar card (secondary, lower)
+<Card className="bg-card text-card-foreground rounded-lg shadow-sm">
+
+// Subtle container
+<div className="rounded-md border border-border/50 bg-muted/40 px-3 py-2">
+```
+
+### Frosted Glass (Auth/Splash Screens)
+
+```tsx
+// Blue gradient background
+style={{ background: 'linear-gradient(to bottom, rgb(56, 189, 248), rgb(37, 99, 235))' }}
+
+// Frosted glass card
+<Card className="bg-white/90 backdrop-blur-sm border-blue-200 hover:shadow-lg transition-all duration-300">
+```
+
+### Toast Notifications
+
+Current implementation uses Radix UI `@radix-ui/react-toast` with CVA variants:
+
+```tsx
+// Variants: default, destructive, success, error, warning, info
+// Base style:
+"rounded-lg border-2 p-5 pr-7 shadow-xl backdrop-blur-sm"
+
+// Each variant has light/dark mode colors:
+// success: border-green-300 bg-green-50/95 text-green-900
+// error:   border-red-300 bg-red-50/95 text-red-900
+// warning: border-amber-300 bg-amber-50/95 text-amber-900
+// info:    border-blue-300 bg-blue-50/95 text-blue-900
+
+// Viewport: bottom-right on desktop, top on mobile
+// Max width: 420px
+// Animations: slide-in-from-top (mobile), slide-in-from-bottom (desktop)
+// Hover: shadow-2xl + translate-y-0.5 lift
+// Icons: Lucide (CheckCircle2, AlertCircle, AlertTriangle, Info) in rounded-full bg
+// Close: absolute top-right, visible on hover
+```
+
+### Form Controls
+
+```tsx
+// Input
+"h-10 rounded-md border border-border/60 bg-card px-3 text-sm focus:ring-2 focus:ring-ring/40"
+
+// Textarea
+"rounded-md border border-border/60 bg-card p-3 text-sm min-h-[80px] focus:ring-2 focus:ring-ring/40"
+```
+
+## Animation System
+
+### Tailwind Keyframes
+
+| Name | Duration | Usage |
+|------|----------|-------|
+| `wiggle` | 1s infinite | Playful attention |
+| `fade-in` | 0.5s ease-out | Element entrance (translateY 10px) |
+| `spin-slow` | 3s linear infinite | Loading states |
+| `pulse-subtle` | 2s infinite | Gentle pulse (opacity 1→0.9) |
+| `shimmer` | 2s linear infinite | Loading skeleton |
+| `bounce-once` | 1s ease | Single bounce |
+
+### Framer Motion (Auth/Splash)
+
+```tsx
+// Container: stagger children by 0.1s
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
+}
+
+// Items: spring up from 20px below
+const itemVariants = {
+  hidden: { y: 20, opacity: 0 },
+  visible: { y: 0, opacity: 1, transition: { type: 'spring', stiffness: 50 } },
+}
+```
+
+### Task Completion
+
+- Wavy green SVG strikethrough line + text fade
+- 2s animation duration
+- Do NOT modify sort logic in `sortTasksAndEvents.js`
+
+## Design Principles
+
+1. **Neutral Over Saturated** -- Use muted backgrounds, subtle borders. No saturated gradients for secondary elements.
+2. **Elevation Hierarchy** -- Primary content gets `shadow-md`, secondary gets `shadow-sm`.
+3. **Progressive Disclosure** -- Hide secondary actions until hover/focus.
+4. **Density Over Chrome** -- Tight padding, compact buttons, reduce visual noise.
+
+## Tech Stack
+
+- **Framework**: React 19, Vite 7, TypeScript
+- **State**: Jotai (client) + TanStack Query (server)
+- **UI**: shadcn/ui (new-york style) + Material-UI (legacy, migrating away)
+- **Styling**: Tailwind CSS with custom design tokens
+- **Icons**: Lucide (primary), FontAwesome (legacy, GettingStarted only)
+- **Animation**: Framer Motion (auth flows), Tailwind keyframes (in-app)
+- **Mobile**: Capacitor for iOS/Android
+- **Dark Mode**: `class` strategy via Tailwind `darkMode: 'class'`
+
+## File Structure
+
+```
+src/
+  styles/
+    design-tokens.css        CSS custom properties (brand, semantic, priority, task type)
+    notification-animations.css  Toast animation keyframes
+    globals.css              shadcn/ui CSS variables
+  components/
+    ui/                      shadcn/ui base components (toast, card, button, etc.)
+    auth/                    Auth flows (GettingStarted, EmailForm)
+    notifications/           NotificationItem, notification panels
+  lib/
+    utils.ts                 cn() helper (clsx + tailwind-merge)
+```
+
+## Key Files
+
+- `tailwind.config.js` -- All design tokens, type scale, colors, animations
+- `src/styles/design-tokens.css` -- CSS custom properties with dark mode overrides
+- `docs/technical/frontend/UI-DESIGN-SYSTEM.md` -- Full design system documentation

package/skills/pan-new-project/SKILL.md

@@ -0,0 +1,304 @@
+---
+name: pan-new-project
+description: >
+  Complete setup for registering a new project with Panopticon. Handles
+  project registration, issue prefix, workspace config, trust setup,
+  beads init, tracker config, and validates against working projects.
+triggers:
+  - new project
+  - add new project
+  - register new project
+  - setup new project
+  - onboard project
+  - pan new project
+allowed-tools:
+  - Bash
+  - Read
+  - Edit
+  - Write
+  - Glob
+  - Grep
+  - AskUserQuestion
+version: "2.0.0"
+author: "Ed Becker"
+license: "MIT"
+---
+
+# New Project Setup
+
+**Trigger:** `/pan-new-project`
+
+Sets up a new project for Panopticon management. This is the ONLY correct
+way to add a new project. Do NOT just run `pan project add` alone — it
+creates a skeleton entry that breaks planning agents, workspace creation,
+issue routing, and beads.
+
+---
+
+## WHY THIS SKILL EXISTS
+
+Running `pan project add /path --name foo` alone causes these failures:
+
+| Missing config | Symptom |
+|----------------|---------|
+| `linear_team` (issue prefix) | Planning agents start in `$HOME`, not the project root |
+| Trust entry in `~/.claude.json` | Claude Code shows trust dialog, blocking autonomous agents |
+| `GITHUB_REPOS` entry | Issues don't appear on the dashboard kanban board |
+| `beads.role` in git config | Every `bd` command prints "beads.role not configured" warnings |
+| `workspaces/` directory | Git worktree creation fails |
+| `.gitignore` entry | `workspaces/` gets committed accidentally |
+| Test config | Specialist test agents can't run tests |
+
+---
+
+## EXECUTION STEPS
+
+### Step 1: Gather Project Information
+
+Ask the user for (or auto-detect from the filesystem):
+
+| Field | Required | Example | Notes |
+|-------|----------|---------|-------|
+| Path | Yes | `/home/eltmon/Projects/myapp` | Must exist, must have `.git/` |
+| Name | Yes | `myapp` | Short lowercase key for projects.yaml |
+| Issue prefix | Yes | `APP` | Maps `APP-123` → this project. Goes in `linear_team` field |
+| Tracker | Yes | `github` / `linear` / `gitlab` | Where issues live |
+| Repo slug | Yes | `owner/repo` | `github_repo` or `gitlab_repo` |
+| Workspace type | Yes | `standalone` / `monorepo` / `polyrepo` | How git worktrees work |
+
+**Auto-detection:**
+- `go.mod` → Go, test: `make test` or `go test ./...`
+- `package.json` → Node/TS, test: `npm test` or `pnpm test`
+- `pom.xml` / `mvnw` → Java/Maven, test: `./mvnw test`
+- `Cargo.toml` → Rust, test: `cargo test`
+- `pyproject.toml` → Python, test: `pytest`
+
+### Step 2: Register Project
+
+```bash
+pan project add <path> --name <name>
+```
+
+This creates a minimal entry AND pre-trusts the directory in `~/.claude.json`
+(the `projectAddCommand` calls `preTrustDirectory` automatically).
+
+### Step 3: Configure projects.yaml
+
+Edit `~/.panopticon/projects.yaml` to add the FULL configuration.
+
+**Minimum viable config:**
+
+```yaml
+  <project-key>:
+    name: <name>
+    path: <absolute-path>
+    linear_team: <PREFIX>          # CRITICAL: issue prefix for routing
+    github_repo: <owner/repo>     # or gitlab_repo
+    workspace:
+      type: <standalone|monorepo|polyrepo>
+      workspaces_dir: workspaces
+      default_branch: main
+    tests:
+      unit:
+        type: <go|vitest|maven|pytest|cargo>
+        path: .
+        command: <test command>
+```
+
+**Full config** (for projects with services, Docker, DNS):
+
+```yaml
+  <project-key>:
+    name: <name>
+    path: <absolute-path>
+    linear_team: <PREFIX>
+    github_repo: <owner/repo>
+    workspace:
+      type: <type>
+      workspaces_dir: workspaces
+      default_branch: main
+      dns:
+        domain: <name>.localhost
+        entries:
+          - "{{FEATURE_FOLDER}}.{{DOMAIN}}"
+        sync_method: hosts_file
+      docker:
+        traefik: templates/traefik
+        compose_template: infra/.devcontainer-template
+      agent:
+        template_dir: infra/.agent-template
+        copy_dirs:
+          - .claude/commands
+          - .claude/skills
+      services:
+        - name: <service>
+          path: .
+          start_command: <cmd>
+          health_url: <url>
+          port: <port>
+      env:
+        secrets_file: ~/.myapp/.env
+    tests:
+      unit:
+        type: <type>
+        path: .
+        command: <cmd>
+```
+
+### Step 4: Add to Dashboard Tracker Config
+
+For **GitHub** projects, add to `GITHUB_REPOS` in `~/.panopticon.env`:
+
+```bash
+# Format: owner/repo:PREFIX (comma-separated)
+# Example: current value might be:
+#   GITHUB_REPOS=eltmon/panopticon-cli:PAN
+# Append the new project:
+#   GITHUB_REPOS=eltmon/panopticon-cli:PAN,owner/newrepo:APP
+```
+
+Read current value, append new repo, write back. The dashboard polls this
+to fetch issues from GitHub.
+
+For **Linear** projects, issues are fetched automatically by team — no
+extra config needed beyond `linear_team` in projects.yaml.
+
+For **GitLab** projects, TBD — not yet supported in dashboard polling.
+
+### Step 5: Initialize Beads
+
+```bash
+cd <project-path>
+git config beads.role agent
+```
+
+This prevents the `"beads.role not configured"` warning on every `bd` command.
+New worktrees inherit this automatically since Panopticon now sets it during
+workspace creation (`workspace-manager.ts` and `worktree.ts`).
+
+### Step 6: Create workspaces/ Directory
+
+```bash
+mkdir -p <project-path>/workspaces
+```
+
+Check `.gitignore` — add `workspaces/` if not already there:
+```bash
+grep -q '^workspaces/' <project-path>/.gitignore 2>/dev/null || \
+  echo 'workspaces/' >> <project-path>/.gitignore
+```
+
+### Step 7: Create CLAUDE.md (if missing)
+
+Check if the project has a `CLAUDE.md`. If not, create a minimal one:
+
+```markdown
+# <Project Name>
+
+## Project Overview
+<Brief description>
+
+## Stack
+<Language, framework, key dependencies>
+
+## Development
+<How to build, run, test>
+
+## Testing
+<Test commands, coverage requirements>
+```
+
+### Step 8: Validate Configuration
+
+Run ALL of these checks and report pass/fail:
+
+```bash
+# 1. Project registered
+pan project list | grep <name>
+
+# 2. Issue prefix resolves (won't crash)
+# Check projects.yaml has linear_team: <PREFIX>
+
+# 3. Trust is set in ~/.claude.json
+node -e "
+const d=JSON.parse(require('fs').readFileSync(
+  require('os').homedir()+'/.claude.json','utf8'));
+console.log(d.projects?.['<path>']?.hasTrustDialogAccepted
+  ? 'PASS: trusted' : 'FAIL: not trusted');
+"
+
+# 4. Dashboard can see issues (GitHub only)
+grep 'GITHUB_REPOS' ~/.panopticon.env | grep -q '<PREFIX>' && \
+  echo "PASS: in GITHUB_REPOS" || echo "FAIL: not in GITHUB_REPOS"
+
+# 5. Beads configured
+cd <path> && git config beads.role && echo "PASS" || echo "FAIL: beads.role not set"
+
+# 6. workspaces/ exists
+test -d <path>/workspaces && echo "PASS" || echo "FAIL: no workspaces/"
+
+# 7. workspaces/ in .gitignore
+grep -q 'workspaces' <path>/.gitignore 2>/dev/null && \
+  echo "PASS" || echo "FAIL: workspaces/ not in .gitignore"
+
+# 8. CLAUDE.md exists
+test -f <path>/CLAUDE.md && echo "PASS" || echo "WARN: no CLAUDE.md"
+
+# 9. Git clean
+cd <path> && git status --short | head -5
+```
+
+### Step 9: Summary
+
+```
+## New Project Setup Complete: <NAME>
+
+Path:           <path>
+Issue prefix:   <PREFIX> (e.g., <PREFIX>-1, <PREFIX>-42)
+Tracker:        GitHub (<owner/repo>)
+Workspace type: <type>
+Tests:          <command>
+Trusted:        Yes
+Beads:          Configured
+Dashboard:      Issues visible
+
+Validation: 8/8 checks passed
+
+Next steps:
+  1. Create issues on <tracker>
+  2. Run: pan opus-plan <PREFIX>-<N>  (plan with Opus)
+  3. Run: pan work issue <PREFIX>-<N> (spawn implementation agent)
+```
+
+---
+
+## REFERENCE: Working Project Configs
+
+### panopticon-cli (monorepo, GitHub)
+- `linear_team: PAN`, `github_repo: eltmon/panopticon-cli`
+- `workspace.type: monorepo`
+- Has: dns, docker, agent, services, env, tests
+
+### mind-your-now (polyrepo, Linear/GitLab)
+- `linear_team: MIN`, `gitlab_repo: eltmon/mind-your-now`
+- `workspace.type: polyrepo` with 6 sub-repos
+- Has: dns, docker, database, agent, services, tunnel, hume, env, tests
+
+### myn-cli (standalone, GitHub)
+- `linear_team: CLI`, `github_repo: mindyournow/myn-cli`
+- `workspace.type: standalone`
+- Has: tests
+
+---
+
+## COMMON MISTAKES
+
+1. **Missing `linear_team`** — The #1 cause of "planning agent starts in $HOME."
+   Despite the name, this field is the issue PREFIX for ALL trackers, not just Linear.
+2. **Not in `GITHUB_REPOS`** — Issues don't appear on dashboard kanban board.
+3. **No `beads.role`** — Every `bd` command prints warning noise in agent output.
+4. **Not pre-trusting the directory** — Agent gets stuck on trust dialog.
+5. **Wrong `workspace.type`** — `standalone` = single repo, `monorepo` = one repo with
+   worktrees, `polyrepo` = multiple repos under one parent dir.
+6. **Missing `workspaces/` directory** — Git worktree creation fails.
+7. **Missing `.gitignore` entry** — `workspaces/` gets committed accidentally.