indifferentketchup/boocode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.1 batch 2: sidebar restructure — chats under projects, max 5 + view-all, live updates

Browse Source 
Schema (idempotent):
  ALTER TABLE sessions ADD COLUMN IF NOT EXISTS updated_at TIMESTAMPTZ NOT NULL DEFAULT clock_timestamp();
The column already exists from v1 (DEFAULT NOW()); ALTER is a no-op kept for
self-documentation. Explicit clock_timestamp() bumps now run wherever the
column actually matters — see services/inference.ts and routes/sessions.ts.

Backend updated_at maintenance:
- services/inference.ts: after each terminal status UPDATE on the assistant
  message (failure / tool-call complete / clean complete), also bump
  sessions.updated_at = clock_timestamp() so the parent session jumps to
  the top of recency ordering on every assistant turn.
- routes/sessions.ts PATCH: NOW() → clock_timestamp() for consistency.

New endpoint GET /api/sidebar (routes/sidebar.ts):
  { projects: [{ id, name, recent_sessions[≤6], total_sessions }] }
One outer query for projects ordered added_at DESC; per-project Promise.all
over (recent_sessions LIMIT 6 ORDER BY updated_at DESC) and COUNT(*)::int.
Outer Promise.all parallelizes across projects. Two queries per project; the
composite idx_sessions_project(project_id, updated_at DESC) serves the inner
query. Auth via the global Remote-User hook. types/api.ts gains
SidebarSession / SidebarProject / SidebarResponse; index.ts wires the route.

Frontend foundations:
- api/types.ts mirrors the three sidebar interfaces.
- api/client.ts: api.sidebar.get() → Promise<SidebarResponse>.
- hooks/sessionEvents.ts: five-variant union — added project_created,
  project_deleted, session_created, session_deleted. session_renamed
  unchanged from Batch 1. Bus internals untouched (still a dumb
  Set<Listener>, no validation).

New hooks/useSidebar.ts (module-singleton):
- Module-scope sharedData/sharedError/sharedLoading/initialized/fetchInFlight/
  subscribers; a single sessionEvents.subscribe at module-top-level mutates
  sharedData via an exhaustive switch over the five events. load() dedupes
  parallel calls via fetchInFlight. Hook is a thin subscription layer: any
  number of mount points share state and the very first one triggers the
  single GET /api/sidebar. Subsequent mounts read cached state synchronously
  (no skeleton flash). Public shape: { data, error, loading, retry }.
- Lift to module-scope was driven by the "ONE sidebar request on mount"
  spec promise — both ProjectSidebar AND Home consume the hook now, and
  they share the singleton.

Frontend UI:
- components/ProjectSidebar.tsx (rewrite, 234 lines): per-project chevron +
  folder + name; chevron toggles expand, name navigates /project/:id.
  Expanded → ≤5 sessions with MessageSquare + name + muted relTime()
  timestamp. "View all (N)" link when total_sessions > 5, routing to
  /project/:id. Active session row uses bg-sidebar-accent. Active project
  always renders expanded (URL-derived: direct /project/:id or scan of
  recent_sessions for /session/:id). Expanded ids persisted in
  localStorage['boocode.sidebar.expanded'] with try/catch on both read and
  write. Loading shows 4 muted-pulse skeleton blocks; empty + error +
  retry button; error toast guarded by ref so it fires once per distinct
  message and resets on recovery. Remove path calls api.projects.remove
  directly + explicit project_deleted emit (replaced the prior
  useProjects() dependency which fired a redundant /api/projects on
  mount, violating the one-fetch promise).
- components/AddProjectModal.tsx: captures returned Project and emits
  project_created before onAdded() / onOpenChange(false).
- pages/Project.tsx: emits session_created after create(); trash button is
  now async with try/catch — emits session_deleted on success,
  toast.error on failure.
- pages/Home.tsx: switched from useProjects to useSidebar so loading /
  fires exactly one /api/sidebar, with no parallel /api/projects.
- pages/Session.tsx: manual inline rename now emits session_renamed on
  the success path so the sidebar updates live without a refresh (also
  fixes the regression made visible by Batch 2 — the sidebar caches
  session names where the project page used to re-fetch on every visit).

useProjects.ts retains a project_deleted emit inside remove for any future
caller; no live consumer uses it (ProjectSidebar calls api.projects.remove
directly). Acknowledged dead code, to be removed in the next cleanup pass
along with three remaining NOW() → clock_timestamp() consistency flips at
routes/messages.ts:70, routes/messages.ts:127, and services/auto_name.ts:144.

Cross-tab parity for session_created/session_deleted/project_created/
project_deleted is deferred — those events are tab-local in Batch 2 per
spec. session_renamed continues to propagate cross-tab via the existing
WS frame from Batch 1.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
indifferentketchup
2026-05-15 14:19:59 +00:00
parent 2464d23bb6
commit 842cf146ec
16 changed files with 519 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/components/AddProjectModal.tsx
View File

