feat(web): improve session list grouping and mode badges

[gaius-codius]

Summary

This PR isolates session list / session header UI & metadata presentation improvements from the original umbrella PR.

It improves grouping clarity, machine context visibility, and mode/flavor badge readability.

Why

• session list needed stronger context in multi-machine / multi-worktree setups
• permission mode visibility was inconsistent in list/header
• UI updates were easier to review independently from theme + clipboard work

Scope

Session grouping and context

• group sessions by machine + directory key (not directory alone)
• update project count logic to match grouped keying
• surface machine label per group via machine map from router
• preserve collapse behavior with stable group keys

Session item and group visual refresh

• improve group header hierarchy and spacing
• tighten badges/chips for pending/thinking/count states
• improve selected-row treatment and separators
• keep row metadata compact and scannable

Flavor + permission-mode presentation

• include permissionMode in SessionSummary mapping
• add tone-based permission style helpers
• show flavor, permission mode, model mode, and branch badges consistently
• respect flavor compatibility checks for permission modes

Shared utilities

• expand agentFlavorUtils with badge/text class helpers

Refactor polish included

• simplify badge rendering by removing inline JSX IIFEs in session list/header
• precompute badge state for readability and maintenance

Files touched

• shared/src/sessionSummary.ts
• web/src/components/SessionList.tsx
• web/src/components/SessionHeader.tsx
• web/src/lib/agentFlavorUtils.ts
• web/src/router.tsx

Validation

• bun run typecheck
• bun run test:web

Test coverage added in this PR

• Added web/src/components/SessionList.test.tsx
• Covers:
  • grouping by machine + directory key
  • permission-mode badge visibility only when flavor allows mode

Validation run (successful)

• bun run typecheck:web
• bun run test:web

Both commands executed after test additions and passed.

[github-actions]

[MINOR] [THEME] New badge/flavor CSS vars undefined

Why this is a problem: PERMISSION_TONE_* and FLAVOR_COLORS now depend on --app-badge-info-*, --app-perm-warning, and --app-flavor-* tokens, but they are not defined in web/src/index.css (Not found in repo/docs). Badge colors will fall back to inherited/default values, losing visual cues.

Suggested fix:

export const PERMISSION_TONE_BADGE: Record<PermissionModeTone, string> = {
    neutral: 'text-[var(--app-fg)] bg-[var(--app-subtle-bg)] border-[var(--app-border)]',
    info: 'text-[var(--app-badge-info-text,var(--app-link))] bg-[var(--app-badge-info-bg,var(--app-subtle-bg))] border-[var(--app-badge-info-border,var(--app-border))]',
    warning: 'text-[var(--app-perm-warning,var(--app-badge-warning-text))] bg-[var(--app-badge-warning-bg)] border-[var(--app-badge-warning-border)]',
    danger: 'text-[var(--app-badge-error-text)] bg-[var(--app-badge-error-bg)] border-[var(--app-badge-error-border)]'
}

const FLAVOR_COLORS: Record<string, FlavorColors> = {
    claude: {
        text: 'text-[var(--app-flavor-claude,var(--app-link))]',
        bg: 'bg-[var(--app-flavor-claude-bg,var(--app-subtle-bg))]',
        border: 'border-[var(--app-flavor-claude-border,var(--app-border))]'
    },
    // repeat fallback pattern for codex/gemini/opencode
}

[github-actions]

Findings

• [Minor] Undefined badge/flavor CSS tokens — new PERMISSION_TONE_*/FLAVOR_COLORS classes rely on --app-badge-info-*, --app-perm-warning, --app-flavor-* but these tokens are not defined in theme (Not found in repo/docs). Badge colors fall back to inherited/default values. Evidence: web/src/lib/agentFlavorUtils.ts:3.
  Suggested fix:

  export const PERMISSION_TONE_BADGE: Record<PermissionModeTone, string> = {
      neutral: 'text-[var(--app-fg)] bg-[var(--app-subtle-bg)] border-[var(--app-border)]',
      info: 'text-[var(--app-badge-info-text,var(--app-link))] bg-[var(--app-badge-info-bg,var(--app-subtle-bg))] border-[var(--app-badge-info-border,var(--app-border))]',
      warning: 'text-[var(--app-perm-warning,var(--app-badge-warning-text))] bg-[var(--app-badge-warning-bg)] border-[var(--app-badge-warning-border)]',
      danger: 'text-[var(--app-badge-error-text)] bg-[var(--app-badge-error-bg)] border-[var(--app-badge-error-border)]'
  }
  
  const FLAVOR_COLORS: Record<string, FlavorColors> = {
      claude: {
          text: 'text-[var(--app-flavor-claude,var(--app-link))]',
          bg: 'bg-[var(--app-flavor-claude-bg,var(--app-subtle-bg))]',
          border: 'border-[var(--app-flavor-claude-border,var(--app-border))]'
      },
      // repeat fallback pattern for codex/gemini/opencode
  }

Summary

• 1 minor issue; color tokens missing for new badges/flavor styles.

Testing

• Not run (automation)

HAPI Bot

[gaius-codius]

Thanks for the review! This is a false positive — all the referenced CSS tokens (--app-badge-info-*, --app-perm-warning, --app-flavor-*) are defined in web/src/index.css across every theme (default light/dark, Catppuccin, Gaius light/dark).

The file reference (agentFlavorUtils.ts:3) also seems incorrect — that file only contains boolean helper functions and has no CSS token usage.

No changes needed here.

[gaius-codius]

Follow-up scope fix: moved baseline session-UI semantic color tokens to this PR (commit 0602869).

Added in web/src/index.css (light/dark base):

• --app-selected-bg
• --app-badge-info-*
• --app-perm-warning
• --app-flavor-* (+ bg/border variants)

This makes #188 self-contained for sidebar/header/badge styling against main.