2026-05-06 23:14:16 +00:00
7 changed files with 544 additions and 677 deletions
--- a/CURRENT-STATE.md
+++ b/CURRENT-STATE.md
@@ -12,6 +12,7 @@

 ## Recently shipped (post-0.1.0.0)

+- **2026-05-01 — PR #158** Session-screen UX impeccable pass + tasklane keyboard flow. Heuristic score 24/40 → 33/40 across five sub-passes (distill, quieter, layout, typeset, polish). Removed duplicate "Suggested checks" chip strip → TaskLane is the single source of truth; added inline `Next steps · N pending` cue on the latest action-bearing AI bubble; consolidated session header to Resolve + Escalate + ⋯ kebab; centered messages column to match composer; dropped all banned decorations (side stripes, gradient surfaces, backdrop blur, accent borderTop) for a single decoration channel per surface; unified 14 text sizes into a 5-step scale. TaskLane keyboard flow: Enter submits + auto-advances, Shift+Enter newline, Esc cancel, focus jumps to Send after the last task. Banner ↔ script-panel are now linked (collapse hides both, any outcome closes both). WhatWeKnow section is collapsible with `sessionStorage` memory + auto-collapse-at-5-facts. Side fix: ParameterizationPreview no longer over-highlights short parameter values (word-boundary check). Two backlog entries logged in `.ai/TODO.md`: ConcludeSessionModal multi-select and `bg-card-hover` Tailwind drift in CommandPalette.
 - **2026-05-01 — PR #156** Suggested-fix "Awaiting verification" outcome. Engineers can now park a fix in `applied_pending` (waiting on client power-cycle, AD replication, license sync, etc.) instead of forcing a synchronous worked/didn't/partial verdict. PendingBanner with worked / didn't / update reason / dismiss; nudge "Still checking" records pending with a reason; page-level Resolve auto-patches pending → success before the resolution flow opens; page-level Escalate intercepts pending. Migration `c0f3a4b7e91d` (`pending_reason` column + status CHECK constraint).
 - **2026-04-30 — PR #155** Escalation Mode wedge. Magic-moment handoff-context screen for senior pickup, live SSE escalation arrivals, post-claim time-to-first-action metric (`GET /analytics/flowpilot/escalations`), atomic role-gated claim with conflict resolution, queue self-exclusion, chat ownership extended to claimed sessions. The wedge for the first paying-customer push.

