feat: initial commit — crema-app-aifirst-template

Hybrid traditional + AI-first webapp scaffold. Sibling to crema-app-template,
adds the AI assistant surface, command bus, scripts dialog, and virtual
cursor.

What's pre-wired:
- 6 routes: Overview, Resources, Activity, Assistant, Library, Settings
- Collapsible rail + appbar + avatar dropdown shell (template code, not a lib)
- Mobile sheet at <md
- /assistant: streaming chat via @crema/llm-ui, mock fallback, model selector,
  token meter, retry probe, stop-while-streaming, persistent UI Control toggle
- /settings: editable LM Studio endpoint + context window + response cap, with
  test-connection button
- Markdown rendering for assistant replies; ```action``` blocks rendered as a
  small "Ran N actions" pill
- ⌘⇧P script runner dialog + Play icon in the appbar
- Two demo scripts in public/scripts/
- mightypix theme as default, scoped via <AppShell theme="mightypix">

Libs wired in tsconfig + app.css:
- @crema/action-bus (the bus, parser, runner, cursor, provider, ws, llm-bridge)
- @crema/llm-ui, @crema/chat-ui, @crema/aifirst-ui, @crema/notification-ui
- lib-theme-mightypix

Docs:
- README.md — pitch + quick start + structure
- docs/AI_FIRST.md — full system tour (data-action contract, bus, DSL, scripts,
  cursor, LLM integration)
- app/components/layout/THEME_CONTRACT.md — every CSS variable a theme must declare
- CLAUDE.md — orientation for an LLM working in the repo

Genericized from comfy-cloud (the original prototype):
- Brand defaults to "App" / Sparkles icon (override via app/lib/identity.ts)
- User defaults to a stub (swap useUser() for real auth)
- localStorage namespace is "crema.*" (was "comfy.*")

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/lib/identity.ts

@@ -0,0 +1,40 @@
+// Project identity — brand and user. Hooks return module-singleton defaults
+// so routes don't have to thread props. Swap the constants below for your
+// project's brand; swap useUser() for a real session hook when you wire auth.
+
+import { Sparkles, type LucideIcon } from "lucide-react"
+
+export type Brand = {
+  name: string
+  icon: LucideIcon
+}
+
+export type User = {
+  name: string
+  email: string
+  initials: string
+}
+
+const brand: Brand = {
+  name: "App",
+  icon: Sparkles,
+}
+
+const currentUser: User = {
+  name: "Signed-in user",
+  email: "user@example.com",
+  initials: "U",
+}
+
+export function useBrand(): Brand {
+  return brand
+}
+
+export function useUser(): User {
+  return currentUser
+}
+
+/** Convenience for non-React modules (page meta, scripts, etc). */
+export function getBrand(): Brand {
+  return brand
+}

app/lib/llm-settings.ts

@@ -0,0 +1,90 @@
+// Persisted LLM settings — base URL, context budget, response cap.
+// Reactive across tabs (storage event) and within the same tab (custom event).
+
+import { useEffect, useSyncExternalStore } from "react"
+
+export type LLMSettings = {
+  baseURL: string
+  contextTokens: number
+  responseBudget: number
+}
+
+export const DEFAULT_SETTINGS: LLMSettings = {
+  baseURL: "http://localhost:1234/v1",
+  contextTokens: 9000,
+  responseBudget: 512,
+}
+
+const STORAGE_KEY = "crema.llm.settings"
+const CHANGE_EVENT = "comfy:llm-settings-change"
+
+function readFromStorage(): LLMSettings {
+  if (typeof window === "undefined") return DEFAULT_SETTINGS
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return DEFAULT_SETTINGS
+    const parsed = JSON.parse(raw) as Partial<LLMSettings>
+    return {
+      baseURL: typeof parsed.baseURL === "string" ? parsed.baseURL : DEFAULT_SETTINGS.baseURL,
+      contextTokens:
+        Number.isFinite(parsed.contextTokens) && (parsed.contextTokens as number) > 0
+          ? (parsed.contextTokens as number)
+          : DEFAULT_SETTINGS.contextTokens,
+      responseBudget:
+        Number.isFinite(parsed.responseBudget) && (parsed.responseBudget as number) > 0
+          ? (parsed.responseBudget as number)
+          : DEFAULT_SETTINGS.responseBudget,
+    }
+  } catch {
+    return DEFAULT_SETTINGS
+  }
+}
+
+export function loadLLMSettings(): LLMSettings {
+  return readFromStorage()
+}
+
+export function saveLLMSettings(next: LLMSettings) {
+  if (typeof window === "undefined") return
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
+  window.dispatchEvent(new CustomEvent(CHANGE_EVENT))
+}
+
+export function resetLLMSettings() {
+  saveLLMSettings(DEFAULT_SETTINGS)
+}
+
+let cached: LLMSettings | 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) onChange()
+  })
+  return () => {
+    window.removeEventListener(CHANGE_EVENT, onChange)
+  }
+}
+
+function getSnapshot(): LLMSettings {
+  if (!cached) cached = readFromStorage()
+  return cached
+}
+
+function getServerSnapshot(): LLMSettings {
+  return DEFAULT_SETTINGS
+}
+
+export function useLLMSettings(): LLMSettings {
+  // useSyncExternalStore avoids hydration flicker and stays reactive.
+  const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+  // Re-read after mount to pick up localStorage on first client render.
+  useEffect(() => {
+    cached = null
+  }, [])
+  return value
+}

app/lib/page-meta.ts

@@ -0,0 +1,6 @@
+import { getBrand } from "./identity"
+
+/** Build a route's <title> as `${brand.name} · ${suffix}`. */
+export function pageTitle(suffix: string): { title: string }[] {
+  return [{ title: `${getBrand().name} · ${suffix}` }]
+}

app/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}