feat: bold dashboard redesign with inline stats, section labels, and chip icons

Restructure QuickStartPage for a more professional, informative layout: - Left-aligned hero greeting (text-4xl) with date context and inline stat strip - GreetingStatStrip shows resolved/active/MTTR at a glance - Remove collapsible toggle — dashboard stats always visible - Section labels with trailing border lines for visual hierarchy - Suggestion chips with category icons, card-style hover, press feedback - Fix cyan focus ring and icon color to ember orange design system - Session cards: line-clamp-2 descriptions, font-medium text, problem_domain metadata - Widen container max-w-3xl → max-w-4xl for breathing room - Add .impeccable.md and .github/copilot-instructions.md design context - CLAUDE.md audit: fix stale references, remove duplication, update counts Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-27 05:04:20 +00:00
parent 3c0a29115c
commit dbe66a0568
9 changed files with 284 additions and 144 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,6 +1,6 @@
 # CLAUDE.md - Patherly / ResolutionFlow Project Context

-> **Last Updated:** March 25, 2026
+> **Last Updated:** March 27, 2026

 ---

@@ -23,25 +23,13 @@
 - **Design aesthetic:** Flat, high-contrast dark theme (Sentry/PostHog-inspired). No glass morphism, no gradients on surfaces, no ambient effects. Light mode planned.
 - **Accent color:** Ember orange (#f97316 / #ea580c). Used sparingly — ≤5% of the UI. Warning is yellow (#eab308), not amber, to stay distinct from accent.
 - **Fonts:** IBM Plex Sans (`font-sans`, body), Bricolage Grotesque (`font-heading`, headings), JetBrains Mono (`font-mono`, code) — loaded via Google Fonts
- **Logo:** 30px gradient square (cyan) + "ResolutionFlow" in Bricolage Grotesque 700
+- **Logo:** 30px gradient square (ember orange) + "ResolutionFlow" in Bricolage Grotesque 700
 - **Layout:** Icon rail sidebar (72px default) with hover flyout panels. Pinnable to full 260px sidebar. See [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md)
 - **Brand assets:** `brand-assets/` (source SVGs), `frontend/src/assets/brand/` (app assets), `frontend/public/icons/` (favicon)
 - **Terminology:** User-facing label is "Flows" (not "Trees"). Procedural flows are called "Projects" in the UI. Step Library is called "Solutions Library" in the UI. Maintenance flows are hidden from UI for pilot (backend still supports them). `tree_type` column values unchanged in DB.
 - **Reference mockups:** `docs/mockups/` (HTML files, open in browser)

-**Component styling rules:**
-
- Primary buttons: solid `accent` background (#f97316), white text, 5px radius
- Ghost buttons: transparent with 1px `border-default`, hover `bg-elevated`
- Cards: `bg-card` with 1px `border-default`, 8px radius. NO shadows, NO blur, NO gradients.
- Badges: pill-shaped (20px radius), semantic dim background + matching text color
- Active nav: `accent-dim` background + `accent-text` color + 3px left accent bar
- Stat cards: 3px colored left border (accent/success/warning by position)
- Code blocks: `bg-code` with JetBrains Mono, material-inspired syntax highlighting
- Status colors: green/`#34d399` (success), yellow/`#eab308` (warning), red/`#f87171` (danger) — ONLY for semantic meaning
- Section labels: 10px, 600 weight, uppercase, `text-muted`, 1.2px letter-spacing
-
-When adding new pages/components: reference [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md). Use flat dark surfaces, 1px borders, no decorative effects. All colors via CSS variables. Use "Flows" not "Trees" in all user-facing text; use "Projects" not "Procedures" for procedural flows.
+**Component styling:** See Design System section below and [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md). All colors via CSS variables. Use "Flows" not "Trees" in user-facing text; use "Projects" not "Procedures" for procedural flows.

 ## Implementation Principles

@@ -54,9 +42,9 @@ When adding new pages/components: reference [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md)
 ## Current State

 - **Phase:** Go-to-Market Validation (Pre-PMF)
- **Backend:** Complete (35+ API endpoints, 100+ integration tests)
+- **Backend:** Complete (55+ API endpoints, 100+ integration tests)
 - **Frontend:** Core features complete, Tree Editor functional
- **Database:** PostgreSQL with Docker, 75 migrations
+- **Database:** PostgreSQL with Docker, 98 migrations
 - **Detailed status:** [CURRENT-STATE.md](CURRENT-STATE.md)

 ### What's In Progress
@@ -65,20 +53,6 @@ When adding new pages/components: reference [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md)
 - Solutions Library spec written (`docs/plans/2026-03-23-solutions-library-design.md`), implementation post-pilot
 - Remaining open issues: #66 Templates + Import/Export, #60 Recurring Issue Detection, #58 Step Feedback Flag

-### Recently Completed
-
- Copilot-first dashboard redesign: ChatGPT-style input, suggestion chips, simplified sidebar
- Charcoal color palette: sidebar-darkest approach (`#10121a` sidebar, `#1a1c23` page, `#22252e` cards)
- Unified Command Palette: merged QuickLaunch into omnibar, removed lightning bolt button
- "Solutions Library" rename from "Step Library" site-wide
- Maintenance flows hidden from UI for pilot
- Landing page copy rewrite: copilot-first messaging ("Resolve tickets faster. Notes write themselves.")
- Spring bounce hover animation on dashboard cards
- Amber "New Session" button in sidebar
- Landing page design audit: hamburger menu, Privacy/Terms pages, branding alignment
- Root directory cleanup: archived 9 completed docs, tracked marketing assets
- GitHub issues triage: closed 10 stale issues (6 completed, 4 deferred)
-
 ---

 ## Tech Stack
@@ -95,7 +69,7 @@ When adding new pages/components: reference [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md)
 ### Frontend

 - **Framework:** React 19 + Vite + TypeScript
- **Styling:** Tailwind CSS v4 (`@tailwindcss/vite` plugin, CSS-only config in `index.css`) — flat dark theme with cyan accent (see [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md))
+- **Styling:** Tailwind CSS v4 (`@tailwindcss/vite` plugin, CSS-only config in `index.css`) — flat dark theme with ember orange accent (see [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md))
 - **State:** Zustand (with immer + zundo for undo/redo)
 - **Routing:** React Router v7
 - **API Client:** Axios with token refresh interceptor
@@ -110,7 +84,7 @@ patherly/
 ├── backend/
 │   ├── app/
 │   │   ├── main.py                 # FastAPI entry point
-│   │   ├── api/endpoints/          # Route handlers (auth, trees, sessions, admin, steps, survey, copilot, assistant_chat, psa_connections)
+│   │   ├── api/endpoints/          # Route handlers (auth, trees, sessions, admin, steps, survey, copilot, assistant_chat, integrations)
 │   │   │   ├── flow_proposals.py   # Knowledge Flywheel review queue CRUD
 │   │   │   └── flowpilot_analytics.py # FlowPilot dashboard metrics
 │   │   ├── api/deps.py             # Auth dependencies (includes require_team_admin)
@@ -118,7 +92,7 @@ patherly/
 │   │   ├── core/                   # config, database, permissions, security, audit, rate_limit
 │   │   ├── models/                 # SQLAlchemy models (includes FlowProposal)
 │   │   ├── schemas/                # Pydantic schemas
-│   │   ├── services/psa/           # PSA provider abstraction (base, connectwise/, cache, encryption, registry, types)
+│   │   ├── services/psa/           # PSA provider abstraction (base, connectwise/, autotask/, halopsa/, cache, encryption, registry, types)
 │   │   ├── services/knowledge_flywheel.py        # AI session analysis → flow proposals
 │   │   ├── services/knowledge_flywheel_scheduler.py # APScheduler job for batch analysis
 │   │   └── services/knowledge_gap_service.py     # Weak options & escalation signal detection
@@ -131,7 +105,7 @@ patherly/
 │   │   ├── components/             # common, layout, dashboard, tree-editor, session, procedural, procedural-editor, library, step-library, ui, flowpilot
 │   │   ├── hooks/                  # usePermissions, useSessionTimer, useKeyboardShortcuts
 │   │   ├── pages/                  # All page components
-│   │   ├── store/                  # Zustand stores (auth, treeEditor, proceduralEditor, userPreferences)
+│   │   ├── store/                  # Zustand stores (auth, treeEditor, proceduralEditor, userPreferences, scriptGeneratorStore)
 │   │   └── types/                  # TypeScript interfaces
 │   └── (Tailwind v4: CSS-only config in src/index.css)
 ├── docs/plans/archive/             # Archived design/impl docs (pre-March 2026)
@@ -202,7 +176,7 @@ Official ConnectWise developer guides live in `docs/connectwise/best-practices/`
 - Auth: API Key auth (Base64 of `companyId+publicKey:privateKey`) + `clientId` header on every request
 - `clientId` is server-side config (`CW_CLIENT_ID` in `config.py`) — identifies the ResolutionFlow app, NOT per-tenant. Per-connection credentials: `company_id`, `public_key`, `private_key`, `server_url`
 - All PSA integration code in `services/psa/` — provider pattern with `PSAProvider` abstract base class, `ConnectWiseProvider` implementation, `PsaProviderRegistry` for multi-PSA dispatch
- PSA endpoints in `api/endpoints/psa_connections.py` — connection CRUD, ticket ops, member mapping
+- PSA endpoints in `api/endpoints/integrations.py` — connection CRUD, ticket ops, member mapping
 - Credentials encrypted at rest via `services/psa/encryption.py` (Fernet)
 - Each MSP tenant provides their own CW credentials — ResolutionFlow stores these per-team, never per-user
 - Design for the Autotask integration following the same service layer pattern (future PSA)
@@ -366,11 +340,6 @@ gh run view <id> --json jobs --jq '.jobs[] | {name: .name, conclusion: .conclusi

 **88. Charcoal palette — sidebar-darkest approach:** Sidebar `#10121a`, page `#1a1c23`, cards `#22252e`, borders `#2e3240`. This gives more contrast range than true-dark (`#0c0d10`). All colors via CSS variables in `index.css` `@theme` block. Accent is ember orange (#f97316), not cyan.

-**89. QuickLaunch merged into CommandPalette:** There is no separate QuickLaunch/lightning bolt. The unified Cmd+K omnibar handles search, navigation, quick actions, and FlowPilot. `QuickLaunch.tsx` was deleted.
-
-**90. Copilot-first UX direction:** The FlowPilot AI chat copilot is the primary experience. Dashboard centers on the chat input. Guided flows (decision trees) are accessible but secondary — in sidebar under "Flows". Maintenance flows are hidden from UI for pilot.
-
-**91. "New Session" button is amber-400:** Sidebar uses `bg-amber-400/15 text-amber-400` for the New Session button, not cyan. This makes it visually distinct from the cyan accent used elsewhere.

 **92. `tsc -b` in Dockerfile is stricter than `npx tsc --noEmit`:** The production build (`tsc -b && vite build`) enforces `noUnusedLocals` and `noUnusedParameters` as hard errors. After any refactor that moves logic between components or removes features, trace every import and destructured prop to remove orphans. IDE warnings (yellow squiggles) flag these — check them before pushing.

@@ -390,6 +359,12 @@ gh run view <id> --json jobs --jq '.jobs[] | {name: .name, conclusion: .conclusi

 **100. Hover pop-out card pattern:** For cards that expand on hover "in front of everything": use `pointer-events-none` on the scrim (`fixed inset-0 z-40 bg-black/30`), absolute-position the expanded card at `z-50` with its own `onClick` handler, and dismiss via `onMouseLeave` on the wrapper div. Never put interactive event handlers on the scrim — it blocks clicks on sibling elements.

+**101. AI marker format compliance:** The AI assistant uses `[QUESTIONS]`, `[ACTIONS]`, and `[FORK]` markers in responses. Parsed by `unified_chat_service.py` (`_parse_*_marker` functions), returned as structured data in the API response. System prompt in `assistant_chat_service.py` has a final reminder section, and each user message gets an invisible `[SYSTEM: ...]` reminder appended in `_call_anthropic_cached()`. If markers stop appearing: check conversation history stores `display_content` (stripped), verify system prompt final reminder exists, check user message reminder injection is active.
+
+**102. TaskLane activation must happen in ALL chat response paths:** `AssistantChatPage.tsx` has three code paths calling `sendChatMessage`: `handleSend` (regular messages), `sendPrefill` (dashboard handoff), `handleResumeNew` (resume from concluded session). ALL three must check `response.actions`/`response.questions` and call `setShowTaskLane(true)`. Missing this in any path causes TaskLane to not appear on first message.
+
+**103. Docker not available in code-server container:** The dev environment runs code-server inside Docker on the VPS. The `docker` CLI is not available inside the code-server container. To query the database, use the VPS SSH session: `docker exec resolutionflow_postgres psql -U postgres -d resolutionflow -t -c "SQL"`. Python is also not available in the container.
+
 ---

 ## RBAC & Permissions
@@ -517,14 +492,6 @@ When a feature, fix, or significant piece of work is finished and merged/committ

 ---

-## gstack
-
-Use `/browse` from gstack for **all web browsing** — never use `mcp__claude-in-chrome__*` tools.
-
-**Available skills:** `/office-hours`, `/plan-ceo-review`, `/plan-eng-review`, `/plan-design-review`, `/design-consultation`, `/review`, `/ship`, `/browse`, `/qa`, `/qa-only`, `/design-review`, `/setup-browser-cookies`, `/retro`, `/investigate`, `/document-release`, `/codex`, `/careful`, `/freeze`, `/guard`, `/unfreeze`, `/gstack-upgrade`
-
---
-
 ## Future Roadmap

 - **Phase 3:** PSA integrations (ConnectWise in progress), file attachments, client context, analytics
@@ -541,6 +508,5 @@ Use `/browse` from gstack for **all web browsing** — never use `mcp__claude-in
 | Development Roadmap | [03-DEVELOPMENT-ROADMAP.md](03-DEVELOPMENT-ROADMAP.md) |
 | GitHub Issues | `gh issue list --state open` |
 | Bugs & Fixes | CLAUDE.md → Critical Lessons Learned section |
-| Feature Specs | [04-FEATURE-SPECIFICATIONS.md](04-FEATURE-SPECIFICATIONS.md) |
 | Design System | [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md) |
 | Dev Environment | [DEV-ENV.md](DEV-ENV.md) — 46.202.92.250 setup, Docker, CORS, networking |