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/components/ui/code-block.tsx

@@ -0,0 +1,165 @@
+import { Check, Copy } from "lucide-react"
+import { useState, type ComponentProps } from "react"
+
+import { cn } from "~/lib/utils"
+
+function CodeBlock({
+  className,
+  children,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="code-block"
+      className={cn(
+        "overflow-hidden rounded-lg border bg-muted/30 font-mono text-sm",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+function CodeBlockHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="code-block-header"
+      className={cn(
+        "flex items-center justify-between border-b bg-muted/50 px-3 py-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockLang({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="code-block-lang"
+      className={cn(
+        "text-xs font-medium tracking-wide text-muted-foreground uppercase",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockCopyButton({
+  className,
+  value,
+  ...props
+}: Omit<ComponentProps<"button">, "onClick" | "children"> & { value: string }) {
+  const [copied, setCopied] = useState(false)
+
+  function handleCopy() {
+    navigator.clipboard.writeText(value).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    })
+  }
+
+  return (
+    <button
+      data-slot="code-block-copy"
+      type="button"
+      onClick={handleCopy}
+      className={cn(
+        "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+        "[&_svg]:size-3",
+        className
+      )}
+      {...props}
+    >
+      {copied ? <Check /> : <Copy />}
+      {copied ? "Copied" : "Copy"}
+    </button>
+  )
+}
+
+function CodeBlockContent({ className, ...props }: ComponentProps<"pre">) {
+  return (
+    <pre
+      data-slot="code-block-content"
+      className={cn("overflow-x-auto p-4 text-sm leading-relaxed", className)}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockKeyword({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="code-block-keyword"
+      className={cn("text-syntax-keyword", className)}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockString({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="code-block-string"
+      className={cn("text-syntax-string", className)}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockNumber({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="code-block-number"
+      className={cn("text-syntax-number", className)}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockComment({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="code-block-comment"
+      className={cn("text-syntax-comment italic", className)}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockFunction({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="code-block-function"
+      className={cn("text-syntax-function", className)}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockType({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="code-block-type"
+      className={cn("text-syntax-type", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  CodeBlock,
+  CodeBlockHeader,
+  CodeBlockLang,
+  CodeBlockCopyButton,
+  CodeBlockContent,
+  CodeBlockKeyword,
+  CodeBlockString,
+  CodeBlockNumber,
+  CodeBlockComment,
+  CodeBlockFunction,
+  CodeBlockType,
+}