@growth-labs/cms 0.1.0

package/src/ui/components/Sidebar.tsx

@@ -0,0 +1,86 @@
+import type { Route } from '../hash-router.js'
+import type { IconName } from '../icons.js'
+import { BrandMark, Icon } from '../icons.js'
+import { navItems } from '../nav.js'
+import { useWorkspace } from '../workspace-context.js'
+import { SiteSwitcher } from './SiteSwitcher.js'
+
+export function Sidebar(props: { route: Route; navigate: (r: Route) => void; collapsed: boolean }) {
+	const { state } = useWorkspace()
+	const groups = navItems()
+	const user = state.user
+	const initial = user?.name?.[0]?.toUpperCase() ?? user?.email?.[0]?.toUpperCase() ?? '?'
+
+	return (
+		<aside className="sidebar" aria-label="Main navigation" data-collapsed={props.collapsed}>
+			{/* Brand block — mark + serif wordmark with accent period */}
+			<div className="sb-brand">
+				<div className="sb-mark">
+					<BrandMark size={18} color="#fff" />
+				</div>
+				{!props.collapsed && (
+					<div className="sb-wordmark">
+						Masthead<span className="dot">.</span>
+					</div>
+				)}
+			</div>
+
+			{/* Workspace switcher */}
+			<SiteSwitcher collapsed={props.collapsed} />
+
+			{/* Nav groups */}
+			<nav className="scroll" style={{ flex: 1, paddingBottom: 8 }}>
+				{groups.map((g) => (
+					<div className="nav-section" key={g.group}>
+						{!props.collapsed && <div className="nav-label">{g.group}</div>}
+						{g.items.map((item) => (
+							<button
+								key={item.id}
+								type="button"
+								className={`nav-item${props.route === item.id ? ' active' : ''}`}
+								onClick={() => props.navigate(item.id)}
+								aria-current={props.route === item.id ? 'page' : undefined}
+								title={item.label}
+							>
+								<Icon name={item.icon as IconName} size={18} className="ni-icon" />
+								{!props.collapsed && <span className="ni-label">{item.label}</span>}
+								{!props.collapsed && item.count != null && (
+									<span className="ni-count tnum">{item.count}</span>
+								)}
+							</button>
+						))}
+					</div>
+				))}
+			</nav>
+
+			{/* Current-user footer */}
+			<div className="sb-foot">
+				<div className="sb-user">
+					<div className="avatar" style={{ background: 'var(--accent)' }}>
+						{initial}
+					</div>
+					{!props.collapsed && (
+						<>
+							<div style={{ flex: 1, minWidth: 0 }}>
+								<div
+									style={{
+										fontSize: 13,
+										fontWeight: 600,
+										color: 'var(--ink)',
+										whiteSpace: 'nowrap',
+										overflow: 'hidden',
+										textOverflow: 'ellipsis',
+									}}
+								>
+									{user?.name ?? user?.email ?? 'Guest'}
+								</div>
+								<div style={{ fontSize: 11, color: 'var(--ink-muted)' }}>{user?.role}</div>
+							</div>
+							<Icon name="dots" size={16} style={{ color: 'var(--ink-muted)' }} />
+						</>
+					)}
+				</div>
+			</div>
+		</aside>
+	)
+}

