chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: UI design system - sidebar layout, workspace system, and shell redesign (#77)

Browse Source 
* feat: add workspace system and sidebar layout (UI design system Phase A+B)

Backend: Workspace model, migration (036), schemas, CRUD API endpoints.
Adds workspace_id to trees and categories, seeds 4 default workspaces
per account, auto-assigns existing trees by tree_type.

Frontend: Complete AppLayout rewrite from top-nav to CSS Grid shell
with persistent sidebar + topbar. New components: WorkspaceSwitcher,
NavItem, CategoryList, TagCloud, TopBar, Sidebar. Dashboard components:
QuickStats, FiltersBar, SectionGroup, TreeListItem, SessionsPanel.
WorkspaceStore with localStorage persistence.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add command palette search, dashboard rewrite, and shell height fixes (Phase C)

- Add ⌘K command palette with debounced search across flows and sessions
- Rewrite QuickStartPage as dashboard with stats, filters, sessions panel
- Fix h-[calc(100vh-4rem)] → h-full across all pages for CSS Grid shell
- Add active session count badge to sidebar Sessions nav item

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add sidebar collapse, category/tag filtering, and workspace CRUD (Phase D)

- Sidebar collapse/expand toggle with icon-only rail mode (persisted)
- Sidebar category/tag clicks navigate to /trees with URL params
- TreeLibraryPage syncs filters from URL search params bidirectionally
- Workspace create modal with icon picker and auto-slug generation
- TopBar logo adapts to collapsed sidebar state

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add Quick Launch modal with actions and recent flows

- Zap button opens Quick Launch with create/navigate shortcuts
- Shows recent flows for quick session start
- Keyboard navigation support (arrows + enter)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add activity notifications panel with session feed

- Bell icon shows dot indicator for recent activity
- Dropdown panel shows recent sessions with status icons
- Links to session detail and sessions list page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: remove workspace system, add pinned flows and label renames

Replace workspace system with pinned flows API (pin/unpin/list/reorder).
Rename user-facing labels: Tree→Flow, Procedure→Project. Add sidebar
nav sub-items for flow type filtering. Remove 11 workspace files,
add migrations 037-038, clean all workspace references.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: collapsed sidebar layout scaling and toggle button size

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: migrate auth pages to new design system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: migrate TreeLibraryPage to new design system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: migrate session pages to new design system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: migrate TreeEditorPage to new design system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: migrate TreeNavigationPage to new design system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: migrate session sharing components to new design system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* chore: remove workspace dropdown animation (dead code)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: migrate common components to new design system

Migrate 15 components from monochrome glass-card design to purple gradient
accent design system tokens (bg-card, border-border, text-foreground,
bg-gradient-brand, etc.)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: migrate procedural and step library components to new design system

Migrate 10 components from monochrome glass-card design to purple gradient
accent design system tokens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: migrate admin pages and components to new design system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: migrate remaining pages to new design system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: migrate remaining components to new design system

Migrates 38 files: tree-editor forms, session modals, step library,
common components, library views, tree preview, and misc UI to use
design tokens (bg-card, border-border, text-foreground, bg-accent,
bg-gradient-brand) replacing old monochrome patterns.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: keep brand text visible on sidebar collapse, hide sub-items until hover

- TopBar: always show "ResolutionFlow" text regardless of sidebar state
- NavItem: sub-items (Troubleshooting, Projects) hidden by default,
  revealed on hover or when a child route is active

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit was merged in pull request #77.
This commit is contained in:
chihlasm
2026-02-15 22:45:19 -05:00
committed by GitHub
parent ef829f06a4
commit fa709faa60
138 changed files with 5011 additions and 3796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/session/ContinuationModal.tsx
View File

@@ -45,7 +45,7 @@ export function ContinuationModal({
{/* Descendant Selection */}
{hasDescendants && (
<div>
<p className="mb-4 text-sm text-white/70">
<p className="mb-4 text-sm text-muted-foreground">
Select the next step in your troubleshooting path:
</p>
@@ -56,20 +56,20 @@ export function ContinuationModal({
onClick={() => onSelectNode(node.id)}
title={`From: ${node.parentOptionLabel}`}
className={cn(
'flex w-full items-center gap-3 rounded-lg border border-white/[0.06] p-3 text-left transition-colors',
'hover:border-white/20 hover:bg-white/10'
'flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors',
'hover:border-border hover:bg-accent'
)}
>
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-white/10">
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-accent">
{nodeTypeIcons[node.type]}
</div>
<div className="min-w-0 flex-1">
<p className="truncate font-medium text-white">{node.label}</p>
<p className="text-xs text-white/40">
<p className="truncate font-medium text-foreground">{node.label}</p>
<p className="text-xs text-muted-foreground">
{nodeTypeLabels[node.type]}
</p>
</div>
<ArrowRight className="h-4 w-4 flex-shrink-0 text-white/40" />
<ArrowRight className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
</button>
))}
</div>
@@ -79,11 +79,11 @@ export function ContinuationModal({
{/* Divider */}
{hasDescendants && (
<div className="flex items-center gap-4">
<div className="h-px flex-1 bg-white/[0.06]" />
<span className="text-xs font-medium uppercase tracking-wide text-white/40">
<div className="h-px flex-1 bg-border" />
<span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
Or
</span>
<div className="h-px flex-1 bg-white/[0.06]" />
<div className="h-px flex-1 bg-border" />
</div>
)}
@@ -100,8 +100,8 @@ export function ContinuationModal({
<GitBranch className="h-5 w-5 text-amber-500" />
</div>
<div className="flex-1">
<p className="font-medium text-white">Build Custom Branch</p>
<p className="text-sm text-white/70">
<p className="font-medium text-foreground">Build Custom Branch</p>
<p className="text-sm text-muted-foreground">
Create your own troubleshooting path with custom steps
</p>
</div>

34
frontend/src/components/session/ExportPreviewModal.tsx
View File

@@ -69,9 +69,9 @@ export function ExportPreviewModal({
<Modal isOpen={isOpen} onClose={handleClose} title="Export Preview" size="xl">
{/* Filename, format info, and controls */}
<div className="mb-3 flex flex-wrap items-center justify-between gap-2">
<p className="text-sm text-white/70">
Filename: <span className="font-mono text-white">{filename}</span>
<span className="ml-3 rounded bg-white/10 px-2 py-0.5 text-xs text-white/70">
<p className="text-sm text-muted-foreground">
Filename: <span className="font-mono text-foreground">{filename}</span>
<span className="ml-3 rounded bg-accent px-2 py-0.5 text-xs text-muted-foreground">
{format === 'markdown' ? 'Markdown' : format === 'html' ? 'HTML' : format === 'psa' ? 'PSA' : 'Plain Text'}
</span>
{isModified && (
@@ -81,23 +81,23 @@ export function ExportPreviewModal({
<div className="flex flex-col items-end gap-1">
<div className="flex items-center gap-3">
{onToggleSummary && (
<label className="flex items-center gap-2 text-sm text-white/60 cursor-pointer">
<label className="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
<input
type="checkbox"
checked={includeSummary}
onChange={(e) => onToggleSummary(e.target.checked)}
className="h-4 w-4 rounded border-white/20 bg-black/50"
className="h-4 w-4 rounded border-border bg-card"
/>
Include Summary
</label>
)}
{onToggleRedaction && (
<label className="flex items-center gap-2 text-sm text-white/60 cursor-pointer">
<label className="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
<input
type="checkbox"
checked={redactionEnabled}
onChange={(e) => onToggleRedaction(e.target.checked)}
className="h-4 w-4 rounded border-white/20 bg-black/50"
className="h-4 w-4 rounded border-border bg-card"
/>
Mask Sensitive Data
</label>
@@ -114,13 +114,13 @@ export function ExportPreviewModal({
</p>
)}
{redactionEnabled && redactionSummary && redactionSummary.total === 0 && (
<p className="text-xs text-white/40">No sensitive data detected</p>
<p className="text-xs text-muted-foreground">No sensitive data detected</p>
)}
{isModified && (
<button
type="button"
onClick={handleReset}
className="flex items-center gap-1 text-xs text-white/40 hover:text-white"
className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
title="Reset to original"
>
<RotateCcw className="h-3 w-3" />
@@ -139,9 +139,9 @@ export function ExportPreviewModal({
value={editedContent}
onChange={(e) => setEditedContent(e.target.value)}
className={cn(
'h-96 w-full resize-y rounded-md border border-white/10 bg-black/50 p-4',
'font-mono text-sm text-white',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'h-96 w-full resize-y rounded-md border border-border bg-card p-4',
'font-mono text-sm text-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
/>
@@ -151,9 +151,9 @@ export function ExportPreviewModal({
type="button"
onClick={handleCopy}
className={cn(
'flex items-center gap-2 rounded-md border border-white/10 px-3 py-2 text-sm font-medium',
'text-white/60 hover:bg-white/10 hover:text-white',
'focus:outline-none focus:ring-2 focus:ring-white/20'
'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium',
'text-muted-foreground hover:bg-accent hover:text-foreground',
'focus:outline-none focus:ring-2 focus:ring-primary/20'
)}
>
{copied ? (
@@ -172,8 +172,8 @@ export function ExportPreviewModal({
type="button"
onClick={handleDownload}
className={cn(
'flex items-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
'hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-white/20'
'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
'hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-primary/20'
)}
>
<Download className="h-4 w-4" />

32
frontend/src/components/session/ForkTreeModal.tsx
View File

@@ -49,7 +49,7 @@ export function ForkTreeModal({
disabled={isSaving}
className={cn(
'rounded-md px-4 py-2 text-sm font-medium transition-colors',
'text-white/60 hover:bg-white/10 hover:text-white',
'text-muted-foreground hover:bg-accent hover:text-foreground',
'disabled:cursor-not-allowed disabled:opacity-50'
)}
>
@@ -59,8 +59,8 @@ export function ForkTreeModal({
onClick={handleFork}
disabled={isSaving || !name.trim()}
className={cn(
'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors',
'hover:bg-white/90',
'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium transition-colors',
'hover:opacity-90',
'disabled:cursor-not-allowed disabled:opacity-50'
)}
>
@@ -82,13 +82,13 @@ export function ForkTreeModal({
return (
<Modal isOpen={isOpen} onClose={onClose} title="Save Custom Tree?" footer={footer}>
<div className="space-y-4">
<div className="flex items-start gap-3 rounded-lg bg-white/5 p-4">
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-white/10">
<GitFork className="h-5 w-5 text-white" />
<div className="flex items-start gap-3 rounded-lg bg-accent/50 p-4">
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-accent">
<GitFork className="h-5 w-5 text-foreground" />
</div>
<div>
<p className="font-medium text-white">You've created a custom troubleshooting path!</p>
<p className="mt-1 text-sm text-white/70">
<p className="font-medium text-foreground">You've created a custom troubleshooting path!</p>
<p className="mt-1 text-sm text-muted-foreground">
Save it as your own personal tree to reuse this troubleshooting flow in the future.
</p>
</div>
@@ -96,7 +96,7 @@ export function ForkTreeModal({
<div className="space-y-4">
<div>
<label htmlFor="tree-name" className="mb-1.5 block text-sm font-medium text-white">
<label htmlFor="tree-name" className="mb-1.5 block text-sm font-medium text-foreground">
Tree Name <span className="text-red-400">*</span>
</label>
<input
@@ -106,15 +106,15 @@ export function ForkTreeModal({
onChange={(e) => setName(e.target.value)}
placeholder="My Custom Tree"
className={cn(
'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
'focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20'
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20'
)}
/>
</div>
<div>
<label htmlFor="tree-description" className="mb-1.5 block text-sm font-medium text-white">
Description <span className="text-white/40">(optional)</span>
<label htmlFor="tree-description" className="mb-1.5 block text-sm font-medium text-foreground">
Description <span className="text-muted-foreground">(optional)</span>
</label>
<textarea
id="tree-description"
@@ -123,8 +123,8 @@ export function ForkTreeModal({
placeholder="Describe what this tree helps troubleshoot..."
rows={3}
className={cn(
'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
'focus:outline-none focus:border-white/30 focus:ring-1 focus:ring-white/20',
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20',
'resize-none'
)}
/>
@@ -135,7 +135,7 @@ export function ForkTreeModal({
<p className="text-sm text-red-400">{error}</p>
)}
<p className="text-xs text-white/40">
<p className="text-xs text-muted-foreground">
The new tree will include your custom steps and will be saved to your personal tree library.
</p>
</div>

18
frontend/src/components/session/PostStepActionModal.tsx
View File

@@ -28,8 +28,8 @@ export function PostStepActionModal({
return (
<Modal isOpen={isOpen} onClose={onClose} title="What would you like to do?">
<div className="space-y-3">
<p className="mb-4 text-sm text-white/70">
You've created: <strong className="text-white">{step.title}</strong>
<p className="mb-4 text-sm text-muted-foreground">
You've created: <strong className="text-foreground">{step.title}</strong>
</p>
{/* Save for Later - Only show if not already from library */}
@@ -48,8 +48,8 @@ export function PostStepActionModal({
<Bookmark className="h-5 w-5 text-blue-500" />
</div>
<div>
<p className="font-medium text-white">Save for Later</p>
<p className="text-sm text-white/70">
<p className="font-medium text-foreground">Save for Later</p>
<p className="text-sm text-muted-foreground">
Add to your step library for future use
</p>
</div>
@@ -62,8 +62,8 @@ export function PostStepActionModal({
onClick={onUseNow}
disabled={isSaving}
className={cn(
'w-full rounded-lg border border-white/[0.06] p-4 text-left transition-colors',
'hover:border-white/20 hover:bg-white/10',
'w-full rounded-lg border border-border p-4 text-left transition-colors',
'hover:border-border hover:bg-accent',
'disabled:cursor-not-allowed disabled:opacity-50'
)}
>
@@ -96,8 +96,8 @@ export function PostStepActionModal({
<BookmarkPlus className="h-5 w-5 text-purple-500" />
</div>
<div>
<p className="font-medium text-white">Do Both</p>
<p className="text-sm text-white/70">
<p className="font-medium text-foreground">Do Both</p>
<p className="text-sm text-muted-foreground">
Save to library AND use in this session
</p>
</div>
@@ -106,7 +106,7 @@ export function PostStepActionModal({
)}
{isSaving && (
<p className="text-center text-sm text-white/40">Saving...</p>
<p className="text-center text-sm text-muted-foreground">Saving...</p>
)}
</div>
</Modal>

46
frontend/src/components/session/SaveSessionAsTreeModal.tsx
View File

@@ -34,21 +34,21 @@ export function SaveSessionAsTreeModal({
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
<div className="glass-card w-full max-w-lg rounded-2xl p-6 shadow-lg">
<div className="bg-card border border-border w-full max-w-lg rounded-2xl p-6 shadow-lg">
{/* Header */}
<div className="mb-4 flex items-center justify-between">
<h2 className="text-lg font-semibold text-white">Save Session as Tree</h2>
<h2 className="text-lg font-semibold text-foreground">Save Session as Tree</h2>
<button
onClick={onClose}
disabled={isSaving}
className="rounded-full p-1 text-white/40 hover:bg-white/10 hover:text-white disabled:opacity-50"
className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
>
<X className="h-5 w-5" />
</button>
</div>
{/* Info */}
<p className="mb-4 text-sm text-white/70">
<p className="mb-4 text-sm text-muted-foreground">
Create a new tree from this session's path. The tree will be linked to the original tree as a fork.
</p>
@@ -56,8 +56,8 @@ export function SaveSessionAsTreeModal({
<form onSubmit={handleSubmit} className="space-y-4">
{/* Tree Name */}
<div>
<label htmlFor="treeName" className="mb-1 block text-sm font-medium text-white">
Tree Name <span className="text-white/40">(optional)</span>
<label htmlFor="treeName" className="mb-1 block text-sm font-medium text-foreground">
Tree Name <span className="text-muted-foreground">(optional)</span>
</label>
<input
id="treeName"
@@ -68,9 +68,9 @@ export function SaveSessionAsTreeModal({
disabled={isSaving}
maxLength={255}
className={cn(
'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
'placeholder:text-white/40',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
@@ -78,8 +78,8 @@ export function SaveSessionAsTreeModal({
{/* Description */}
<div>
<label htmlFor="description" className="mb-1 block text-sm font-medium text-white">
Description <span className="text-white/40">(optional)</span>
<label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
Description <span className="text-muted-foreground">(optional)</span>
</label>
<textarea
id="description"
@@ -89,9 +89,9 @@ export function SaveSessionAsTreeModal({
disabled={isSaving}
rows={3}
className={cn(
'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
'placeholder:text-white/40',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
@@ -99,7 +99,7 @@ export function SaveSessionAsTreeModal({
{/* Status */}
<div>
<label className="mb-2 block text-sm font-medium text-white">Status</label>
<label className="mb-2 block text-sm font-medium text-foreground">Status</label>
<div className="flex gap-4">
<label className="flex cursor-pointer items-center gap-2">
<input
@@ -109,9 +109,9 @@ export function SaveSessionAsTreeModal({
checked={status === 'draft'}
onChange={() => setStatus('draft')}
disabled={isSaving}
className="h-4 w-4 border-white/10 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-0"
className="h-4 w-4 border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
/>
<span className="text-sm text-white">Draft</span>
<span className="text-sm text-foreground">Draft</span>
</label>
<label className="flex cursor-pointer items-center gap-2">
<input
@@ -121,9 +121,9 @@ export function SaveSessionAsTreeModal({
checked={status === 'published'}
onChange={() => setStatus('published')}
disabled={isSaving}
className="h-4 w-4 border-white/10 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-0"
className="h-4 w-4 border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
/>
<span className="text-sm text-white">Published</span>
<span className="text-sm text-foreground">Published</span>
</label>
</div>
</div>
@@ -135,8 +135,8 @@ export function SaveSessionAsTreeModal({
onClick={onClose}
disabled={isSaving}
className={cn(
'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white disabled:opacity-50'
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
)}
>
Cancel
@@ -145,8 +145,8 @@ export function SaveSessionAsTreeModal({
type="submit"
disabled={isSaving}
className={cn(
'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90 disabled:opacity-50'
'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50'
)}
>
{isSaving ? 'Saving...' : 'Save as Tree'}

32
frontend/src/components/session/ScratchpadSidebar.tsx
View File

@@ -124,8 +124,8 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
onClick={() => setIsCollapsed(false)}
className={cn(
'fixed right-2 top-1/2 z-40 -translate-y-1/2 rounded-md p-2.5',
'bg-[#0a0a0a] border border-white/[0.06] shadow-md',
'text-white/40 hover:bg-white/10 hover:text-white',
'bg-card border border-border shadow-md',
'text-muted-foreground hover:bg-accent hover:text-foreground',
'transition-opacity duration-200',
isCollapsed ? 'opacity-100' : 'pointer-events-none opacity-0'
)}
@@ -153,29 +153,29 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
'fixed z-40',
'inset-0 sm:inset-auto sm:right-2 sm:top-1/2 sm:-translate-y-1/2',
'flex w-full flex-col sm:h-[55vh] sm:w-[420px]',
'border-white/[0.06] bg-[#0a0a0a]/95 backdrop-blur-md shadow-xl sm:rounded-lg sm:border',
'border-border bg-card/95 backdrop-blur-md shadow-xl sm:rounded-lg sm:border',
'transition-transform duration-200 ease-out',
isCollapsed ? 'translate-x-full' : 'translate-x-0'
)}
>
{/* Header */}
<div className="flex items-center justify-between border-b border-white/[0.06] px-3 py-2">
<div className="flex items-center justify-between border-b border-border px-3 py-2">
<div className="flex items-center gap-2">
<StickyNote className="h-4 w-4 text-white/40" />
<span className="text-sm font-medium text-white">Scratchpad</span>
<span className="text-xs text-white/30">Ctrl+/</span>
<StickyNote className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium text-foreground">Scratchpad</span>
<span className="text-xs text-muted-foreground">Ctrl+/</span>
</div>
<div className="flex items-center gap-1">
<button
onClick={() => setShowPreview(!showPreview)}
className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
title={showPreview ? 'Edit' : 'Preview'}
>
{showPreview ? <Pencil className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
</button>
<button
onClick={() => setIsCollapsed(true)}
className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
title="Close scratchpad"
aria-label="Close scratchpad"
>
@@ -191,7 +191,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
{content.trim() ? (
<MarkdownContent content={content} className="text-sm" />
) : (
<p className="text-sm italic text-white/40">Nothing to preview</p>
<p className="text-sm italic text-muted-foreground">Nothing to preview</p>
)}
</div>
) : (
@@ -202,7 +202,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
placeholder={"Capture IPs, error codes, server names, user info...\n\nSupports markdown formatting."}
className={cn(
'h-full min-h-[200px] w-full resize-none rounded-md border-0 bg-transparent p-0 text-sm',
'text-white placeholder:text-white/40',
'text-foreground placeholder:text-muted-foreground',
'focus:outline-none focus:ring-0'
)}
/>
@@ -210,15 +210,15 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
</div>
{/* Save Indicator */}
<div className="border-t border-white/[0.06] px-3 py-1.5">
<div className="border-t border-border px-3 py-1.5">
<div className="flex items-center gap-1.5 text-xs">
{saveStatus === 'unsaved' && (
<span className="text-white/40">Unsaved changes</span>
<span className="text-muted-foreground">Unsaved changes</span>
)}
{saveStatus === 'saving' && (
<>
<Loader2 className="h-3 w-3 animate-spin text-white/40" />
<span className="text-white/40">Saving...</span>
<Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
<span className="text-muted-foreground">Saving...</span>
</>
)}
{saveStatus === 'saved' && (
@@ -228,7 +228,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
<span className="text-red-400">Save failed</span>
)}
{saveStatus === 'idle' && (
<span className="text-white/30">Markdown supported</span>
<span className="text-muted-foreground">Markdown supported</span>
)}
</div>
</div>

74
frontend/src/components/session/SessionFilters.tsx
View File

@@ -93,32 +93,32 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
<div className="flex flex-col gap-3 sm:flex-row">
{/* Ticket Number Search */}
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" />
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<input
type="text"
placeholder="Search by ticket number..."
value={filters.ticketNumber}
onChange={(e) => handleFilterChange('ticketNumber', e.target.value)}
className={cn(
'w-full rounded-md border border-white/10 bg-black/50 py-2 pl-9 pr-3',
'text-white placeholder:text-white/40',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'w-full rounded-md border border-border bg-card py-2 pl-9 pr-3',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
/>
</div>
{/* Client Name Search */}
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" />
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<input
type="text"
placeholder="Search by client name..."
value={filters.clientName}
onChange={(e) => handleFilterChange('clientName', e.target.value)}
className={cn(
'w-full rounded-md border border-white/10 bg-black/50 py-2 pl-9 pr-3',
'text-white placeholder:text-white/40',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'w-full rounded-md border border-border bg-card py-2 pl-9 pr-3',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
/>
</div>
@@ -128,8 +128,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
value={filters.treeName}
onChange={(e) => handleFilterChange('treeName', e.target.value)}
className={cn(
'rounded-md border border-white/10 bg-black/50 px-3 py-2',
'text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'rounded-md border border-border bg-card px-3 py-2',
'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'sm:min-w-[200px]'
)}
>
@@ -148,19 +148,19 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
<button
onClick={() => setShowDatePicker(!showDatePicker)}
className={cn(
'flex w-full items-center gap-2 rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm',
'text-white hover:bg-white/10',
filters.dateRange?.from && 'border-white/30'
'flex w-full items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm',
'text-foreground hover:bg-accent',
filters.dateRange?.from && 'border-primary/30'
)}
>
<Calendar className="h-4 w-4 text-white/40" />
<span className={cn(!filters.dateRange?.from && 'text-white/40')}>
<Calendar className="h-4 w-4 text-muted-foreground" />
<span className={cn(!filters.dateRange?.from && 'text-muted-foreground')}>
{formatDateRange(filters.dateRange)}
</span>
</button>
{showDatePicker && (
<div className="absolute left-0 top-full z-50 mt-2 rounded-lg border border-white/[0.06] bg-[#0a0a0a] p-4 shadow-lg">
<div className="absolute left-0 top-full z-50 mt-2 rounded-lg border border-border bg-[#0a0a0a] p-4 shadow-lg">
{/* Date Type Toggle */}
<div className="mb-3 flex gap-2">
<button
@@ -168,8 +168,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
className={cn(
'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
filters.dateType === 'started'
? 'bg-white text-black'
: 'border border-white/10 text-white/60 hover:bg-white/10 hover:text-white'
? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
: 'border border-border text-muted-foreground hover:bg-accent hover:text-foreground'
)}
>
Started
@@ -179,8 +179,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
className={cn(
'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
filters.dateType === 'completed'
? 'bg-white text-black'
: 'border border-white/10 text-white/60 hover:bg-white/10 hover:text-white'
? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
: 'border border-border text-muted-foreground hover:bg-accent hover:text-foreground'
)}
>
Completed
@@ -194,8 +194,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
key={preset.value}
onClick={() => applyDatePreset(preset.value)}
className={cn(
'rounded-md bg-white/10 px-3 py-1.5 text-sm font-medium text-white/70',
'hover:bg-white/20 hover:text-white'
'rounded-md bg-accent px-3 py-1.5 text-sm font-medium text-muted-foreground',
'hover:bg-accent/80 hover:text-foreground'
)}
>
{preset.label}
@@ -227,8 +227,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
setShowDatePicker(false)
}}
className={cn(
'flex-1 rounded-md bg-white px-3 py-1.5 text-sm font-medium text-black',
'hover:bg-white/90'
'flex-1 rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
Apply
@@ -236,8 +236,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
<button
onClick={() => setShowDatePicker(false)}
className={cn(
'rounded-md border border-white/10 px-3 py-1.5 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white'
'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
Cancel
@@ -252,8 +252,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
<button
onClick={onClear}
className={cn(
'flex items-center gap-2 rounded-md border border-white/10 px-3 py-2 text-sm font-medium',
'text-white/60 hover:bg-white/10 hover:text-white'
'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium',
'text-muted-foreground hover:bg-accent hover:text-foreground'
)}
>
<Filter className="h-4 w-4" />
@@ -265,46 +265,46 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
{/* Active Filter Chips */}
{hasActiveFilters && (
<div className="flex flex-wrap items-center gap-2">
<span className="text-sm text-white/40">Active filters:</span>
<span className="text-sm text-muted-foreground">Active filters:</span>
{filters.ticketNumber && (
<span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70">
<span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
Ticket: {filters.ticketNumber}
<button
onClick={() => handleFilterChange('ticketNumber', '')}
className="rounded-full p-0.5 hover:bg-white/20"
className="rounded-full p-0.5 hover:bg-accent/80"
>
<X className="h-3 w-3" />
</button>
</span>
)}
{filters.clientName && (
<span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70">
<span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
Client: {filters.clientName}
<button
onClick={() => handleFilterChange('clientName', '')}
className="rounded-full p-0.5 hover:bg-white/20"
className="rounded-full p-0.5 hover:bg-accent/80"
>
<X className="h-3 w-3" />
</button>
</span>
)}
{filters.treeName && (
<span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70">
<span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
Tree: {filters.treeName}
<button
onClick={() => handleFilterChange('treeName', '')}
className="rounded-full p-0.5 hover:bg-white/20"
className="rounded-full p-0.5 hover:bg-accent/80"
>
<X className="h-3 w-3" />
</button>
</span>
)}
{filters.dateRange?.from && (
<span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70">
<span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
{formatDateRange(filters.dateRange)} ({filters.dateType})
<button
onClick={clearDateRange}
className="rounded-full p-0.5 hover:bg-white/20"
className="rounded-full p-0.5 hover:bg-accent/80"
>
<X className="h-3 w-3" />
</button>

34
frontend/src/components/session/SessionOutcomeModal.tsx
View File

@@ -51,8 +51,8 @@ export function SessionOutcomeModal({
onClick={onClose}
disabled={isSubmitting}
className={cn(
'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white disabled:opacity-50'
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
)}
>
Cancel
@@ -62,8 +62,8 @@ export function SessionOutcomeModal({
onClick={handleSubmit}
disabled={isSubmitting}
className={cn(
'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90 disabled:opacity-50'
'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
'hover:opacity-90 disabled:opacity-50'
)}
>
{isSubmitting ? 'Completing...' : 'Complete Session'}
@@ -72,7 +72,7 @@ export function SessionOutcomeModal({
)}
>
<form key={String(isOpen)} ref={formRef} className="space-y-4">
<p className="text-sm text-white/70">
<p className="text-sm text-muted-foreground">
Select the session outcome before completion.
</p>
<div className="space-y-2">
@@ -80,8 +80,8 @@ export function SessionOutcomeModal({
<label
key={option.value}
className={cn(
'block cursor-pointer rounded-lg border border-white/10 p-3 transition-colors',
'hover:bg-white/[0.04]'
'block cursor-pointer rounded-lg border border-border p-3 transition-colors',
'hover:bg-accent/50'
)}
>
<div className="flex items-start gap-3">
@@ -93,8 +93,8 @@ export function SessionOutcomeModal({
className="mt-1 h-4 w-4"
/>
<div>
<p className="text-sm font-medium text-white">{option.label}</p>
<p className="text-xs text-white/50">{option.description}</p>
<p className="text-sm font-medium text-foreground">{option.label}</p>
<p className="text-xs text-muted-foreground">{option.description}</p>
</div>
</div>
</label>
@@ -102,31 +102,31 @@ export function SessionOutcomeModal({
</div>
<div>
<label className="block text-sm font-medium text-white">Outcome Notes (optional)</label>
<label className="block text-sm font-medium text-foreground">Outcome Notes (optional)</label>
<textarea
name="outcome-notes"
defaultValue=""
rows={3}
placeholder="Add context for this outcome..."
className={cn(
'mt-1 block w-full rounded-md border border-white/10 bg-black/50 px-3 py-2',
'text-sm text-white placeholder:text-white/40',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
'text-sm text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
/>
</div>
<div>
<label className="block text-sm font-medium text-white">Next Steps / Follow-Up (optional)</label>
<label className="block text-sm font-medium text-foreground">Next Steps / Follow-Up (optional)</label>
<textarea
name="next-steps"
defaultValue=""
rows={3}
placeholder="Actions to take after this session..."
className={cn(
'mt-1 block w-full rounded-md border border-white/10 bg-black/50 px-3 py-2',
'text-sm text-white placeholder:text-white/40',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
'text-sm text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
/>
</div>

46
frontend/src/components/session/SessionTimeline.tsx
View File

@@ -53,7 +53,7 @@ export function SessionTimeline({
if (treeType === 'procedural') {
return (
<div className="mb-8">
<h2 className="mb-4 text-lg font-semibold text-white">Procedure Steps</h2>
<h2 className="mb-4 text-lg font-semibold text-foreground">Procedure Steps</h2>
<div className="space-y-2">
{decisions.map((decision, index) => {
const isCompleted = decision.answer === 'completed'
@@ -61,31 +61,31 @@ export function SessionTimeline({
<div
key={index}
className={cn(
'glass-card rounded-xl p-4',
'bg-card border border-border rounded-xl p-4',
isCompleted && 'border-l-2 border-emerald-400/50'
)}
>
<div className="flex items-start gap-3">
<span className={cn(
'mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium',
isCompleted ? 'bg-emerald-400/10 text-emerald-400' : 'bg-white/10 text-white/50'
isCompleted ? 'bg-emerald-400/10 text-emerald-400' : 'bg-accent text-muted-foreground'
)}>
{isCompleted ? '\u2713' : index + 1}
</span>
<div className="min-w-0 flex-1">
<p className="font-medium text-white">{decision.question || 'Step'}</p>
<p className="font-medium text-foreground">{decision.question || 'Step'}</p>
{decision.notes && (
<p className="mt-1.5 rounded bg-white/5 p-2 text-sm text-white/40">
<p className="mt-1.5 rounded bg-white/5 p-2 text-sm text-muted-foreground">
Notes: {decision.notes}
</p>
)}
{decision.command_output && (
<p className="mt-1 text-sm text-white/40">
<p className="mt-1 text-sm text-muted-foreground">
Verification: {decision.command_output}
</p>
)}
{decision.duration_seconds != null && (
<p className="mt-1 text-xs text-white/30">
<p className="mt-1 text-xs text-muted-foreground">
Duration: {formatDuration(decision.duration_seconds)}
</p>
)}
@@ -94,7 +94,7 @@ export function SessionTimeline({
<button
onClick={() => handleCopyStep(decision, index)}
title="Copy step to clipboard"
className="rounded p-1 text-white/30 hover:bg-white/10 hover:text-white"
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
>
{copiedStepIndex === index ? (
<Check className="h-4 w-4 text-emerald-400" />
@@ -123,52 +123,52 @@ export function SessionTimeline({
// Default: troubleshooting decision timeline
return (
<div className="mb-8">
<h2 className="mb-4 text-lg font-semibold text-white">Decision Timeline</h2>
<h2 className="mb-4 text-lg font-semibold text-foreground">Decision Timeline</h2>
<div className="space-y-4">
<div className="flex items-center gap-3 text-sm">
<span className="h-3 w-3 rounded-full bg-white" />
<span className="text-white/40">
<span className="h-3 w-3 rounded-full bg-foreground" />
<span className="text-muted-foreground">
Session started: {formatDate(startedAt)}
</span>
</div>
{decisions.map((decision, index) => (
<div key={index} className="ml-1 border-l-2 border-white/[0.06] pl-6">
<div key={index} className="ml-1 border-l-2 border-border pl-6">
<div className="relative">
<span className="absolute -left-[1.625rem] top-1 h-2 w-2 rounded-full bg-white/20" />
<div className="glass-card rounded-xl p-4">
<span className="absolute -left-[1.625rem] top-1 h-2 w-2 rounded-full bg-muted-foreground" />
<div className="bg-card border border-border rounded-xl p-4">
<div className="flex items-start justify-between gap-2">
<div className="flex-1">
{decision.question && (
<p className="font-medium text-white">{decision.question}</p>
<p className="font-medium text-foreground">{decision.question}</p>
)}
{decision.answer && (
<p className="mt-1 text-sm text-white">Answer: {decision.answer}</p>
<p className="mt-1 text-sm text-foreground">Answer: {decision.answer}</p>
)}
{decision.action_performed && (
<p className="mt-1 text-sm text-white/40">
<p className="mt-1 text-sm text-muted-foreground">
Action: {decision.action_performed}
</p>
)}
{decision.notes && (
<p className="mt-2 rounded bg-white/5 p-2 text-sm text-white/40">
<p className="mt-2 rounded bg-white/5 p-2 text-sm text-muted-foreground">
Notes: {decision.notes}
</p>
)}
{decision.command_output && (
<div className="mt-2">
<p className="mb-1 text-xs font-medium text-white/50">Command Output</p>
<pre className="overflow-x-auto rounded bg-white/5 p-2 text-xs font-mono text-white/60 whitespace-pre-wrap">
<p className="mb-1 text-xs font-medium text-muted-foreground">Command Output</p>
<pre className="overflow-x-auto rounded bg-white/5 p-2 text-xs font-mono text-muted-foreground whitespace-pre-wrap">
{decision.command_output}
</pre>
</div>
)}
{decision.duration_seconds != null && (
<p className="mt-2 text-xs text-white/50">
<p className="mt-2 text-xs text-muted-foreground">
Duration: {formatDuration(decision.duration_seconds)}
</p>
)}
<p className="mt-2 text-xs text-white/40">
<p className="mt-2 text-xs text-muted-foreground">
{formatDate(decision.timestamp)}
</p>
</div>
@@ -176,7 +176,7 @@ export function SessionTimeline({
<button
onClick={() => handleCopyStep(decision, index)}
title="Copy step to clipboard"
className="rounded p-1 text-white/30 hover:bg-white/10 hover:text-white"
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
>
{copiedStepIndex === index ? (
<Check className="h-4 w-4 text-emerald-400" />

76
frontend/src/components/session/ShareSessionModal.tsx
View File

@@ -185,16 +185,16 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
/>
{/* Modal */}
<div className="relative w-full max-w-lg glass-card rounded-2xl shadow-lg">
<div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-lg">
{/* Header */}
<div className="flex items-center justify-between border-b border-white/[0.06] px-6 py-4">
<div className="flex items-center justify-between border-b border-border px-6 py-4">
<div>
<h2 className="text-lg font-semibold text-white">Share Session</h2>
<p className="text-sm text-white/40">{sessionLabel}</p>
<h2 className="text-lg font-heading font-semibold text-foreground">Share Session</h2>
<p className="text-sm text-muted-foreground">{sessionLabel}</p>
</div>
<button
onClick={onClose}
className="rounded-md p-1 text-white/40 hover:bg-white/[0.06] hover:text-white"
className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
>
<X className="h-5 w-5" />
</button>
@@ -206,7 +206,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
<div className="space-y-4">
{/* Visibility */}
<div>
<label className="mb-2 block text-sm font-medium text-white">
<label className="mb-2 block text-sm font-medium text-foreground">
Visibility
</label>
<div className="space-y-2">
@@ -215,17 +215,17 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'account'
? 'border-white/20 bg-white/10 text-white'
: 'border-white/[0.06] bg-transparent text-white/50 hover:border-white/20 hover:bg-white/[0.06]'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Users className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Account Only</div>
<div className="text-xs text-white/40">Visible to your team</div>
<div className="text-xs text-muted-foreground">Visible to your team</div>
</div>
{visibility === 'account' && (
<div className="h-2 w-2 rounded-full bg-white" />
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
<button
@@ -233,17 +233,17 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'public'
? 'border-white/20 bg-white/10 text-white'
: 'border-white/[0.06] bg-transparent text-white/50 hover:border-white/20 hover:bg-white/[0.06]'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Globe className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Public</div>
<div className="text-xs text-white/40">Anyone with the link</div>
<div className="text-xs text-muted-foreground">Anyone with the link</div>
</div>
{visibility === 'public' && (
<div className="h-2 w-2 rounded-full bg-white" />
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
</div>
@@ -254,8 +254,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
{/* Share Name */}
<div>
<label className="mb-2 block text-sm font-medium text-white">
Share Name <span className="text-white/40">(optional)</span>
<label className="mb-2 block text-sm font-medium text-foreground">
Share Name <span className="text-muted-foreground">(optional)</span>
</label>
<input
type="text"
@@ -263,8 +263,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
onChange={(e) => setShareName(e.target.value.slice(0, 100))}
placeholder="e.g. Training link, Customer escalation"
className={cn(
'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder-white/30',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
maxLength={100}
/>
@@ -272,7 +272,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
{/* Expiration */}
<div>
<label className="mb-2 block text-sm font-medium text-white">
<label className="mb-2 block text-sm font-medium text-foreground">
Expiration
</label>
<div className="flex flex-wrap gap-2">
@@ -283,8 +283,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
className={cn(
'rounded-md border px-3 py-1.5 text-sm transition-colors',
expirationPreset === preset.value
? 'border-white/20 bg-white/10 text-white'
: 'border-white/10 text-white/50 hover:border-white/20 hover:bg-white/[0.06]'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border text-muted-foreground hover:border-border hover:bg-accent'
)}
>
{preset.label}
@@ -297,8 +297,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
value={customDatetime}
onChange={(e) => setCustomDatetime(e.target.value)}
className={cn(
'mt-2 w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'[color-scheme:dark]'
)}
/>
@@ -310,8 +310,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
onClick={handleGenerateLink}
disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)}
className={cn(
'flex w-full items-center justify-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed'
'flex w-full items-center justify-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
<Link2 className="h-4 w-4" />
@@ -322,7 +322,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
{/* Existing Shares */}
{shares.length > 0 && (
<div>
<h3 className="mb-3 text-sm font-medium text-white">
<h3 className="mb-3 text-sm font-medium text-foreground">
Active Shares ({shares.length})
</h3>
<div className="space-y-3">
@@ -332,7 +332,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
return (
<div
key={share.id}
className="glass-card rounded-xl p-4 space-y-2"
className="bg-card border border-border rounded-xl p-4 space-y-2"
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
@@ -340,8 +340,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
<span className={cn(
'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
share.visibility === 'public'
? 'bg-white/10 text-white/70'
: 'bg-white/10 text-white/70'
? 'bg-accent text-muted-foreground'
: 'bg-accent text-muted-foreground'
)}>
{share.visibility === 'public' ? (
<Globe className="h-3 w-3" />
@@ -350,11 +350,11 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
)}
{share.visibility === 'public' ? 'Public' : 'Account'}
</span>
<span className="truncate text-sm font-medium text-white">
<span className="truncate text-sm font-medium text-foreground">
{share.share_name || 'Untitled share'}
</span>
</div>
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-white/40">
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
<span>{getRelativeTime(share.created_at)}</span>
<span>
{share.view_count > 0
@@ -375,10 +375,10 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
onClick={() => handleCopyUrl(share)}
title="Copy share URL"
className={cn(
'rounded-md border border-white/10 p-1.5 text-sm transition-colors',
'rounded-md border border-border p-1.5 text-sm transition-colors',
isCopied
? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
: 'text-white/50 hover:bg-white/10 hover:text-white'
: 'text-muted-foreground hover:bg-accent hover:text-foreground'
)}
>
{isCopied ? (
@@ -390,7 +390,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
<button
onClick={() => handleRevoke(share.id)}
title="Revoke share"
className="rounded-md border border-white/10 p-1.5 text-white/50 hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
@@ -406,18 +406,18 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
{/* Loading state */}
{isLoadingShares && shares.length === 0 && (
<div className="flex items-center justify-center py-4">
<div className="h-5 w-5 animate-spin rounded-full border-2 border-white/20 border-t-white" />
<div className="h-5 w-5 animate-spin rounded-full border-2 border-border border-t-foreground" />
</div>
)}
</div>
{/* Footer */}
<div className="flex justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
<div className="flex justify-end gap-3 border-t border-border px-6 py-4">
<button
onClick={onClose}
className={cn(
'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white'
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
Close

16
frontend/src/components/session/SharedSessionTreePreview.tsx
View File

@@ -7,11 +7,11 @@ interface SharedSessionTreePreviewProps {
}
const nodeTypeColors: Record<string, string> = {
root: 'bg-white',
root: 'bg-foreground',
decision: 'bg-blue-400',
action: 'bg-yellow-400',
solution: 'bg-emerald-400',
information: 'bg-white/50',
information: 'bg-muted-foreground',
}
function getNodeTitle(node: Record<string, unknown>): string {
@@ -36,7 +36,7 @@ function TreeNode({
const nodeType = (node.node_type as string) || 'decision'
const isInPath = pathTaken.includes(nodeId)
const children = (node.children as Record<string, unknown>[]) || []
const colorClass = nodeTypeColors[nodeType] || 'bg-white/50'
const colorClass = nodeTypeColors[nodeType] || 'bg-muted-foreground'
return (
<>
@@ -44,8 +44,8 @@ function TreeNode({
className={cn(
'flex items-center gap-2 px-3 py-1.5 text-sm',
isInPath
? 'rounded-md border-l-2 border-white/40 bg-white/10 font-medium text-white'
: 'text-white/30'
? 'rounded-md border-l-2 border-muted-foreground bg-accent font-medium text-foreground'
: 'text-muted-foreground'
)}
style={{ paddingLeft: `${depth * 16 + 12}px` }}
>
@@ -75,9 +75,9 @@ export function SharedSessionTreePreview({
}
return (
<div className="glass-card rounded-2xl">
<div className="sticky top-0 z-10 rounded-t-2xl border-b border-white/[0.06] bg-black/80 px-6 py-4 backdrop-blur">
<h3 className="text-sm font-semibold text-white">Tree Structure</h3>
<div className="bg-card border border-border rounded-2xl">
<div className="sticky top-0 z-10 rounded-t-2xl border-b border-border bg-black/80 px-6 py-4 backdrop-blur">
<h3 className="text-sm font-semibold text-foreground">Tree Structure</h3>
</div>
<div className="max-h-[600px] overflow-y-auto py-2">
<TreeNode node={treeStructure as unknown as Record<string, unknown>} depth={0} pathTaken={pathTaken} />

46
frontend/src/components/session/StepRatingModal.tsx
View File

@@ -78,19 +78,19 @@ export function StepRatingModal({
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
<div className="glass-card w-full max-w-2xl max-h-[90vh] flex flex-col rounded-2xl shadow-lg">
<div className="bg-card border border-border w-full max-w-2xl max-h-[90vh] flex flex-col rounded-2xl shadow-lg">
{/* Header */}
<div className="flex items-center justify-between border-b border-white/[0.06] px-6 py-4">
<div className="flex items-center justify-between border-b border-border px-6 py-4">
<div>
<h2 className="text-lg font-semibold text-white">Rate Your Experience</h2>
<p className="mt-1 text-sm text-white/70">
<h2 className="text-lg font-semibold text-foreground">Rate Your Experience</h2>
<p className="mt-1 text-sm text-muted-foreground">
Help others by rating the steps you used ({librarySteps.length} step{librarySteps.length !== 1 ? 's' : ''})
</p>
</div>
<button
onClick={onClose}
disabled={isSaving}
className="rounded-full p-1 text-white/40 hover:bg-white/10 hover:text-white disabled:opacity-50"
className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
>
<X className="h-5 w-5" />
</button>
@@ -102,14 +102,14 @@ export function StepRatingModal({
{librarySteps.map((step) => {
const rating = getRating(step.id)
return (
<div key={step.id} className="rounded-lg border border-white/[0.06] bg-[#0a0a0a] p-4">
<div key={step.id} className="rounded-lg border border-border bg-[#0a0a0a] p-4">
{/* Step Title */}
<h3 className="font-medium text-white">{step.title}</h3>
<p className="mt-1 text-sm text-white/40 capitalize">{step.step_type}</p>
<h3 className="font-medium text-foreground">{step.title}</h3>
<p className="mt-1 text-sm text-muted-foreground capitalize">{step.step_type}</p>
{/* Star Rating */}
<div className="mt-3">
<label className="mb-1 block text-sm font-medium text-white">
<label className="mb-1 block text-sm font-medium text-foreground">
Rating
</label>
<StarRating
@@ -121,7 +121,7 @@ export function StepRatingModal({
{/* Was this helpful? */}
<div className="mt-3">
<label className="mb-2 block text-sm font-medium text-white">
<label className="mb-2 block text-sm font-medium text-foreground">
Was this helpful?
</label>
<div className="flex gap-2">
@@ -133,7 +133,7 @@ export function StepRatingModal({
'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors',
rating?.helpful === true
? 'border-emerald-400/20 bg-emerald-400/10 text-emerald-400'
: 'border-white/10 text-white/60 hover:bg-white/10 hover:text-white',
: 'border-border text-muted-foreground hover:bg-accent hover:text-foreground',
'disabled:opacity-50'
)}
>
@@ -148,7 +148,7 @@ export function StepRatingModal({
'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors',
rating?.helpful === false
? 'border-red-400/20 bg-red-400/10 text-red-400'
: 'border-white/10 text-white/60 hover:bg-white/10 hover:text-white',
: 'border-border text-muted-foreground hover:bg-accent hover:text-foreground',
'disabled:opacity-50'
)}
>
@@ -160,8 +160,8 @@ export function StepRatingModal({
{/* Optional Review */}
<div className="mt-3">
<label htmlFor={`review-${step.id}`} className="mb-1 block text-sm font-medium text-white">
Review <span className="text-white/40">(optional)</span>
<label htmlFor={`review-${step.id}`} className="mb-1 block text-sm font-medium text-foreground">
Review <span className="text-muted-foreground">(optional)</span>
</label>
<textarea
id={`review-${step.id}`}
@@ -172,13 +172,13 @@ export function StepRatingModal({
rows={2}
placeholder="Share your experience with this step..."
className={cn(
'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
'placeholder:text-white/40',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
<p className="mt-1 text-xs text-white/40 text-right">
<p className="mt-1 text-xs text-muted-foreground text-right">
{rating?.review?.length || 0}/500
</p>
</div>
@@ -189,14 +189,14 @@ export function StepRatingModal({
</div>
{/* Footer */}
<div className="flex justify-end gap-2 border-t border-white/[0.06] px-6 py-4">
<div className="flex justify-end gap-2 border-t border-border px-6 py-4">
<button
type="button"
onClick={onClose}
disabled={isSaving}
className={cn(
'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white disabled:opacity-50'
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
)}
>
Skip
@@ -206,8 +206,8 @@ export function StepRatingModal({
onClick={handleSubmit}
disabled={isSaving}
className={cn(
'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90 disabled:opacity-50'
'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50'
)}
>
{isSaving ? 'Submitting...' : 'Submit Ratings'}

20
frontend/src/components/session/VariablePromptModal.tsx
View File

@@ -22,14 +22,14 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
<div className="glass-card w-full max-w-md rounded-2xl p-6 shadow-lg">
<h2 className="mb-1 text-lg font-semibold text-white">Input Required</h2>
<p className="mb-4 text-sm text-white/40">
<div className="bg-card border border-border w-full max-w-md rounded-2xl p-6 shadow-lg">
<h2 className="mb-1 text-lg font-semibold text-foreground">Input Required</h2>
<p className="mb-4 text-sm text-muted-foreground">
This step requires you to provide a value.
</p>
<form onSubmit={handleSubmit}>
<label className="mb-2 block text-sm font-medium text-white/70">
<label className="mb-2 block text-sm font-medium text-muted-foreground">
{prompt}
</label>
<input
@@ -39,8 +39,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
placeholder="Enter value..."
autoFocus
className={cn(
'w-full rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
'placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
/>
@@ -49,8 +49,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
type="submit"
disabled={!value.trim()}
className={cn(
'flex-1 rounded-lg bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed'
'flex-1 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
Continue
@@ -59,8 +59,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
type="button"
onClick={onCancel}
className={cn(
'rounded-lg border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white'
'rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
Skip