@nuasite/notes 0.22.2 → 0.22.3

package/src/dev/api-handlers.ts

@@ -7,21 +7,41 @@
  * Routes (all mounted under `/_nua/notes/`):
  *
  *   GET    /list?page=/<page>      → list items for one page
- *   GET    /inbox                   → list items across all pages (Phase 5 use)
- *   POST   /create                  → create a comment or suggestion
- *   POST   /update                  → patch an existing item
- *   POST   /resolve                 → mark item as resolved
- *   POST   /reopen                  → reopen a resolved item
- *   POST   /delete                  → delete an item
- *   POST   /apply                   → write a suggestion's replacement back to source
+ *   GET    /inbox                   → list items across all pages
+ *   POST   /create                  → create a comment or suggestion (any role)
+ *   POST   /update                  → patch an existing item (agency only)
+ *   POST   /resolve                 → mark item as resolved (agency only)
+ *   POST   /reopen                  → reopen a resolved item (agency only)
+ *   POST   /delete                  → soft-delete an item (agency only)
+ *   POST   /purge                   → hard-remove a soft-deleted item (agency only)
+ *   POST   /apply                   → write a suggestion to source (agency only)
+ *
+ * Role gating: `client` is the default and can only create. `agency` is
+ * granted by the `x-nua-role: agency` request header. The header is
+ * unauthenticated — anyone who knows it can claim agency. The point is to
+ * stop a client from accidentally clicking Apply or Delete, not to harden
+ * against an adversary. The dev server is local; auth is out of scope.
  */
 
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import { applySuggestion } from '../apply/apply-suggestion'
 import type { NotesJsonStore } from '../storage/json-store'
-import type { NoteItem, NoteItemPatch, NoteRange, NoteStatus, NoteType } from '../storage/types'
+import type { NoteItem, NoteItemPatch, NoteRange, NoteRole, NoteStatus, NoteType } from '../storage/types'
 import { parseJsonBody, sendError, sendJson } from './request-utils'
 