package/src/ui/components/SiteSwitcher.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState } from 'react'
+import { Icon } from '../icons.js'
+import { useWorkspace } from '../workspace-context.js'
+
+export function SiteSwitcher({ collapsed }: { collapsed?: boolean }) {
+	const { state, dispatch } = useWorkspace()
+	const [open, setOpen] = useState(false)
+	const ref = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		const h = (e: MouseEvent) => {
+			if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+		}
+		document.addEventListener('mousedown', h)
+		return () => document.removeEventListener('mousedown', h)
+	}, [])
+
+	const active = state.workspaces.find((w) => w.id === state.activeId)
+
+	return (
+		<div ref={ref} style={{ position: 'relative' }}>
+			<button
+				type="button"
+				className="site-switch"
+				style={{ width: '100%' }}
+				onClick={() => setOpen((v) => !v)}
+				aria-expanded={open}
+				aria-haspopup="listbox"
+			>
+				<span className="site-dot" style={{ background: active?.color }} />
+				{!collapsed && (
+					<>
+						<div style={{ flex: 1, minWidth: 0 }}>
+							<div className="site-name">{active?.name ?? state.activeId}</div>
+							<div className="site-meta">{active?.meta}</div>
+						</div>
+						<Icon name="chevDown" size={15} style={{ color: 'var(--ink-muted)' }} />
+					</>
+				)}
+			</button>
+			{open && (
+				<div
+					className="panel fade-only"
+					role="listbox"
+					style={{
+						position: 'absolute',
+						top: 'calc(100% + 6px)',
+						left: 0,
+						right: collapsed ? 'auto' : 0,
+						width: collapsed ? 240 : 'auto',
+						zIndex: 50,
+						boxShadow: 'var(--shadow-md)',
+						padding: 6,
+					}}
+				>
+					<div className="kicker" style={{ padding: '8px 10px 4px' }}>
+						Your sites
+					</div>
+					{state.workspaces.map((ws) => (
+						<button
+							key={ws.id}
+							type="button"
+							role="option"
+							aria-selected={ws.id === state.activeId}
+							className="nav-item"
+							style={{ width: '100%', borderRadius: 7 }}
+							onClick={() => {
+								dispatch({ type: 'switch', id: ws.id })
+								setOpen(false)
+							}}
+						>
+							<span className="site-dot" style={{ background: ws.color }} />
+							<div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
+								<div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{ws.name}</div>
+								<div style={{ fontSize: 11, color: 'var(--ink-muted)' }}>{ws.meta}</div>
+							</div>
+							{ws.id === state.activeId && (
+								<Icon name="check" size={15} style={{ color: 'var(--accent)' }} />
+							)}
+						</button>
+					))}
+					<div className="divider" style={{ margin: '6px 0' }} />
+					{/* Provisioning-request affordance — operator-gated, no infra call */}
+					<button
+						type="button"
+						className="nav-item"
+						style={{ width: '100%', borderRadius: 7, color: 'var(--ink-muted)' }}
+						onClick={() => {
+							window.open('mailto:platform@grizzle.work?subject=New+site+request', '_blank')
+							setOpen(false)
+						}}
+					>
+						<Icon name="plus" size={16} className="ni-icon" />
+						<span className="ni-label">Add a site</span>
+					</button>
+				</div>
+			)}
+		</div>
+	)
+}

package/src/ui/components/Topbar.tsx

@@ -0,0 +1,93 @@
+import { Icon } from '../icons.js'
+import type { ThemeMode } from '../theme.js'
+
+export function Topbar(props: {
+	collapsed: boolean
+	setCollapsed: (v: boolean) => void
+	onCommand: () => void
+	theme: ThemeMode
+	setTheme: (v: ThemeMode) => void
+}) {
+	return (
+		<header className="topbar">
+			{/* Sidebar toggle */}
+			<button
+				type="button"
+				className="icon-btn"
+				aria-label={props.collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+				onClick={() => props.setCollapsed(!props.collapsed)}
+				title="Toggle sidebar"
+			>
+				<Icon name="sidebar" size={18} />
+			</button>
+
+			{/* Search / command trigger */}
+			{/* biome-ignore lint/a11y/useSemanticElements: cannot be a <button> because it wraps a readonly <input> — interactive content nesting is invalid HTML; role="button" + tabIndex + onKeyDown make the wrapper keyboard-operable instead. */}
+			<div
+				className="search"
+				onClick={props.onCommand}
+				role="button"
+				tabIndex={0}
+				aria-label="Search or run a command (⌘K)"
+				onKeyDown={(e) => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						e.preventDefault()
+						props.onCommand()
+					}
+				}}
+			>
+				<Icon name="search" size={16} />
+				<input
+					placeholder="Search content, media, people…"
+					readOnly
+					style={{ cursor: 'pointer' }}
+				/>
+				<span className="kbd">⌘K</span>
+			</div>
+
+			<div style={{ flex: 1 }} />
+
+			{/* Theme toggle */}
+			<button
+				type="button"
+				className="icon-btn"
+				aria-label={`Switch to ${props.theme === 'dark' ? 'light' : 'dark'} mode`}
+				title="Toggle theme"
+				onClick={() => props.setTheme(props.theme === 'dark' ? 'light' : 'dark')}
+			>
+				<Icon name={props.theme === 'dark' ? 'sun' : 'moon'} size={17} />
+			</button>
+
+			{/* Notifications bell */}
+			<button
+				type="button"
+				className="icon-btn"
+				aria-label="Notifications"
+				title="Notifications"
+				style={{ position: 'relative' }}
+			>
+				<Icon name="bell" size={17} />
+				<span
+					style={{
+						position: 'absolute',
+						top: 7,
+						right: 8,
+						width: 7,
+						height: 7,
+						borderRadius: '50%',
+						background: 'var(--red)',
+						border: '1.5px solid var(--bg)',
+					}}
+				/>
+			</button>
+
+			{/* Divider */}
+			<div style={{ width: 1, height: 22, background: 'var(--border)', margin: '0 4px' }} />
+
+			{/* New content quick-create */}
+			<button type="button" className="btn primary sm" onClick={props.onCommand}>
+				<Icon name="plus" size={15} /> New
+			</button>
+		</header>
+	)
+}