--- a/.impeccable.md
+++ b/.impeccable.md
--- a/frontend/e2e/navigation.spec.ts
+++ b/frontend/e2e/navigation.spec.ts
@@ -30,7 +30,7 @@ test.describe('authenticated navigation smoke tests', () => {
    await page.goto('/account')

    await expect(
-      page.getByRole('heading', { name: 'Account Management' }),
+      page.getByRole('heading', { name: 'Settings' }),
    ).toBeVisible()
  })
 })
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -2,10 +2,10 @@ import { useCallback, useEffect, useRef, useState, type PointerEvent as ReactPoi
 import { Link, useLocation } from 'react-router-dom'
 import type { LucideIcon } from 'lucide-react'
 import {
-  LayoutGrid, Clock, AlertTriangle, GitBranch, Code2, Wand2,
-  ListChecks, Download, BarChart3,
+  LayoutGrid, Clock, AlertTriangle, GitBranch,
+  ListChecks, BarChart3,
  Settings, Pin, PinOff,
-  History, FileText, Network, Ticket,
+  FileText, Ticket, BookOpen,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
@@ -31,11 +31,6 @@ interface NavEntry {
  children?: NavSubItem[]
 }

-interface NavSection {
-  title: string
-  items: NavEntry[]
-}
-
 /* ── Sidebar component ──────────────────────────────── */

 export function Sidebar() {
@@ -78,36 +73,40 @@ export function Sidebar() {

  /* ── Navigation data ──────────────────────────────── */

-  /* ── Grouped nav: 5 top-level icons (Sentry-style) ── */
+  /* Single source-of-truth IA. Same items, same order, in both rail
+   * and pinned modes. Pin/unpin is a width/label affordance, not an
+   * IA switch. A hairline divider separates the two groups; no labels. */

-  const railGroups: NavEntry[] = [
+  const workItems: NavEntry[] = [
    {
-      href: '/', icon: LayoutGrid, label: 'Home', shortLabel: 'Home',
+      href: '/', icon: LayoutGrid, label: 'Dashboard', shortLabel: 'Dash',
      matchPaths: ['/'],
    },
-    {
-      href: '/sessions', icon: History, label: 'History', shortLabel: 'History',
-      badge: stats?.active_count || undefined,
-      matchPaths: ['/sessions', '/escalations', '/pilot'],
-      children: [
-        { href: '/sessions', label: 'Session History', count: stats?.active_count || undefined },
-        { href: '/escalations', label: 'Escalations', count: stats?.escalation_count || undefined },
-      ],
-    },
    {
      href: '/tickets', icon: Ticket, label: 'Tickets', shortLabel: 'Tickets',
      matchPaths: ['/tickets'],
    },
+    {
+      href: '/sessions', icon: Clock, label: 'Sessions', shortLabel: 'Sessions',
+      badge: stats?.active_count || undefined,
+      matchPaths: ['/sessions'],
+    },
+    {
+      href: '/escalations', icon: AlertTriangle, label: 'Escalations', shortLabel: 'Escal',
+      badge: stats?.escalation_count || undefined,
+      matchPaths: ['/escalations'],
+    },
+  ]
+
+  const libraryItems: NavEntry[] = [
    {
      href: '/trees', icon: GitBranch, label: 'Flows', shortLabel: 'Flows',
      badge: stats?.tree_counts.total || undefined,
-      matchPaths: ['/trees', '/flows', '/my-trees', '/step-library', '/review-queue', '/network-diagrams'],
+      matchPaths: ['/trees', '/flows', '/my-trees', '/step-library', '/network-diagrams'],
      children: [
-        { href: '/trees', label: 'Flow Library', count: stats?.tree_counts.total || undefined },
        { href: '/trees?type=procedural', label: 'Projects', count: stats?.tree_counts.procedural || undefined },
-        { href: '/network-diagrams', label: 'Network Maps' },
        { href: '/step-library', label: 'Solutions Library' },
-        { href: '/review-queue', label: 'Review Queue' },
+        { href: '/network-diagrams', label: 'Network Maps' },
      ],
    },
    {
@@ -115,60 +114,25 @@ export function Sidebar() {
      badge: pendingDraftCount || undefined,
      matchPaths: ['/scripts', '/script-builder'],
      children: [
-        { href: '/scripts', label: 'Script Library', count: pendingDraftCount || undefined },
        { href: '/script-builder', label: 'Script Builder' },
      ],
    },
    {
-      href: '/analytics', icon: BarChart3, label: 'Insights', shortLabel: 'Data',
+      href: '/review-queue', icon: ListChecks, label: 'Review Queue', shortLabel: 'Review',
+      matchPaths: ['/review-queue'],
+    },
+    {
+      href: '/analytics', icon: BarChart3, label: 'Analytics', shortLabel: 'Stats',
      matchPaths: ['/analytics', '/shares'],
      children: [
-        { href: '/analytics', label: 'Analytics' },
        { href: '/shares', label: 'Exports' },
      ],
    },
  ]

-  /* Pinned mode still uses the detailed section layout */
-  const sections: NavSection[] = [
-    {
-      title: 'RESOLVE',
-      items: [
-        { href: '/', icon: LayoutGrid, label: 'Dashboard', shortLabel: 'Dash' },
-        { href: '/sessions', icon: Clock, label: 'Session History', shortLabel: 'History', badge: stats?.active_count || undefined, matchPaths: ['/sessions'] },
-        { href: '/tickets', icon: Ticket, label: 'Tickets', shortLabel: 'Tickets', matchPaths: ['/tickets'] },
-        { href: '/escalations', icon: AlertTriangle, label: 'Escalations', shortLabel: 'Escal', badge: stats?.escalation_count || undefined },
-      ],
-    },
-    {
-      title: 'KNOWLEDGE',
-      items: [
-        {
-          href: '/trees', icon: GitBranch, label: 'Flow Library', shortLabel: 'Flows',
-          badge: stats?.tree_counts.total || undefined,
-          matchPaths: ['/trees', '/flows', '/my-trees'],
-          children: [
-            { href: '/trees', label: 'Flow Library' },
-            { href: '/trees?type=procedural', label: 'Projects', count: stats?.tree_counts.procedural || undefined },
-          ],
-        },
-        { href: '/network-diagrams', icon: Network, label: 'Network Maps', shortLabel: 'NetMap', matchPaths: ['/network-diagrams'] },
-        { href: '/scripts', icon: Code2, label: 'Scripts', shortLabel: 'Scripts' },
-        { href: '/script-builder', icon: Wand2, label: 'Script Builder', shortLabel: 'Builder' },
-        { href: '/review-queue', icon: ListChecks, label: 'Review Queue', shortLabel: 'Review' },
-      ],
-    },
-    {
-      title: 'INSIGHTS',
-      items: [
-        { href: '/analytics', icon: BarChart3, label: 'Analytics', shortLabel: 'Stats' },
-        { href: '/shares', icon: Download, label: 'Exports', shortLabel: 'Export' },
-      ],
-    },
-  ]
-
  const footerItems: NavEntry[] = [
-    { href: '/account', icon: Settings, label: 'Account', shortLabel: 'Acct' },
+    { href: '/guides', icon: BookOpen, label: 'Guides', shortLabel: 'Guides', matchPaths: ['/guides'] },
+    { href: '/account', icon: Settings, label: 'Account', shortLabel: 'Acct', matchPaths: ['/account'] },
  ]

  /* ── Active detection ─────────────────────────────── */
@@ -369,9 +333,9 @@ export function Sidebar() {

  /* ── Find active flyout group for drawer ── */

+  const allRailItems = [...workItems, ...libraryItems, ...footerItems]
  const activeFlyoutGroup = flyoutIndex && !sidebarPinned
-    ? railGroups.find((_, i) => `rail-${i}` === flyoutIndex) ||
-      footerItems.find((_, i) => `footer-${i}` === flyoutIndex)
+    ? allRailItems.find(item => item.href === flyoutIndex) || null
    : null

  /* ── Main render ──────────────────────────────────── */
@@ -386,23 +350,20 @@ export function Sidebar() {
      >
        {/* Pinned sidebar content */}
        <div className="px-3 py-2 space-y-0.5">
-          {sections.map((section, si) => (
-            <div key={section.title}>
-              {si > 0 && (
-                <div className="font-mono text-[0.5625rem] uppercase tracking-[0.12em] text-text-muted px-3 pt-3 pb-1">
-                  {section.title}
-                </div>
-              )}
-              {section.items.map((item, ii) => renderPinnedItem(item, `${si}-${ii}`))}
-            </div>
-          ))}
+          {workItems.map(item => renderPinnedItem(item, item.href))}
+          <div
+            className="my-3 border-t"
+            style={{ borderColor: 'var(--color-border-default)' }}
+            aria-hidden="true"
+          />
+          {libraryItems.map(item => renderPinnedItem(item, item.href))}
        </div>

        <div className="flex-1" />

        {/* Footer */}
        <div className="px-3 pt-2 pb-4 space-y-0.5" style={{ borderTop: '1px solid var(--color-border-default)' }}>
-          {footerItems.map((item, i) => renderPinnedItem(item, `footer-${i}`))}
+          {footerItems.map(item => renderPinnedItem(item, item.href))}
          <button
            type="button"
            onClick={toggleSidebarPinned}
@@ -417,7 +378,7 @@ export function Sidebar() {
    )
  }

-  /* Icon Rail (default) — 5 grouped icons, Sentry-style */
+  /* Icon rail (default, unpinned) — same items as pinned mode, narrower. */
  return (
    <div
      className="flex h-full"
@@ -432,14 +393,20 @@ export function Sidebar() {
      >
        {/* Nav items */}
        <div className="flex flex-col items-center w-full px-1 space-y-1.5">
-          {railGroups.map((item, i) => renderRailItem(item, `rail-${i}`))}
+          {workItems.map(item => renderRailItem(item, item.href))}
+          <div
+            className="w-8 my-1 border-t self-center"
+            style={{ borderColor: 'var(--color-border-default)' }}
+            aria-hidden="true"
+          />
+          {libraryItems.map(item => renderRailItem(item, item.href))}
        </div>

        <div className="flex-1" />

-        {/* Footer: Account + Pin */}
+        {/* Footer: Guides, Account + Pin */}
        <div className="flex flex-col items-center w-full px-1 pb-5 pt-3 space-y-1.5" style={{ borderTop: '1px solid var(--color-border-default)' }}>
-          {footerItems.map((item, i) => renderRailItem(item, `footer-${i}`))}
+          {footerItems.map(item => renderRailItem(item, item.href))}
          <button
            type="button"
            onClick={toggleSidebarPinned}
@@ -471,7 +438,7 @@ export function Sidebar() {
          >
            {/* Drawer header */}
            <div className="px-3 mb-3">
-              <h3 className="text-[0.6875rem] font-mono uppercase tracking-[0.12em] text-[#fbbf24]">
+              <h3 className="text-[0.6875rem] font-mono uppercase tracking-[0.12em] text-text-muted">
                {activeFlyoutGroup.label}
              </h3>
            </div>
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
--- a/frontend/src/pages/account/ProfileSettingsPage.tsx
+++ b/frontend/src/pages/account/ProfileSettingsPage.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 import { User as UserIcon, Loader2, AlertCircle, Check } from 'lucide-react'
 import { authApi } from '@/api/auth'
 import { useAuthStore } from '@/store/authStore'
+import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import type { UserUpdate } from '@/types'
@@ -16,6 +17,7 @@ const inputClass = cn(
 export function ProfileSettingsPage() {
  const user = useAuthStore((s) => s.user)
  const fetchUser = useAuthStore((s) => s.fetchUser)
+  const { defaultExportFormat, setDefaultExportFormat } = useUserPreferencesStore()

  const [name, setName] = useState(user?.name ?? '')
  const [email, setEmail] = useState(user?.email ?? '')
@@ -120,6 +122,27 @@ export function ProfileSettingsPage() {
            </select>
          </div>

+          {/* Default export format — saved on change, not via Save Changes */}
+          <div>
+            <label htmlFor="profile-export-format" className="block text-sm font-medium text-foreground">
+              Default export format
+            </label>
+            <p className="text-xs text-muted-foreground">Pre-selected when exporting sessions.</p>
+            <select
+              id="profile-export-format"
+              value={defaultExportFormat}
+              onChange={(e) => {
+                setDefaultExportFormat(e.target.value as 'markdown' | 'text' | 'html')
+                toast.success('Preference saved')
+              }}
+              className={inputClass}
+            >
+              <option value="markdown">Markdown (.md)</option>
+              <option value="text">Plain text (.txt)</option>
+              <option value="html">HTML (.html)</option>
+            </select>
+          </div>
+
          {error && (
            <div className="flex items-center gap-2 text-sm text-rose-500">
              <AlertCircle className="h-4 w-4 shrink-0" />
--- a/skills-lock.json
+++ b/skills-lock.json
@@ -0,0 +1,17 @@
+{
+  "version": 1,
+  "skills": {
+    "documentation-writer": {
+      "source": "github/awesome-copilot",
+      "sourceType": "github",
+      "skillPath": "skills/documentation-writer/SKILL.md",
+      "computedHash": "ee53d65b163cd7eb953a930c95841cfe398cc2c0bd24c06508bbaa07c432be35"
+    },
+    "impeccable": {
+      "source": "pbakaus/impeccable",
+      "sourceType": "github",
+      "skillPath": ".agents/skills/impeccable/SKILL.md",
+      "computedHash": "de38608ceb9573c3142306babd9057a240791c4e4d6647f874a4650c996cb37e"
+    }
+  }
+}