Commit Graph

26 Commits

Author SHA1 Message Date
Michael Chihlas
cef853d7ea refactor: normalize FlowPilot/Assistant/ScriptBuilder to design system tokens
Replace hardcoded Tailwind color utilities with semantic CSS variable tokens
across 31 files in the FlowPilot, Assistant Chat, and Script Builder feature
communities — the areas graphify identified as design-system-free.

- text-blue-400 → text-accent, bg-blue-500/10 → bg-accent-dim, border-blue-500/20 → border-accent/20
- text-amber-400 → text-warning, bg-amber-400/10 → bg-warning-dim, border-l-amber-500 → border-l-warning
- text-rose-400/500 → text-danger, bg-rose-500/10 → bg-danger-dim
- text-emerald-400 → text-success, bg-emerald-500/10 → bg-success-dim, border-l-emerald-500 → border-l-success
- bg-white/[0.08] → bg-elevated (opacity hack → semantic surface token)
- bg-gradient-to-r from-blue-500 to-blue-400 → bg-accent (no gradient surfaces)
- bg-[#60a5fa] → bg-accent (hard-coded hex removed)

Also adds graphify-out/ to .gitignore.

Theme resilience: accent color has changed twice in 5 weeks. Semantic tokens
mean the next change is a 1-line edit in index.css, not 110 grep-and-replace.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-06 20:20:07 -04:00
chihlasm
61c410e366 feat: replace orange-* Tailwind classes with blue-* equivalents
orange-400→blue-400, orange-500→blue-500, orange-600→blue-600
across ~21 component files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 16:20:24 +00:00
chihlasm
5ff9a9d75e feat: replace all hardcoded orange rgba with blue rgba
Mechanical find-and-replace: rgba(249,115,22,...) → rgba(96,165,250,...)
across ~40 component and page files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 16:20:13 +00:00
chihlasm
34b0f2ade9 fix: eliminate deprecated cyan, glass-border, and off-palette colors site-wide
- Replace all rgba(6,182,212,...) cyan focus borders and accents with
  rgba(249,115,22,...) ember orange across 21+ component files
- Remove all var(--glass-border) references (undefined variable) with
  var(--color-border-default) across 24 files
- Remove deprecated blur orbs and glass-morphism effects from
  SurveyPage, SurveyThankYouPage, and LoginPage
- Migrate landing.css from hardcoded hex to CSS custom properties
  (~97 replacements for single-source theming)
- Fix off-palette grays in FlowPilotAnalyticsPage chart styling
  (#8891a0 → #848b9b, #18191f → var(--color-bg-card))
- Update stale comments: "cyan brand" → "accent brand" in GlowEdge,
  "gradient cyan square" → "gradient orange square" in BrandLogo
- Rename glow-cyan SVG filter ID to glow-accent
- Fix category color comment: "cyan" → "deep orange"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-27 05:42:08 +00:00
chihlasm
3c0a29115c feat: AI marker system prompt fixes, TaskLane activation, and FlowPilot updates
- Fix system prompt to ensure [QUESTIONS]/[ACTIONS] markers in AI responses
- Add format reminder injection to user messages for marker compliance
- Wire TaskLane activation in prefill and resume paths
- Add ActionCardGroup component for structured question/action rendering
- Update FlowPilot session and step card components
- Update ai-session schemas and types for marker data

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-26 19:57:39 +00:00
chihlasm
ff985fb755 refactor: replace cyan accent with ember orange across entire frontend
Swap accent color from cyan (#22d3ee) to ember orange (#f97316) site-wide.
Cyan caused contrast issues and felt generic — orange brings warmth and
urgency fitting for a troubleshooting tool.

Changes:
- CSS variables: accent, accent-hover, accent-dim, accent-text, primary, ring
- Warning color shifted from amber (#fbbf24) to yellow (#eab308) for
  semantic separation from orange accent
- Brand SVGs: logo gradient updated to orange
- 50+ component files: all hardcoded cyan hex values, Tailwind cyan-*
  classes, and rgba(34,211,238,...) glow values replaced
- landing.css: all 45+ cyan references + 5 old border color fixes
- DESIGN-SYSTEM.md bumped to v5 with decisions log
- CLAUDE.md: all color references synced to charcoal palette + orange accent
- PWA theme-color meta tag updated to match sidebar (#10121a)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 07:37:44 +00:00
483653f5fc fix: remove unused props from FlowPilotSession after action bar removal
canResolve, canEscalate, onResolve, onEscalate, onPause, onAbandon are
now handled at the page level in FlowPilotSessionPage header. Remove
from component interface to fix TS6133 build errors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 12:45:20 +00:00
0ec59276c7 refactor: move FlowPilot actions to header bar, fix dividers
- Moved Resolve/Escalate/Share Update buttons from fixed bottom bar into
  the session header. Desktop: inline buttons + overflow menu (Pause/Close).
  Mobile: single overflow menu with all actions.
- Removed FlowPilotActionBar from bottom — message input is now the only
  fixed element at bottom, giving more breathing room.
- Replaced jarring white dividers (var(--glass-border)) with subtle
  border-border (#2e3240) throughout FlowPilot session.
- Restyled status badge from button-looking element to dot + text indicator
  with semantic colors (green=resolved, amber=escalated).
- Reduced content padding from pb-32 to pb-24.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 12:41:28 +00:00
778a172f4e fix: resolve TypeScript build errors in StatusUpdateModal and FlowPilotSessionPage
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 06:43:54 +00:00
fab25456a5 feat: mid-session status updates — ticket notes, client updates, email drafts
Engineers can now generate AI-powered status updates during active FlowPilot
sessions and after resolve/escalate. Three audiences (Ticket Notes, Client
Update, Email Draft) with Quick/Detailed length options. Copy to clipboard
with one click. Client names auto-inserted from intake/PSA context.

Backend: new endpoint POST /ai-sessions/{id}/status-update with audience-aware
system prompts. Frontend: StatusUpdateModal with 2-step selection flow,
Share Update button in action bar, Share Resolution/Escalation on completed
sessions. Also updates Solutions Library spec with Community tier design.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 06:26:32 +00:00
Michael Chihlas
303a558432 refactor: replace hardcoded hex values with Tailwind semantic tokens
3,200+ hardcoded color values replaced with CSS variable-backed
Tailwind classes (bg-card, text-foreground, border-border, etc.).
Enables light mode via CSS variable swap. Only syntax highlighting
colors and intentional one-offs remain hardcoded (~15 values).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-22 04:34:35 -04:00
Michael Chihlas
e4ef904707 refactor: migrate page components to Design System v4
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-22 02:04:16 -04:00
Michael Chihlas
9b87e4dcc8 fix: add missing useNavigate import for abandon redirect
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-21 18:45:21 -04:00
Michael Chihlas
229ecd4985 fix(flowpilot): redirect to Active Sessions after closing session
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-21 18:33:58 -04:00
Michael Chihlas
6ecb5a9bbd fix(flowpilot): widen message bar, add close/abandon session support
- Message bar now fixed-positioned above action bar with full-width
  layout (respects both app sidebar and session sidebar)
- Added abandon_session endpoint (POST /ai-sessions/{id}/abandon)
- Added "Close" button to FlowPilot action bar with confirmation dialog
- Session can now be closed without resolving or escalating

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-21 18:20:34 -04:00
7c3be84b52 feat(flowpilot): add navigation guard for active sessions
Shows a confirmation modal when user tries to navigate away during an
active troubleshooting session. Options: "Stay in Session" or "Pause &
Leave" which auto-pauses the session before navigating.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-21 00:44:48 +00:00
60b380ae1e fix(dashboard): auto-submit FlowPilot session when prefill from dashboard
When user types a problem on the dashboard and hits Enter, skip the
intake form and start the session immediately — no double-enter.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-21 00:18:43 +00:00
3d911d2dc9 feat(dashboard): FlowPilot cockpit dashboard + sidebar redesign
- Replace QuickStartPage with FlowPilot-centric dashboard
- Add StartSessionInput with Guided/Chat mode toggle
- Add PendingEscalations, ActiveFlowPilotSessions, PerformanceCards
- Add KnowledgeBaseCards, TeamSummary, RecentFlowPilotSessions
- Every number/card is a portal to its detail page
- Restructure sidebar: Resolve/Knowledge/Insights sections
- Remove redundant nav items (FlowPilot, Flow Editor, Flow Assist, etc.)
- Wire prefill from dashboard input to FlowPilot intake
- Update mobile nav to match new sidebar structure

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-20 14:22:50 +00:00
9d202c67f2 fix(flowpilot): make action bar fixed to viewport bottom
Previous approach tried to fix the flex height chain, but it proved fragile
across grid → main → outlet → page transitions. New approach: action bar is
position:fixed at the bottom of the viewport, offset by sidebar width via
CSS variable --sidebar-w. Conversation area has pb-20 for clearance.

This works regardless of the height chain, email verification banner,
or any other variable-height elements above the session.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 06:00:11 +00:00
09a42a943a fix(flowpilot): use calc(100vh-56px) for session page height — matches tree editor pattern
The flex height chain through grid → main → outlet → page doesn't reliably
constrain height, causing the action bar to overflow below viewport. The tree
editor already solves this with h-[calc(100vh-56px)] (subtracting the topbar).
Apply the same proven pattern to FlowPilotSessionPage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 05:50:49 +00:00
5fa9c57c17 fix(layout): add flex flex-col to ViewTransitionOutlet — fixes action bar visibility
Root cause: ViewTransitionOutlet wrapping <Outlet> had flex-1 min-h-0 but
display:block (no flex flex-col). Child pages using h-full flex-col couldn't
resolve height against a block parent, so content overflowed and the
FlowPilot action bar (Resolve/Escalate/Pause) rendered below the viewport.

Fix: Add flex flex-col to the outlet wrapper so the full flex height chain
works: app-shell grid → main flex-col → outlet flex-col → page flex-col.

Also removed the h-0 workaround from FlowPilotSessionPage since this
addresses the actual root cause.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 05:29:33 +00:00
0d1d8218b9 fix(flowpilot): render markdown in context messages + fix action bar height chain
Two issues:
1. AI context messages (teal bubble) rendered raw markdown (**bold** etc.)
   instead of parsed markdown — switched from <p> to <MarkdownContent>
2. Action bar still hidden — added h-0 to flex-1 wrapper to force explicit
   height allocation so h-full on FlowPilotSession resolves correctly

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 05:05:53 +00:00
5bd018ed5c fix(flowpilot): fix broken height chain hiding action bar (Resolve/Escalate/Pause)
The FlowPilotSession component uses h-full flex-col to position the action
bar at the bottom, but its parent div in FlowPilotSessionPage only had
flex-1 min-h-0 without flex flex-col. This broke the height chain, causing
the action bar to render below the visible area.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 04:55:33 +00:00
ce118b51d8 fix(flowpilot): fix 4 Phase 2 escalation bugs + update Tailwind version in CLAUDE.md
- Fix escalation status mismatch: hook set 'escalated' but backend returns
  'requesting_escalation'
- Fix list_sessions to include sessions picked up by Engineer B via
  escalation_package->>'picked_up_by' JSONB query
- Fix sidebar escalation icon color: was Tailwind class 'text-amber-400'
  passed to style={{color}}, now hex '#fbbf24'
- Replace window.location.reload() after ticket linking with
  onReloadSession callback to preserve session state
- Update CLAUDE.md: Tailwind CSS v3 → v4 (@tailwindcss/vite, CSS-only config)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-19 03:10:11 +00:00
bbe590bfec feat(ai-session): add Phase 2 PSA integration, escalation handoff, and session management
Phase 2 of the FlowPilot-First Pivot connecting AI sessions to ConnectWise PSA:

Slice 1 — PSA Ticket Intake:
- FlowPilotEngine accepts psa_ticket intake with graceful CW API fallback
- Ticket picker on intake screen (refactored TicketPickerModal for dual-mode)
- Ticket context card in session sidebar

Slice 2 — Auto Documentation Push:
- PSA documentation service with resolution/escalation note formatting
- Time entry creation via new ConnectWise provider method
- Automatic retry scheduler (APScheduler, 5min interval, 3 retries)
- PSA push status indicators in frontend with manual retry button
- Member mapping warning when CW member not mapped

Slice 3 — Session Pause/Resume & Escalation Handoff:
- Pause/resume endpoints for same-engineer session bookmarking
- Escalation flow: requesting_escalation status, self-escalation blocked
- Enhanced escalation package with LLM-generated hypotheses/suggestions
- Pickup endpoint with continue/fresh resume modes and briefing step
- Escalation queue (sidebar nav + dedicated page)
- SessionBriefing component with continue/fresh choice UI
- EscalateModal with PSA-aware button text

Slice 4 — Mid-Session Ticket Linking:
- Link ticket retroactively with context injection into system prompt
- Link Ticket button in session sidebar

Slice 5 — FlowPilot PSA Settings:
- Settings tab on IntegrationsPage with 7 configurable options
- Stored as flowpilot_settings JSONB on PsaConnection

Database: 2 migrations (flowpilot_settings, psa_post_log changes, status constraint)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-19 01:30:05 +00:00
5494816b06 feat(ai-session): add FlowPilot AI-powered troubleshooting sessions
Implements Phase 1 of the FlowPilot-First pivot — the core AI session
experience where engineers describe a problem and FlowPilot guides them
through structured diagnosis with selectable options, free-text escape
hatches, and auto-generated documentation on resolution.

Backend: AISession + AISessionStep models, FlowPilot Engine (LLM
orchestration with structured JSON output), Flow Matching Engine v1
(semantic + keyword + recency scoring), 8 API endpoints with auth,
rate limiting, and AI quota enforcement.

Frontend: Intake screen, conversational session view with sidebar,
step cards with options/actions/resolution suggestions, resolve/escalate
modals, documentation view with rating, session history integration,
and /pilot route with sidebar navigation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 14:27:36 +00:00