package/src/ui/editor/AiAssistPanel.tsx

@@ -0,0 +1,407 @@
+// src/ui/editor/AiAssistPanel.tsx — editor AI-assist panel (Task 8 / P4).
+//
+// Renders the design's AIBar: a 2×2 grid of 4 AI actions.
+//   Streaming: Proofread & tighten, Suggest 5 headlines (SSE; result pane appends chunks)
+//   Sync:      Generate key takeaways, Draft meta description (result shown; "Apply" affordance)
+//
+// NO direct LLM call — all actions hit the /admin/api/content/:id/ai/* routes wired
+// in createAiRoutes (Task 3/4). This component is a thin UI over streamAi/syncAi.
+//
+// Compile-gated: no jsdom tests; pure helpers are tested in __tests__/ui/ai-assist.test.ts.
+
+import { useCallback, useState } from 'react'
+import { Icon } from '../icons.js'
+import { patchContent } from '../inspector/inspector-data.js'
+import { type AiAction, applyHeadlineChoice, streamAi, syncAi } from './ai-assist.js'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface ActionMeta {
+	action: AiAction
+	icon: 'wand' | 'sparkle' | 'bookmark' | 'seo'
+	title: string
+	description: string
+	kind: 'stream' | 'sync'
+}
+
+const ACTIONS: ActionMeta[] = [
+	{
+		action: 'proofread',
+		icon: 'wand',
+		title: 'Proofread & tighten',
+		description: 'Fix grammar, trim 8% length',
+		kind: 'stream',
+	},
+	{
+		action: 'headlines',
+		icon: 'sparkle',
+		title: 'Suggest 5 headlines',
+		description: 'SEO-aware, in house voice',
+		kind: 'stream',
+	},
+	{
+		action: 'takeaways',
+		icon: 'bookmark',
+		title: 'Generate key takeaways',
+		description: '3-bullet summary',
+		kind: 'sync',
+	},
+	{
+		action: 'meta-description',
+		icon: 'seo',
+		title: 'Draft meta description',
+		description: 'Under 160 characters',
+		kind: 'sync',
+	},
+]
+
+// ---------------------------------------------------------------------------
+// Panel state
+// ---------------------------------------------------------------------------
+
+interface PanelState {
+	/** Which action is running (loading). */
+	running: AiAction | null
+	/** Error from the last action. */
+	error: string | null
+	/** Accumulated stream text (proofread/headlines). */
+	streamText: string
+	/** Active action showing a result. */
+	activeAction: AiAction | null
+	/** Parsed headlines list (for the headlines result). */
+	headlines: string[]
+	/** Meta description text from the sync result (for the "Apply" button). */
+	metaDescription: string | null
+	/** Whether the meta was applied/written. */
+	metaApplied: boolean
+	/** Whether the takeaways were written (server-side). */
+	takeawaysWritten: boolean
+	/** Whether any locked-field was detected. */
+	locked: boolean
+}
+
+const INITIAL_STATE: PanelState = {
+	running: null,
+	error: null,
+	streamText: '',
+	activeAction: null,
+	headlines: [],
+	metaDescription: null,
+	metaApplied: false,
+	takeawaysWritten: false,
+	locked: false,
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export interface AiAssistPanelProps {
+	/** The saved content item id. Must be non-null — the toggle is disabled until saved. */
+	docId: string
+	/** Called when the meta description should be applied to the SEO description field. */
+	onMetaApplied?: (description: string) => void
+}
+
+export function AiAssistPanel({ docId, onMetaApplied }: AiAssistPanelProps) {
+	const [state, setState] = useState<PanelState>(INITIAL_STATE)
+
+	const handleAction = useCallback(
+		async (meta: ActionMeta) => {
+			setState((prev) => ({
+				...prev,
+				running: meta.action,
+				error: null,
+				streamText: '',
+				activeAction: meta.action,
+				headlines: [],
+				metaDescription: null,
+				metaApplied: false,
+				takeawaysWritten: false,
+				locked: false,
+			}))
+
+			try {
+				if (meta.kind === 'stream') {
+					let accumulated = ''
+					await streamAi(meta.action, docId, (chunk) => {
+						accumulated += chunk
+						if (meta.action === 'headlines') {
+							setState((prev) => ({
+								...prev,
+								streamText: accumulated,
+								headlines: applyHeadlineChoice(accumulated),
+							}))
+						} else {
+							setState((prev) => ({ ...prev, streamText: accumulated }))
+						}
+					})
+					setState((prev) => ({ ...prev, running: null }))
+				} else {
+					// Sync: takeaways or meta-description
+					const data = (await syncAi(meta.action, docId)) as Record<string, unknown>
+					if (meta.action === 'meta-description') {
+						setState((prev) => ({
+							...prev,
+							running: null,
+							metaDescription: typeof data.description === 'string' ? data.description : null,
+							locked: data.locked === true,
+						}))
+					} else {
+						// takeaways — server already persisted; just show confirmation
+						setState((prev) => ({
+							...prev,
+							running: null,
+							takeawaysWritten: data.written === true,
+							locked: data.locked === true,
+						}))
+					}
+				}
+			} catch (err) {
+				setState((prev) => ({
+					...prev,
+					running: null,
+					error: String(err),
+				}))
+			}
+		},
+		[docId],
+	)
+
+	const applyMeta = useCallback(async () => {
+		if (!state.metaDescription) return
+		try {
+			await patchContent(docId, { description: state.metaDescription })
+			setState((prev) => ({ ...prev, metaApplied: true }))
+			onMetaApplied?.(state.metaDescription)
+		} catch (err) {
+			setState((prev) => ({ ...prev, error: String(err) }))
+		}
+	}, [docId, state.metaDescription, onMetaApplied])
+
+	return (
+		<div className="panel fade-only" style={panelWrap}>
+			{/* Panel header */}
+			<div style={panelHeader}>
+				<Icon name="sparkle" size={16} style={{ color: 'var(--accent)' }} />
+				<span style={{ fontSize: 13, fontWeight: 700, color: 'var(--accent)' }}>Broadsheet AI</span>
+				<span style={{ fontSize: 12, color: 'var(--ink-muted)' }}>· trained on house style</span>
+			</div>
+
+			{/* 2×2 action grid */}
+			<div style={actionGrid}>
+				{ACTIONS.map((meta) => (
+					<button
+						key={meta.action}
+						type="button"
+						onClick={() => void handleAction(meta)}
+						disabled={state.running !== null}
+						style={{
+							...actionBtn,
+							opacity: state.running !== null && state.running !== meta.action ? 0.55 : 1,
+							borderColor:
+								state.activeAction === meta.action ? 'var(--accent-ring)' : 'var(--border)',
+						}}
+						aria-label={meta.title}
+					>
+						{state.running === meta.action ? (
+							<span style={{ color: 'var(--accent)', fontSize: 11 }}>Running…</span>
+						) : (
+							<Icon name={meta.icon} size={16} style={{ color: 'var(--accent)' }} />
+						)}
+						<span>
+							<span
+								style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: 'var(--ink)' }}
+							>
+								{meta.title}
+							</span>
+							<span style={{ display: 'block', fontSize: 11, color: 'var(--ink-muted)' }}>
+								{meta.description}
+							</span>
+						</span>
+					</button>
+				))}
+			</div>
+
+			{/* Error banner */}
+			{state.error && (
+				<div style={errorBanner} role="alert">
+					<Icon name="x" size={13} style={{ color: 'var(--red)' }} />
+					<span style={{ fontSize: 12, color: 'var(--red)' }}>{state.error}</span>
+				</div>
+			)}
+
+			{/* Result pane — streaming (proofread/headlines) */}
+			{state.activeAction &&
+				(state.activeAction === 'proofread' || state.activeAction === 'headlines') &&
+				state.streamText && (
+					<div style={resultPane}>
+						<div style={resultHeader}>
+							<span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-soft)' }}>
+								{state.activeAction === 'headlines' ? 'Suggested headlines' : 'Proofread result'}
+							</span>
+						</div>
+
+						{state.activeAction === 'headlines' && state.headlines.length > 0 ? (
+							<ol style={{ margin: '8px 0 0', paddingLeft: 18, listStyle: 'decimal' }}>
+								{state.headlines.map((h) => (
+									<li
+										key={h}
+										style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.5, marginBottom: 4 }}
+									>
+										{h}
+									</li>
+								))}
+							</ol>
+						) : (
+							<pre style={preResult}>{state.streamText}</pre>
+						)}
+					</div>
+				)}
+
+			{/* Result pane — sync: meta description */}
+			{state.activeAction === 'meta-description' && state.metaDescription !== null && (
+				<div style={resultPane}>
+					<div style={resultHeader}>
+						<span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-soft)' }}>
+							Meta description
+						</span>
+						{state.locked && (
+							<span style={{ fontSize: 11, color: 'var(--amber)', marginLeft: 6 }}>
+								field locked — not written
+							</span>
+						)}
+					</div>
+					<p style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.5, margin: '6px 0 10px' }}>
+						{state.metaDescription}
+					</p>
+					{!state.metaApplied && !state.locked && (
+						<button type="button" onClick={() => void applyMeta()} style={applyBtn}>
+							Apply to SEO description
+						</button>
+					)}
+					{state.metaApplied && (
+						<span style={{ fontSize: 12, color: 'var(--green)' }}>
+							<Icon name="checkCircle" size={13} style={{ marginRight: 4 }} />
+							Applied
+						</span>
+					)}
+				</div>
+			)}
+
+			{/* Result pane — sync: takeaways */}
+			{state.activeAction === 'takeaways' && state.running === null && (
+				<div style={resultPane}>
+					<div style={resultHeader}>
+						<span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-soft)' }}>
+							Key takeaways
+						</span>
+						{state.locked && (
+							<span style={{ fontSize: 11, color: 'var(--amber)', marginLeft: 6 }}>
+								field locked — not written
+							</span>
+						)}
+					</div>
+					<p
+						style={{
+							fontSize: 12,
+							color: state.takeawaysWritten ? 'var(--green)' : 'var(--ink-muted)',
+							margin: '6px 0 0',
+						}}
+					>
+						{state.takeawaysWritten
+							? 'Takeaways generated and saved.'
+							: 'Takeaways generated (field locked — not saved).'}
+					</p>
+				</div>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const panelWrap: React.CSSProperties = {
+	// .panel supplies bg/border/radius; override the border to the accent ring
+	// to match the prototype's AI-bar treatment.
+	margin: '0 0 18px',
+	borderColor: 'var(--accent-ring)',
+	overflow: 'hidden',
+}
+
+const panelHeader: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 9,
+	padding: '11px 14px',
+	background: 'var(--accent-tint)',
+	borderBottom: '1px solid var(--border)',
+}
+
+const actionGrid: React.CSSProperties = {
+	display: 'grid',
+	gridTemplateColumns: '1fr 1fr',
+	gap: 6,
+	padding: 8,
+}
+
+const actionBtn: React.CSSProperties = {
+	textAlign: 'left',
+	display: 'flex',
+	gap: 10,
+	alignItems: 'center',
+	padding: '9px 11px',
+	border: '1px solid var(--border)',
+	borderRadius: 8,
+	background: 'var(--panel)',
+	cursor: 'pointer',
+}
+
+const resultPane: React.CSSProperties = {
+	margin: '0 8px 8px',
+	padding: '10px 12px',
+	border: '1px solid var(--border-soft)',
+	borderRadius: 8,
+	background: 'var(--field)',
+}
+
+const resultHeader: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	marginBottom: 4,
+}
+
+const preResult: React.CSSProperties = {
+	fontSize: 12,
+	color: 'var(--ink)',
+	whiteSpace: 'pre-wrap',
+	wordBreak: 'break-word',
+	margin: 0,
+	lineHeight: 1.6,
+}
+
+const applyBtn: React.CSSProperties = {
+	padding: '5px 12px',
+	fontSize: 12,
+	fontWeight: 600,
+	border: '1px solid var(--accent)',
+	borderRadius: 6,
+	background: 'transparent',
+	color: 'var(--accent)',
+	cursor: 'pointer',
+}
+
+const errorBanner: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 6,
+	margin: '0 8px 8px',
+	padding: '8px 10px',
+	background: 'var(--red-tint)',
+	border: '1px solid var(--red)',
+	borderRadius: 6,
+}