+/** Read the requester's role from a request header. Defaults to client. */
+function readRole(req: IncomingMessage): NoteRole {
+	const raw = req.headers['x-nua-role']
+	const value = Array.isArray(raw) ? raw[0] : raw
+	return value === 'agency' ? 'agency' : 'client'
+}
+
+function requireAgency(role: NoteRole, res: ServerResponse, req: IncomingMessage, action: string): boolean {
+	if (role === 'agency') return true
+	sendError(res, `${action} requires agency role`, 403, req)
+	return false
+}
+
 export interface NotesApiContext {
 	store: NotesJsonStore
 	projectRoot: string
@@ -63,6 +83,7 @@ export async function handleNotesApiRoute(
 ): Promise<void> {
 	const { store } = ctx
 	const method = req.method ?? 'GET'
+	const role = readRole(req)
 
 	// GET /list?page=/some-page
 	if (method === 'GET' && route === 'list') {
@@ -105,28 +126,33 @@ export async function handleNotesApiRoute(
 			sendError(res, 'Comment items require a non-empty body', 400, req)
 			return
 		}
-		const item = await store.addItem(body.page, {
-			type: body.type,
-			targetCmsId: body.targetCmsId,
-			targetSourcePath: body.targetSourcePath,
-			targetSourceLine: body.targetSourceLine,
-			targetSnippet: body.targetSnippet,
-			range: body.range ?? null,
-			body: body.body ?? '',
-			author: body.author,
-		})
+		const item = await store.addItem(
+			body.page,
+			{
+				type: body.type,
+				targetCmsId: body.targetCmsId,
+				targetSourcePath: body.targetSourcePath,
+				targetSourceLine: body.targetSourceLine,
+				targetSnippet: body.targetSnippet,
+				range: body.range ?? null,
+				body: body.body ?? '',
+				author: body.author,
+			},
+			role,
+		)
 		sendJson(res, { item }, 201, req)
 		return
 	}
 
-	// POST /update
+	// POST /update — agency only
 	if (method === 'POST' && route === 'update') {
+		if (!requireAgency(role, res, req, 'update')) return
 		const body = await parseJsonBody<UpdateBody>(req)
 		if (!body.page || !body.id || !body.patch) {
 			sendError(res, 'Missing required fields: page, id, patch', 400, req)
 			return
 		}
-		const updated = await store.updateItem(body.page, body.id, body.patch)
+		const updated = await store.updateItem(body.page, body.id, body.patch, role)
 		if (!updated) {
 			sendError(res, `Item not found: ${body.id}`, 404, req)
 			return
@@ -135,15 +161,17 @@ export async function handleNotesApiRoute(
 		return
 	}
 
-	// POST /resolve and POST /reopen — convenience wrappers around update
+	// POST /resolve and POST /reopen — agency only
 	if (method === 'POST' && (route === 'resolve' || route === 'reopen')) {
+		if (!requireAgency(role, res, req, route)) return
 		const body = await parseJsonBody<IdBody>(req)
 		if (!body.page || !body.id) {
 			sendError(res, 'Missing required fields: page, id', 400, req)
 			return
 		}
 		const status: NoteStatus = route === 'resolve' ? 'resolved' : 'open'
-		const updated = await store.updateItem(body.page, body.id, { status })
+		const action = route === 'resolve' ? 'resolved' : 'reopened'
+		const updated = await store.updateItem(body.page, body.id, { status }, role, action)
 		if (!updated) {
 			sendError(res, `Item not found: ${body.id}`, 404, req)
 			return
@@ -152,14 +180,32 @@ export async function handleNotesApiRoute(
 		return
 	}
 
-	// POST /delete
+	// POST /delete — agency only, soft delete (status flips to 'deleted')
 	if (method === 'POST' && route === 'delete') {
+		if (!requireAgency(role, res, req, 'delete')) return
+		const body = await parseJsonBody<IdBody>(req)
+		if (!body.page || !body.id) {
+			sendError(res, 'Missing required fields: page, id', 400, req)
+			return
+		}
+		const updated = await store.deleteItem(body.page, body.id, role)
+		if (!updated) {
+			sendError(res, `Item not found: ${body.id}`, 404, req)
+			return
+		}
+		sendJson(res, { item: updated }, 200, req)
+		return
+	}
+
+	// POST /purge — agency only, hard delete from disk
+	if (method === 'POST' && route === 'purge') {
+		if (!requireAgency(role, res, req, 'purge')) return
 		const body = await parseJsonBody<IdBody>(req)
 		if (!body.page || !body.id) {
 			sendError(res, 'Missing required fields: page, id', 400, req)
 			return
 		}
-		const ok = await store.deleteItem(body.page, body.id)
+		const ok = await store.purgeItem(body.page, body.id)
 		if (!ok) {
 			sendError(res, `Item not found: ${body.id}`, 404, req)
 			return
@@ -168,15 +214,16 @@ export async function handleNotesApiRoute(
 		return
 	}
 
-	// POST /apply — write the suggestion's replacement back to the source file
+	// POST /apply — agency only. Write the suggestion's replacement back to the source file.
 	if (method === 'POST' && route === 'apply') {
+		if (!requireAgency(role, res, req, 'apply')) return
 		const body = await parseJsonBody<IdBody>(req)
 		if (!body.page || !body.id) {
 			sendError(res, 'Missing required fields: page, id', 400, req)
 			return
 		}
 		const file = await store.readPage(body.page)
-		const item = file.items.find(it => it.id === body.id)
+		const item = file.items.find((it) => it.id === body.id)
 		if (!item) {
 			sendError(res, `Item not found: ${body.id}`, 404, req)
 			return
@@ -192,7 +239,7 @@ export async function handleNotesApiRoute(
 			// Drift detected — mark the item as stale so the sidebar can warn
 			// the agency without losing the suggestion.
 			if (result.reason === 'not-found' || result.reason === 'ambiguous') {
-				const updated = await store.updateItem(body.page, body.id, { status: 'stale' })
+				const updated = await store.updateItem(body.page, body.id, { status: 'stale' }, role, 'stale', result.message)
 				sendJson(res, { item: updated, error: result.message, reason: result.reason }, 409, req)
 				return
 			}
@@ -203,7 +250,14 @@ export async function handleNotesApiRoute(
 		// Successful write — flip the item to `applied`. The middleware will
 		// fire a Vite full-reload after this returns; CMS's own watcher also
 		// notices the source-file change and triggers HMR.
-		const updated = await store.updateItem(body.page, body.id, { status: 'applied' })
+		const updated = await store.updateItem(
+			body.page,
+			body.id,
+			{ status: 'applied' },
+			role,
+			'applied',
+			result.file,
+		)
 		sendJson(res, { item: updated, file: result.file, before: result.before, after: result.after }, 200, req)
 		return
 	}

package/src/dev/middleware.ts

@@ -47,11 +47,16 @@ export function createNotesDevMiddleware(
 
 		handleNotesApiRoute(route, req, res, ctx)
 			.then(() => {
-				// Mirror CMS: explicitly trigger full-reload after content-modifying
-				// routes. In sandboxed dev environments (E2B etc.) chokidar events
-				// may not fire reliably for note JSON files, so we send the HMR
+				// Mirror CMS: trigger full-reload after content-modifying routes.
+				// In sandboxed dev environments (E2B etc.) chokidar events may
+				// not fire reliably for note JSON files, so we send the HMR
 				// event directly. The overlay re-fetches `/list` on reload.
-				if (req.method === 'POST' && server.ws) {
+				//
+				// Only trigger on 2xx — a 403/404/400 shouldn't force a reload
+				// because nothing changed and the reload races with whatever
+				// the client is doing next.
+				const statusCode = res.statusCode
+				if (req.method === 'POST' && server.ws && statusCode >= 200 && statusCode < 300) {
 					server.ws.send({ type: 'full-reload' })
 				}
 			})

package/src/integration.ts

@@ -29,6 +29,7 @@ export default function nuaNotes(options: NuaNotesOptions = {}): AstroIntegratio
 	const {
 		enabled = true,
 		urlFlag = 'nua-notes',
+		agencyFlag = 'nua-agency',
 		notesDir = 'data/notes',
 	} = options
 
@@ -79,7 +80,7 @@ export default function nuaNotes(options: NuaNotesOptions = {}): AstroIntegratio
 					(function () {
 						if (window.__nuasiteNotesAlive) return;
 						window.__nuasiteNotesAlive = true;
-						window.__NuaNotesConfig = ${JSON.stringify({ urlFlag })};
+						window.__NuaNotesConfig = ${JSON.stringify({ urlFlag, agencyFlag })};
 						if (!document.querySelector('script[data-nuasite-notes]')) {
 							const s = document.createElement('script');
 							s.type = 'module';

package/src/overlay/App.tsx

@@ -6,14 +6,34 @@ import { SelectionTooltip } from './components/SelectionTooltip'
 import { Sidebar } from './components/Sidebar'
 import { SuggestPopover } from './components/SuggestPopover'
 import { Toolbar } from './components/Toolbar'
+import { isSidebarCollapsed, setSidebarCollapsed } from './lib/cms-bridge'
 import { fetchPageManifest } from './lib/manifest-fetch'
-import { applyNote, createNote, deleteNote, listNotes, setNoteStatus } from './lib/notes-fetch'
+import { applyNote, createNote, deleteNote, listNotes, purgeNote, setNoteStatus } from './lib/notes-fetch'
 import { findAnchorRange, selectionInsideElement } from './lib/range-anchor'
-import { exitReviewMode, getCurrentPagePath } from './lib/url-mode'
-import type { CmsPageManifest, NoteItem } from './types'
+import { exitReviewMode, getCurrentPagePath, resolveRole } from './lib/url-mode'
+import type { CmsPageManifest, NoteItem, NoteRole } from './types'
+
+const COLLAPSED_KEY = 'nua-notes-sidebar-collapsed'
+
+function loadCollapsed(): boolean {
+	try {
+		return localStorage.getItem(COLLAPSED_KEY) === '1'
+	} catch {
+		return false
+	}
+}
+
+function saveCollapsed(value: boolean): void {
+	try {
+		localStorage.setItem(COLLAPSED_KEY, value ? '1' : '0')
+	} catch {
+		// ignore
+	}
+}
 
 interface AppProps {
 	urlFlag: string
+	agencyFlag: string
 }
 
 interface PickState {
@@ -66,8 +86,13 @@ function findCmsAncestor(target: EventTarget | null): Element | null {
 	return null
 }
 
-export function App({ urlFlag }: AppProps) {
+export function App({ urlFlag, agencyFlag }: AppProps) {
 	const page = useMemo(() => getCurrentPagePath(), [])
+	// Role is resolved once at mount. Visiting `?nua-agency` persists the
+	// cookie so subsequent navigation stays in agency mode without re-typing.
+	const role: NoteRole = useMemo(() => resolveRole(agencyFlag), [agencyFlag])
+	const isAgency = role === 'agency'
+
 	const [items, setItems] = useState<NoteItem[]>([])
 	const [manifest, setManifest] = useState<CmsPageManifest | null>(null)
 	const [picking, setPicking] = useState(false)
@@ -81,6 +106,25 @@ export function App({ urlFlag }: AppProps) {
 	const [author, setAuthor] = useState<string>(() => loadAuthor())
 	const [staleIds, setStaleIds] = useState<Set<string>>(new Set())
 	const [applyingId, setApplyingId] = useState<string | null>(null)
+	const [collapsed, setCollapsedState] = useState<boolean>(() => loadCollapsed())
+
+	// Sync the body padding via cms-bridge whenever collapsed changes.
+	// Persist to localStorage so the preference sticks across navigation.
+	useEffect(() => {
+		setSidebarCollapsed(collapsed)
+		saveCollapsed(collapsed)
+	}, [collapsed])
+
+	// Initialize the body padding to match the loaded preference on mount.
+	// This runs once before the first render so there's no flash of
+	// uncollapsed sidebar when the user has it saved as collapsed.
+	useEffect(() => {
+		setSidebarCollapsed(loadCollapsed())
+	}, [])
+
+	const toggleCollapsed = useCallback(() => {
+		setCollapsedState((c) => !c)
+	}, [])
 
 	// Load notes + manifest on mount
 	useEffect(() => {
@@ -321,7 +365,21 @@ export function App({ urlFlag }: AppProps) {
 
 	const handleDelete = useCallback(async (id: string) => {
 		try {
-			await deleteNote(page, id)
+			// Soft delete: server flips status to 'deleted' and returns the
+			// updated item. We keep it in the list so the agency sees it move
+			// into the collapsed Deleted section. (Clients never see this
+			// path because the Delete button is hidden for them.)
+			const item = await deleteNote(page, id)
+			setItems((prev) => prev.map((i) => (i.id === id ? item : i)))
+			if (activeId === id) setActiveId(null)
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err))
+		}
+	}, [page, activeId])
+
+	const handlePurge = useCallback(async (id: string) => {
+		try {
+			await purgeNote(page, id)
 			setItems((prev) => prev.filter((i) => i.id !== id))
 			if (activeId === id) setActiveId(null)
 		} catch (err) {
@@ -368,29 +426,38 @@ export function App({ urlFlag }: AppProps) {
 		<div class="notes-root">
 			<Toolbar
 				page={page}
-				count={items.length}
+				count={items.filter((i) => i.status !== 'deleted').length}
 				picking={picking}
+				role={role}
+				collapsed={collapsed}
 				onTogglePick={() => {
 					setPicking((p) => !p)
 					setPendingPick(null)
 					setPendingSuggest(null)
 				}}
-				onExit={() => exitReviewMode(urlFlag)}
-			/>
-			<Sidebar
-				page={page}
-				items={items}
-				activeId={activeId}
-				picking={picking}
-				error={error}
-				staleIds={staleIds}
-				applyingId={applyingId}
-				onFocus={setActiveId}
-				onResolve={handleResolve}
-				onReopen={handleReopen}
-				onDelete={handleDelete}
-				onApply={handleApply}
+				onToggleCollapse={toggleCollapsed}
+				onExit={() => exitReviewMode(urlFlag, agencyFlag)}
 			/>
+			{collapsed
+				? null
+				: (
+					<Sidebar
+						page={page}
+						items={items}
+						activeId={activeId}
+						picking={picking}
+						error={error}
+						staleIds={staleIds}
+						applyingId={applyingId}
+						isAgency={isAgency}
+						onFocus={setActiveId}
+						onResolve={handleResolve}
+						onReopen={handleReopen}
+						onDelete={handleDelete}
+						onPurge={handlePurge}
+						onApply={handleApply}
+					/>
+				)}
 			{picking && hoverRect ? <ElementHighlight rect={hoverRect.rect} /> : null}
 			{activeRect ? <ElementHighlight rect={activeRect} persistent /> : null}
 			{pendingSelection && !pendingPick && !pendingSuggest

package/src/overlay/components/Sidebar.tsx

@@ -10,18 +10,39 @@ interface SidebarProps {
 	error: string | null
 	staleIds: Set<string>
 	applyingId: string | null
+	isAgency: boolean
 	onFocus: (id: string) => void
 	onResolve: (id: string) => void
 	onReopen: (id: string) => void
 	onDelete: (id: string) => void
+	onPurge: (id: string) => void
 	onApply: (id: string) => void
 }
 
 export function Sidebar(
-	{ page, items, activeId, picking, error, staleIds, applyingId, onFocus, onResolve, onReopen, onDelete, onApply }: SidebarProps,
+	{
+		page,
+		items,
+		activeId,
+		picking,
+		error,
+		staleIds,
+		applyingId,
+		isAgency,
+		onFocus,
+		onResolve,
+		onReopen,
+		onDelete,
+		onPurge,
+		onApply,
+	}: SidebarProps,
 ) {
-	const open = items.filter((i) => i.status !== 'resolved' && i.status !== 'applied')
-	const closed = items.filter((i) => i.status === 'resolved' || i.status === 'applied')
+	// Sort items into three buckets. Clients never see deleted items at all.
+	const open = items.filter((i) => i.status === 'open' || i.status === 'stale' || i.status === 'rejected')
+	const resolved = items.filter((i) => i.status === 'resolved' || i.status === 'applied')
+	const deleted = isAgency ? items.filter((i) => i.status === 'deleted') : []
+	const visible = [...open, ...resolved, ...deleted]
+
 	const renderItem = (item: NoteItem) => (
 		<SidebarItem
 			key={item.id}
@@ -29,24 +50,28 @@ export function Sidebar(
 			active={item.id === activeId}
 			stale={staleIds.has(item.id)}
 			applying={applyingId === item.id}
+			isAgency={isAgency}
 			onFocus={() => onFocus(item.id)}
 			onResolve={() => onResolve(item.id)}
 			onReopen={() => onReopen(item.id)}
 			onDelete={() => onDelete(item.id)}
+			onPurge={() => onPurge(item.id)}
 			onApply={() => onApply(item.id)}
 		/>
 	)
+
 	return (
 		<aside class="notes-sidebar">
 			<header class="notes-sidebar__header">
 				<h3 class="notes-sidebar__title">Review notes</h3>
 				<div class="notes-sidebar__meta">
-					{open.length} open · {closed.length} resolved · <code>{page}</code>
+					{open.length} open · {resolved.length} resolved
+					{isAgency && deleted.length > 0 ? ` · ${deleted.length} deleted` : ''} · <code>{page}</code>
 				</div>
 			</header>
 			<div class="notes-sidebar__list">
 				{error ? <div class="notes-banner">{error}</div> : null}
-				{items.length === 0
+				{visible.length === 0
 					? (
 						<div class="notes-sidebar__empty">
 							{picking
@@ -56,14 +81,22 @@ export function Sidebar(
 					)
 					: null}
 				{open.map(renderItem)}
-				{closed.length > 0
+				{resolved.length > 0
 					? (
 						<>
-							<div class="notes-sidebar__meta" style={{ marginTop: '4px' }}>Resolved</div>
-							{closed.map(renderItem)}
+							<div class="notes-sidebar__section">Resolved</div>
+							{resolved.map(renderItem)}
 						</>
 					)
 					: null}
+				{isAgency && deleted.length > 0
+					? (
+						<details class="notes-sidebar__deleted">
+							<summary>Deleted ({deleted.length})</summary>
+							{deleted.map(renderItem)}
+						</details>
+					)
+					: null}
 			</div>
 		</aside>
 	)

package/src/overlay/components/SidebarItem.tsx

@@ -8,10 +8,12 @@ interface SidebarItemProps {
 	active: boolean
 	stale: boolean
 	applying: boolean
+	isAgency: boolean
 	onFocus: () => void
 	onResolve: () => void
 	onReopen: () => void
 	onDelete: () => void
+	onPurge: () => void
 	onApply: () => void
 }
 
@@ -37,15 +39,24 @@ function formatTime(iso: string): string {
  * One note card in the sidebar list. Renders both comment and suggestion
  * shapes from a unified data model: comments show the body; suggestions
  * show the inline diff and (if any) a rationale + body.
+ *
+ * Action visibility is split by role:
+ *   - client: read-only on existing items. No buttons rendered.
+ *   - agency: full controls (Apply on suggestions, Resolve / Reopen, Delete).
+ *             On items already in `deleted` state, the only action is Purge
+ *             (hard remove from disk).
  */
-export function SidebarItem({ item, active, stale, applying, onFocus, onResolve, onReopen, onDelete, onApply }: SidebarItemProps) {
+export function SidebarItem(
+	{ item, active, stale, applying, isAgency, onFocus, onResolve, onReopen, onDelete, onPurge, onApply }: SidebarItemProps,
+) {
 	const isResolved = item.status === 'resolved' || item.status === 'applied'
 	const isApplied = item.status === 'applied'
+	const isDeleted = item.status === 'deleted'
 	const isSuggestion = item.type === 'suggestion' && item.range
-	const canApply = isSuggestion && !isApplied && !stale
+	const canApply = isAgency && isSuggestion && !isApplied && !isDeleted && !stale
 	return (
 		<div
-			class={`notes-item ${active ? 'notes-item--active' : ''} ${isResolved ? 'notes-item--resolved' : ''}`}
+			class={`notes-item ${active ? 'notes-item--active' : ''} ${isResolved ? 'notes-item--resolved' : ''} ${isDeleted ? 'notes-item--deleted' : ''}`}
 			onMouseEnter={onFocus}
 		>
 			<div class="notes-item__head">
@@ -56,6 +67,9 @@ export function SidebarItem({ item, active, stale, applying, onFocus, onResolve,
 					{isResolved
 						? <span class="notes-item__badge notes-item__badge--resolved">{item.status}</span>
 						: null}
+					{isDeleted
+						? <span class="notes-item__badge notes-item__badge--deleted">deleted</span>
+						: null}
 					<span class="notes-item__author">{item.author}</span>
 				</div>
 				<span class="notes-item__time">{formatTime(item.createdAt)}</span>
@@ -86,19 +100,46 @@ export function SidebarItem({ item, active, stale, applying, onFocus, onResolve,
 					</>
 				)}
 
-			<div class="notes-item__actions">
-				{canApply
-					? (
-						<button class="notes-btn notes-btn--primary" onClick={onApply} disabled={applying}>
-							{applying ? 'Applying...' : 'Apply'}
-						</button>
-					)
-					: null}
-				{isResolved
-					? <button class="notes-btn notes-btn--ghost" onClick={onReopen}>Reopen</button>
-					: <button class="notes-btn" onClick={onResolve}>Resolve</button>}
-				<button class="notes-btn notes-btn--ghost notes-btn--danger" onClick={onDelete}>Delete</button>
-			</div>
+			{isAgency && item.history.length > 1
+				? (
+					<details class="notes-item__history">
+						<summary>History ({item.history.length})</summary>
+						<ul>
+							{item.history.map((h, i) => (
+								<li key={i}>
+									<span class="notes-item__history-action">{h.action}</span>
+									<span class="notes-item__history-meta">
+										{h.role ? ` · ${h.role}` : ''} · {formatTime(h.at)}
+									</span>
+									{h.note ? <div class="notes-item__history-note">{h.note}</div> : null}
+								</li>
+							))}
+						</ul>
+					</details>
+				)
+				: null}
+
+			{isAgency
+				? (
+					<div class="notes-item__actions">
+						{canApply
+							? (
+								<button class="notes-btn notes-btn--primary" onClick={onApply} disabled={applying}>
+									{applying ? 'Applying...' : 'Apply'}
+								</button>
+							)
+							: null}
+						{isDeleted
+							? <button class="notes-btn notes-btn--ghost notes-btn--danger" onClick={onPurge}>Purge</button>
+							: isResolved
+							? <button class="notes-btn notes-btn--ghost" onClick={onReopen}>Reopen</button>
+							: <button class="notes-btn" onClick={onResolve}>Resolve</button>}
+						{!isDeleted
+							? <button class="notes-btn notes-btn--ghost notes-btn--danger" onClick={onDelete}>Delete</button>
+							: null}
+					</div>
+				)
+				: null}
 		</div>
 	)
 }

package/src/overlay/components/Toolbar.tsx

@@ -1,24 +1,29 @@
 /** @jsxImportSource preact */
+import type { NoteRole } from '../types'
 
 interface ToolbarProps {
 	page: string
 	count: number
 	picking: boolean
+	role: NoteRole
+	collapsed: boolean
 	onTogglePick: () => void
+	onToggleCollapse: () => void
 	onExit: () => void
 }
 
 /**
  * Top bar for notes review mode. Shows the brand mark, current page path,
- * note count, a "Pick element" button (to enter the click-to-comment flow),
- * and an "Exit review" button that drops the cookie + reloads.
+ * note count, the active role (client / agency), the Pick element button,
+ * and an Exit button that drops the cookies + reloads back into CMS view.
  */
-export function Toolbar({ page, count, picking, onTogglePick, onExit }: ToolbarProps) {
+export function Toolbar({ page, count, picking, role, collapsed, onTogglePick, onToggleCollapse, onExit }: ToolbarProps) {
 	return (
 		<div class="notes-toolbar">
 			<div class="notes-toolbar__brand">
 				<span class="notes-toolbar__dot" />
 				<span>Notes</span>
+				<span class={`notes-toolbar__role notes-toolbar__role--${role}`}>{role}</span>
 				<span class="notes-toolbar__page">{page} · {count} {count === 1 ? 'item' : 'items'}</span>
 			</div>
 			<div class="notes-toolbar__actions">
@@ -29,6 +34,13 @@ export function Toolbar({ page, count, picking, onTogglePick, onExit }: ToolbarP
 				>
 					{picking ? 'Cancel pick' : 'Pick element'}
 				</button>
+				<button
+					class="notes-btn notes-btn--ghost"
+					onClick={onToggleCollapse}
+					title={collapsed ? 'Show notes sidebar' : 'Hide notes sidebar to see the full page'}
+				>
+					{collapsed ? 'Show sidebar' : 'Hide sidebar'}
+				</button>
 				<button class="notes-btn notes-btn--ghost" onClick={onExit} title="Leave review mode">
 					Exit
 				</button>