@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react';
import { api } from '@/api/client';
import type { AvailableProject } from '@/api/types';
import { sessionEvents } from '@/hooks/sessionEvents';
import { Button } from '@/components/ui/button';
import {
Dialog,
@@ -42,7 +43,8 @@ export function AddProjectModal({ open, onOpenChange, onAdded }: Props) {
setBusy(true);
setError(null);
try {
await api.projects.add({ path });
const created = await api.projects.add({ path });
sessionEvents.emit({ type: 'project_created', project: created });
onAdded();
onOpenChange(false);
} catch (err) {

253
apps/web/src/components/ProjectSidebar.tsx
View File

@@ -1,6 +1,6 @@
import { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { Plus, Folder } from 'lucide-react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { NavLink, useLocation, useNavigate } from 'react-router-dom';
import { ChevronRight, Folder, MessageSquare, Plus } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import {
@@ -10,88 +10,225 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { AddProjectModal } from './AddProjectModal';
import { useProjects } from '@/hooks/useProjects';
import { api } from '@/api/client';
import { sessionEvents } from '@/hooks/sessionEvents';
import { useSidebar } from '@/hooks/useSidebar';
import type { SidebarProject } from '@/api/types';
const EXPANDED_KEY = 'boocode.sidebar.expanded';
const MAX_VISIBLE_SESSIONS = 5;
function readExpanded(): Set<string> {
try {
const raw = localStorage.getItem(EXPANDED_KEY);
if (!raw) return new Set();
const parsed = JSON.parse(raw);
if (!Array.isArray(parsed)) return new Set();
return new Set(parsed.filter((v): v is string => typeof v === 'string'));
} catch {
return new Set();
}
}
function writeExpanded(ids: Set<string>): void {
try {
localStorage.setItem(EXPANDED_KEY, JSON.stringify(Array.from(ids)));
} catch {
/* quota or disabled storage — ignore */
}
}
function relTime(iso: string): string {
const now = Date.now();
const t = Date.parse(iso);
if (Number.isNaN(t)) return '';
const sec = Math.max(0, Math.floor((now - t) / 1000));
if (sec < 60) return `${sec}s`;
const min = Math.floor(sec / 60);
if (min < 60) return `${min}m`;
const hr = Math.floor(min / 60);
if (hr < 24) return `${hr}h`;
const day = Math.floor(hr / 24);
if (day < 30) return `${day}d`;
const mo = Math.floor(day / 30);
if (mo < 12) return `${mo}mo`;
return `${Math.floor(mo / 12)}y`;
}
function activeProjectId(pathname: string, projects: SidebarProject[]): string | null {
const pm = pathname.match(/^\/project\/([^/]+)/);
if (pm?.[1]) return pm[1];
const sm = pathname.match(/^\/session\/([^/]+)/);
const sid = sm?.[1];
if (!sid) return null;
return projects.find((p) => p.recent_sessions.some((s) => s.id === sid))?.id ?? null;
}
function activeSessionId(pathname: string): string | null {
const m = pathname.match(/^\/session\/([^/]+)/);
return m?.[1] ?? null;
}
export function ProjectSidebar() {
const { projects, refresh, remove } = useProjects();
const { data, error, loading, retry } = useSidebar();
const [addOpen, setAddOpen] = useState(false);
const [expanded, setExpanded] = useState<Set<string>>(() => readExpanded());
const navigate = useNavigate();
const location = useLocation();
const lastToastedError = useRef<string | null>(null);
useEffect(() => {
if (error && !data && error !== lastToastedError.current) {
toast.error(error);
lastToastedError.current = error;
}
if (!error) lastToastedError.current = null;
}, [error, data]);
const projects = data?.projects ?? [];
const activeProject = useMemo(
() => activeProjectId(location.pathname, projects),
[location.pathname, projects]
);
const activeSession = useMemo(
() => activeSessionId(location.pathname),
[location.pathname]
);
function toggle(id: string) {
setExpanded((prev) => {
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
writeExpanded(next);
return next;
});
}
async function handleRemove(id: string) {
try {
await remove(id);
await api.projects.remove(id);
sessionEvents.emit({ type: 'project_deleted', project_id: id });
navigate('/');
} catch (err) {
toast.error(err instanceof Error ? err.message : 'failed to remove project');
}
}
const rowCls = (active: boolean) =>
active ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'hover:bg-sidebar-accent/60';
return (
<aside className="w-60 shrink-0 border-r bg-sidebar text-sidebar-foreground flex flex-col h-screen">
<div className="px-4 py-3 border-b flex items-center justify-between">
<NavLink to="/" className="font-semibold tracking-tight text-base">
BooCode
</NavLink>
<Button
size="icon-sm"
variant="ghost"
onClick={() => setAddOpen(true)}
aria-label="Add project"
>
<Button size="icon-sm" variant="ghost" onClick={() => setAddOpen(true)} aria-label="Add project">
<Plus />
</Button>
</div>
<nav className="flex-1 overflow-y-auto py-2">
{projects === null && (
<div className="px-4 py-2 text-xs text-muted-foreground">Loading…</div>
)}
{projects && projects.length === 0 && (
<div className="px-4 py-2 text-xs text-muted-foreground">No projects yet.</div>
)}
{projects?.map((p) => (
<div key={p.id} className="px-2">
<DropdownMenu>
<NavLink
to={`/project/${p.id}`}
className={({ isActive }) =>
`group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm ${
isActive
? 'bg-sidebar-accent text-sidebar-accent-foreground'
: 'hover:bg-sidebar-accent/60'
}`
}
onContextMenu={(e) => {
e.preventDefault();
(
e.currentTarget.parentElement?.querySelector(
'[data-ctxtrigger]'
) as HTMLElement | null
)?.click();
}}
>
<Folder className="size-3.5 shrink-0 opacity-70" />
<span className="truncate" title={p.path}>
{p.name}
</span>
</NavLink>
<DropdownMenuTrigger asChild>
<button data-ctxtrigger className="hidden" aria-hidden />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem
variant="destructive"
onClick={() => void handleRemove(p.id)}
>
Remove from sidebar
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
{loading && data == null && (
<div className="space-y-2 px-2">
{[0, 1, 2, 3].map((i) => (
<div key={i} className="bg-muted/40 animate-pulse rounded h-6" />
))}
</div>
))}
)}
{data != null && projects.length === 0 && (
<div className="px-4 py-2 text-xs text-muted-foreground">
No projects yet. Click + to add one.
</div>
)}
{error != null && !data && (
<div className="px-4 py-2 space-y-2">
<div className="text-xs text-muted-foreground">{error}</div>
<Button size="sm" variant="outline" onClick={retry}>
Retry
</Button>
</div>
)}
{data != null &&
projects.map((p) => {
const isActiveProject = activeProject === p.id;
const isExpanded = isActiveProject || expanded.has(p.id);
const visible = p.recent_sessions.slice(0, MAX_VISIBLE_SESSIONS);
return (
<div key={p.id} className="px-2">
<DropdownMenu>
<div
className={`group flex items-center gap-1 rounded-md px-2 py-1.5 text-sm ${rowCls(isActiveProject)}`}
onContextMenu={(e) => {
e.preventDefault();
(
e.currentTarget.parentElement?.querySelector(
'[data-ctxtrigger]'
) as HTMLElement | null
)?.click();
}}
>
<button
type="button"
aria-label={isExpanded ? 'Collapse' : 'Expand'}
aria-expanded={isExpanded}
onClick={(e) => {
e.stopPropagation();
toggle(p.id);
}}
className="flex items-center justify-center size-4 shrink-0 opacity-70 hover:opacity-100"
>
<ChevronRight
className={`size-3.5 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
/>
</button>
<NavLink to={`/project/${p.id}`} className="flex items-center gap-2 min-w-0 flex-1">
<Folder className="size-3.5 shrink-0 opacity-70" />
<span className="truncate" title={p.name}>{p.name}</span>
</NavLink>
</div>
<DropdownMenuTrigger asChild>
<button data-ctxtrigger className="hidden" aria-hidden />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem variant="destructive" onClick={() => void handleRemove(p.id)}>
Remove from sidebar
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
{isExpanded && (
<div className="ml-5 mt-0.5 space-y-0.5">
{visible.map((s) => (
<NavLink
key={s.id}
to={`/session/${s.id}`}
className={`flex items-center gap-2 rounded-md px-2 py-1 text-sm min-w-0 ${rowCls(activeSession === s.id)}`}
>
<MessageSquare className="size-3.5 shrink-0 opacity-70" />
<span className="truncate flex-1" title={s.name}>{s.name}</span>
<span className="text-xs text-muted-foreground shrink-0 tabular-nums">
{relTime(s.updated_at)}
</span>
</NavLink>
))}
{p.total_sessions > MAX_VISIBLE_SESSIONS && (
<NavLink
to={`/project/${p.id}`}
className="block rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-sidebar-accent/60"
>
View all ({p.total_sessions})
</NavLink>
)}
</div>
)}
</div>
);
})}
</nav>
<AddProjectModal open={addOpen} onOpenChange={setAddOpen} onAdded={refresh} />
<AddProjectModal open={addOpen} onOpenChange={setAddOpen} onAdded={() => {}} />
</aside>
);
}