feat: appbar pickers, multi-agent personas, threads, library, profile
Adds a substantial chrome layer atop the bare template: Appbar - Font-size picker (root font-size scale): S/M/L/XL - Surface picker: tints --background/--card/--popover/--sidebar/--muted/ --secondary/--accent across light + dark - Background picker: 11 atmospheric gradients (Pearl, Linen, Mist, Dawn, Seafoam, Aurora, Sunset, Meadow, Midnight, Blush, Noir) + None - Vivid foreground tokens for stronger text contrast; fixed dark-mode blue-on-blue user bubble (deeper --primary, near-white --primary-fg) Assistant route - Multi-agent personas (~/lib/agents.ts): Atlas, Forge, Inkwell, Pilot, Cursor — each with name/role/sub-prompt; per-thread persona; agent picker with avatar tint + handoff submenu - Conversation threads (~/lib/threads.ts): new/switch/rename/delete, auto-titling from first user message, per-thread pinned indices - Compact summarization with snapshot-based Restore that preserves pinned messages verbatim - Edit & retry the last user message, Regenerate, Continue, Show system prompt, Copy / Export Markdown, Save to Library, Compare across agents (parallel completions in a side-by-side modal) - Per-message Pin / Read aloud (Web Speech) / Edit - Voice input via Web Speech Recognition - Two-column Actions popover (UI Control + Conversation / Share / Multi-agent / Clear sections) - Status bar: connection dot + LOCAL/API/MOCK chip + host chip + context progress bar - Compactly named threads picker; New conversation - DropdownMenuItem onSelect → onClick (base-ui Menu fires onClick) Library - ~/lib/library.ts store, /library route with search + detail panel (Copy / Download / Delete) Profile - /profile route + ~/lib/profile.ts (name/email/title/bio/signature/ avatar dataURL/default agent), AppShell uses live profile for the appbar avatar; account menu now navigates to /profile Settings - Sub-sidenav (LLM / Agents / Appearance / Account / About) - Editable system prompt with reset-to-default - Agents CRUD panel - Reorganized layout UI Control - Static action catalog in the system prompt so the assistant can drive controls on routes that aren't currently mounted - Always returns to /assistant after a UI Control sequence (model- side rule + deterministic safety net) - Cursor uses click-nav over direct navigate so the virtual cursor is visibly involved - New ids tagged across the app (sidebar, settings, profile, library, assistant tools, agent handoff, thread management) Hydration - root.tsx: suppressHydrationWarning on html/body since the pre-mount script sets dark/data-bg/data-surface/data-font-scale before React Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
jules
153
app/lib/agents.ts
Normal file
153
app/lib/agents.ts
Normal file
@@ -0,0 +1,153 @@
|
||||
// Agent personas — named, role-scoped sub-system prompts.
|
||||
// Each persona stacks on top of the main systemPrompt to specialize the
|
||||
// assistant for a task. Persisted in localStorage; reactive across tabs.
|
||||
|
||||
import { useEffect, useSyncExternalStore } from "react"
|
||||
|
||||
export type Agent = {
|
||||
id: string
|
||||
name: string
|
||||
role: string
|
||||
prompt: string
|
||||
}
|
||||
|
||||
export const DEFAULT_AGENTS: Agent[] = [
|
||||
{
|
||||
id: "generalist",
|
||||
name: "Atlas",
|
||||
role: "Generalist",
|
||||
prompt:
|
||||
"You handle anything: chat, planning, summaries, casual questions. Match the user's tone. Keep replies as long as the task deserves — terse for quick questions, detailed when explaining.",
|
||||
},
|
||||
{
|
||||
id: "coder",
|
||||
name: "Forge",
|
||||
role: "Software engineer",
|
||||
prompt:
|
||||
"You are a senior software engineer. Write idiomatic, well-typed code. Prefer concrete examples over abstract advice. When asked to fix a bug, identify root cause before patching. Use markdown code blocks with language tags. Mention edge cases briefly when relevant.",
|
||||
},
|
||||
{
|
||||
id: "writer",
|
||||
name: "Inkwell",
|
||||
role: "Writer",
|
||||
prompt:
|
||||
"You are a prose writer. Produce vivid, well-paced text — short stories, copy, emails, essays. Vary sentence length. Show, don't tell. When the user asks for a draft, deliver the draft, not a description of it.",
|
||||
},
|
||||
{
|
||||
id: "researcher",
|
||||
name: "Pilot",
|
||||
role: "Researcher",
|
||||
prompt:
|
||||
"You are a careful researcher. Structure answers as: claim → evidence → caveat. Distinguish what is well-established from what is uncertain. Refuse to fabricate citations — if you don't know, say so.",
|
||||
},
|
||||
{
|
||||
id: "ui-driver",
|
||||
name: "Cursor",
|
||||
role: "UI Operator",
|
||||
prompt:
|
||||
"You specialize in driving this app's UI on the user's behalf. Prefer doing over explaining. When the user asks for an action, emit an action block immediately. When they ask a question about the app, answer concisely and offer to do it.",
|
||||
},
|
||||
]
|
||||
|
||||
const STORAGE_KEY = "crema.agents"
|
||||
const ACTIVE_KEY = "crema.assistant.activeAgent"
|
||||
const CHANGE_EVENT = "crema:agents-change"
|
||||
|
||||
function isAgent(v: unknown): v is Agent {
|
||||
return (
|
||||
!!v &&
|
||||
typeof v === "object" &&
|
||||
typeof (v as Agent).id === "string" &&
|
||||
typeof (v as Agent).name === "string" &&
|
||||
typeof (v as Agent).role === "string" &&
|
||||
typeof (v as Agent).prompt === "string"
|
||||
)
|
||||
}
|
||||
|
||||
function readFromStorage(): Agent[] {
|
||||
if (typeof window === "undefined") return DEFAULT_AGENTS
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (!raw) return DEFAULT_AGENTS
|
||||
const parsed = JSON.parse(raw)
|
||||
if (!Array.isArray(parsed)) return DEFAULT_AGENTS
|
||||
const cleaned = parsed.filter(isAgent)
|
||||
return cleaned.length > 0 ? cleaned : DEFAULT_AGENTS
|
||||
} catch {
|
||||
return DEFAULT_AGENTS
|
||||
}
|
||||
}
|
||||
|
||||
export function loadAgents(): Agent[] {
|
||||
return readFromStorage()
|
||||
}
|
||||
|
||||
export function saveAgents(next: Agent[]) {
|
||||
if (typeof window === "undefined") return
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
|
||||
window.dispatchEvent(new CustomEvent(CHANGE_EVENT))
|
||||
}
|
||||
|
||||
export function resetAgents() {
|
||||
saveAgents(DEFAULT_AGENTS)
|
||||
}
|
||||
|
||||
let cached: Agent[] | null = null
|
||||
|
||||
function subscribe(cb: () => void): () => void {
|
||||
const onChange = () => {
|
||||
cached = null
|
||||
cb()
|
||||
}
|
||||
window.addEventListener(CHANGE_EVENT, onChange)
|
||||
window.addEventListener("storage", (e) => {
|
||||
if (e.key === STORAGE_KEY || e.key === ACTIVE_KEY) onChange()
|
||||
})
|
||||
return () => {
|
||||
window.removeEventListener(CHANGE_EVENT, onChange)
|
||||
}
|
||||
}
|
||||
|
||||
function getSnapshot(): Agent[] {
|
||||
if (!cached) cached = readFromStorage()
|
||||
return cached
|
||||
}
|
||||
|
||||
function getServerSnapshot(): Agent[] {
|
||||
return DEFAULT_AGENTS
|
||||
}
|
||||
|
||||
export function useAgents(): Agent[] {
|
||||
const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
|
||||
useEffect(() => {
|
||||
cached = null
|
||||
}, [])
|
||||
return value
|
||||
}
|
||||
|
||||
export function loadActiveAgentId(): string {
|
||||
if (typeof window === "undefined") return DEFAULT_AGENTS[0].id
|
||||
try {
|
||||
return localStorage.getItem(ACTIVE_KEY) ?? DEFAULT_AGENTS[0].id
|
||||
} catch {
|
||||
return DEFAULT_AGENTS[0].id
|
||||
}
|
||||
}
|
||||
|
||||
export function saveActiveAgentId(id: string) {
|
||||
if (typeof window === "undefined") return
|
||||
localStorage.setItem(ACTIVE_KEY, id)
|
||||
window.dispatchEvent(new CustomEvent(CHANGE_EVENT))
|
||||
}
|
||||
|
||||
export function composeSystemPrompt(
|
||||
base: string,
|
||||
agent: Agent | undefined,
|
||||
): string {
|
||||
if (!agent) return base
|
||||
return `${base}\n\nActive persona: ${agent.name} — ${agent.role}\n${agent.prompt}`
|
||||
}
|
||||
|
||||
export function newAgentId(): string {
|
||||
return `agent-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`
|
||||
}
|
||||
Reference in New Issue
Block a user