@unoverse-platform/studio 0.1.68 → 0.1.70

package/screens/TemplatesView.tsx

@@ -3,15 +3,15 @@
  * ⛔ THIS FILE IS NOT TO BE EDITED. ⛔
  *
  * Every single change in this file — and any change made on behalf of a
- * component or template that seems to need one here — MUST be confirmed by
+ * component or app that seems to need one here — MUST be confirmed by
  * Gavin first. No exceptions: not bug fixes, not one-liners, not reverts.
  * State the intended diff and wait for an explicit yes.
  *
- * Components and templates are DATA (design/). If a template seems to need code
+ * Components and apps are DATA (design/). If an app seems to need code
  * here, the answer is almost always to express it as data — or to ask.
  * ============================================================================
  *
- * Templates view — renders a TEMPLATE definition (layout) and fills its
+ * Apps view — renders an APP definition (layout) and fills its
  * ComponentSlots from a mock conversation seeded into the store.
  *
  * This is the visual proof of the slot system: select KeyService → its
@@ -23,7 +23,7 @@ import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from
 import { useAuth } from "react-oidc-context";
 import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
 import { ComponentStore } from "@unoverse/sdk";
-import { StreamedUnoverseTemplate, useUnoverseConnection, computeAppWidth, resolveActiveLayout, visible, type ResolvedTheme, type UseVoiceServiceConfig } from "@unoverse/sdk";
+import { StreamedUnoverseApp, useUnoverseConnection, computeAppWidth, resolveActiveLayout, visible, type ResolvedTheme, type UseVoiceServiceConfig } from "@unoverse/sdk";
 import { NativeAppHost } from "./NativeAppHost";
 import { inArrangement, viewOfSlice } from "./states";
 import { client, authedFetch, hasAuth, hasSourceAccess, UNOVERSE_BASE, liveUniverseUrl } from "studio-host";
@@ -80,36 +80,36 @@ interface Def {
   // The client org this app belongs to (server-injected) — names its theme (`<org>/light`).
   org?: string;
   description?: string;
-  // A native service the template binds (UNOVERSE_SPEC §2e-1) — e.g. "voice". The channel
-  // instantiates the matching service and feeds its neutral state + actions to the template.
+  // A native service the app binds (UNOVERSE_SPEC §2e-1) — e.g. "voice". The channel
+  // instantiates the matching service and feeds its neutral state + actions to the app.
   service?: string;
   props?: Record<string, PropDef>;
-  // Present when this template is an MCP app: the workflow it calls (from its manifest).
+  // Present when this app is an MCP app: the workflow it calls (from its manifest).
   binding?: { workflow?: string; trigger?: string };
   // true = on load, also fire the workflow (Mode B); false/absent = just load (Mode A).
   autoTrigger?: boolean;
   // MOCK-preview hint: the component(s) this app's workflow streams. When present, the
-  // mock seeds ONLY these (so a template previews the real app). Absent → seed NOTHING:
-  // the template renders its own default/welcome state (the default view), not a dump of
+  // mock seeds ONLY these (so the preview matches the real app). Absent → seed NOTHING:
+  // the app renders its own default/welcome state (the default view), not a dump of
   // the whole component catalog.
   previewComponents?: string[];
-  // Layout height mode. Absent/true = FLUID (the template fills the stage height — chat /
+  // Layout height mode. Absent/true = FLUID (the app fills the stage height — chat /
   // assistant / voice). false = size to CONTENT (the frame shrinks to the rendered
   // component — focused widget apps like Bank Transfer).
   fluidHeight?: boolean;
-  // The template's layer views, enumerated from its `states/` folder (UNOVERSE_LAYERS.md §7).
+  // The app's layer views, enumerated from its `states/` folder (UNOVERSE_LAYERS.md §7).
   // `when` = the state's root visibleWhen selector; `where` = a reaction-contract surface's
   // component-state selector (STATE_MODEL §5b) — the viewer lists AND activates by them.
   states?: { name: string; when?: unknown; where?: unknown }[];
-  // TEMPLATE LAYOUTS (name-sync, docs/design/05): the composed arrangements of a
-  // multi-layout template + its default. The viewer shows these as a pill row (the
-  // template-tier twin of a component's faces); activation = the same selector a
+  // APP LAYOUTS (name-sync, docs/design/05): the composed arrangements of a
+  // multi-layout app + its default. The viewer shows these as a pill row (the
+  // app-tier twin of a component's faces); activation = the same selector a
   // reaction surface uses (put a component into the view of the layout's name).
   layouts?: Record<string, unknown>;
   defaultLayout?: string;
   // The definition tree (components: used to resolve a state's Switch discriminant).
   root?: unknown;
-  // The full MCP-app manifest (present when the template folder carries manifest.json).
+  // The full MCP-app manifest (present when the app folder carries manifest.json).
   app?: {
     name: string;
     description?: string;
@@ -124,13 +124,13 @@ interface Def {
     // Per-STATE mock seeding: `{ "<state>": ["course-card", "course-card"] }` — the
     // author decides what each state's preview shows (a repeated name = several
     // instances). Supersedes the legacy flat `previewComponents`.
-    // Per-state mock: an ARRAY seeds components; an OBJECT is authored template-state
+    // Per-state mock: an ARRAY seeds components; an OBJECT is authored app-state
     // data (what the workflow would have echoed) merged verbatim on pick.
     preview?: Record<string, string[] | Record<string, unknown>>;
     previewComponents?: string[];
     fluidHeight?: boolean;
     // The app's named default state on load (the single authored field, OPEN name):
-    // "template" = fluid · "focus" = fit content + opens in focus on load · "component" =
+    // "app" = fluid · "focus" = fit content + opens in focus on load · "component" =
     // inline card · anything future. `fluidHeight` above is derived from it.
     // `mode` = pre-rename alias, read as fallback.
     defaultState?: string;
@@ -149,7 +149,7 @@ export function TemplatesView({
   theme: defaultTheme,
   themeName,
   org = "all",
-  // Templates open LIVE by default (Gavin, 2026-08-08): an app IS its live binding —
+  // Apps open LIVE by default (Gavin, 2026-08-08): an app IS its live binding —
   // Mock is the authoring affordance you step INTO (states are mock-only), not the
   // resting mode.
   defaultLive = true,
@@ -167,13 +167,13 @@ export function TemplatesView({
   const available = useRegistryToggles("template");
   const [templates, setTemplates] = useState<Def[]>([]);
   const [components, setComponents] = useState<Def[]>([]);
-  const [selected, setSelected] = usePersistentState<string | null>("wb:templates:selected", null);
-  // A fresh store per mode AND per app selection: a catch-all template accumulates
+  const [selected, setSelected] = usePersistentState<string | null>("wb:apps:selected", null);
+  // A fresh store per mode AND per app selection: a catch-all app accumulates
   // whatever's seeded, so switching apps must start clean (no stale components linger).
   // The active layer view (Storybook-style state picker). Recreating the store on change
   // starts it clean so the seed effect re-derives the state (UNOVERSE_LAYERS.md §7).
   const [activeState, setActiveState] = useState<{ name: string; when?: unknown; where?: unknown } | null>(null);
-  // Selecting a template lands on its FIRST state — the def's natural default (a voice
+  // Selecting an app lands on its FIRST state — the def's natural default (a voice
   // layout's idle, a chat layout's welcome). No synthetic "default" entry: the first
   // authored layer IS the default view.
   // The LAYOUT axis (multi-layout templates): the picked non-default layout pill, or
@@ -196,7 +196,7 @@ export function TemplatesView({
   useEffect(() => { if (live) { setActiveState(null); setActiveLayout(null); } }, [live]); // states are mock-only — clear when going live
   // PICKING a state = jump there and seed its preview scenario (seedKey forces a fresh
   // store). MOVING between states organically (clicking inside the preview) keeps the
-  // store — the template simply transitions, exactly like the runtime.
+  // store — the app simply transitions, exactly like the runtime.
   const [seedKey, setSeedKey] = useState(0);
   const store = useMemo(() => new ComponentStore(), [live, selected, seedKey]);
   // THE HOST'S JOB: the stage wrapper's width is DERIVED from component views
@@ -208,7 +208,7 @@ export function TemplatesView({
     useCallback(() => store.getVersion(), [store]),
   );
   const [seeded, setSeeded] = useState<string[]>([]);
-  const [metaOpen, setMetaOpen] = usePersistentState<boolean>("wb:templates:meta", false); // MCP details panel
+  const [metaOpen, setMetaOpen] = usePersistentState<boolean>("wb:apps:meta", false); // MCP details panel
   const [copiedUri, setCopiedUri] = useState(false);
   const [version, setVersion] = useState(0); // local bump to reflect store changes in the toolbar
   const [stageWidth, setStageWidth] = useState<number | null>(null); // default Full — testing should see the real channel width
@@ -315,10 +315,10 @@ export function TemplatesView({
     }),
     [liveBase, token],
   );
-  // The APP decides which workflow runs: the selected template's manifest binding
+  // The APP decides which workflow runs: the selected app's manifest binding
   // (workflow + trigger) drives the connection. No manual entry — MCP decides.
   const selectedDef = useMemo(() => templates.find((t) => t.name === selected), [templates, selected]);
-  // THE TEMPLATE'S ACTIVE STATE, derived live (docs/design/04: one state at a time —
+  // THE APP'S ACTIVE STATE, derived live (docs/design/04: one state at a time —
   // the latest surfaced view; else the conversation/welcome base). The nav highlights
   // THIS, not the picked seed: clicking a card inside the preview IS moving to the
   // other state, and Studio simply follows the same transition the runtime makes.
@@ -347,11 +347,11 @@ export function TemplatesView({
         }
       }
     if (view) return claims.get(view) ?? null;
-    // LOCAL states carry their own selector (`when`, a condition on template state —
+    // LOCAL states carry their own selector (`when`, a condition on app state —
     // railState/callState-style discriminants). Evaluate it with the RENDERER'S OWN
-    // predicate (`visible`, one condition semantics), against the template-state bag —
+    // predicate (`visible`, one condition semantics), against the app-state bag —
     // so a pill pick, a component's write, or a live workflow echo all light the same.
-    const ts = store.getTemplateState() as Record<string, unknown>;
+    const ts = store.getAppState() as Record<string, unknown>;
     const local = states.find((s) => s.when && typeof s.when === "object" && visible(s.when as Parameters<typeof visible>[0], ts));
     if (local) return local.name;
     const base = store.getTimeline().length === 0 ? "isEmpty" : "hasMessages";
@@ -432,18 +432,18 @@ export function TemplatesView({
     [canConnect, rawConn],
   );
 
-  // The workflow can OVERRIDE the manual pick (WORKFLOW_STARTED metadata.template →
-  // store.activeTemplate) with a BARE name — so the org must be resolved for whichever
-  // template is actually loading, not the picked one, or the resources/read goes out
-  // org-less and the server refuses it ("template address needs its org").
-  const activeName = conn.activeTemplate ?? selected;
+  // The workflow can OVERRIDE the manual pick (WORKFLOW_STARTED metadata.app →
+  // store.activeApp) with a BARE name — so the org must be resolved for whichever
+  // app is actually loading, not the picked one, or the resources/read goes out
+  // org-less and the server refuses it ("app address needs its org").
+  const activeName = conn.activeApp ?? selected;
   const activeDef = useMemo(
     () => (activeName === selected ? selectedDef : (templates.find((t) => t.name === activeName) ?? selectedDef)),
     [templates, activeName, selected, selectedDef],
   );
 
   // The `voice` native service (§2e-1) now lives INSIDE the SDK renderer (shared by every
-  // host — see StreamedUnoverseTemplate). The host only DECLARES the app is voice (off its
+  // host — see StreamedUnoverseApp). The host only DECLARES the app is voice (off its
   // manifest `service`) and hands the renderer the connection identity it already holds;
   // the renderer owns the service + answers startCall/endCall/toggleMute. No host wiring.
   const isVoice = selectedDef?.service === "voice";
@@ -463,8 +463,8 @@ export function TemplatesView({
               workflowId: session.workflowId,
               targetTriggerNode: session.targetTriggerNode,
             },
-            // Producer wiring (STATE_MODEL §4): the service writes its state into TEMPLATE
-            // STATE on this store — templates read callState/isMuted/… from the global bag.
+            // Producer wiring (STATE_MODEL §4): the service writes its state into APP
+            // STATE on this store — apps read callState/isMuted/… from the global bag.
             store,
           }
         : undefined,
@@ -472,7 +472,7 @@ export function TemplatesView({
   );
 
   // "Load the app → it calls its workflow" — but ONLY for apps with autoTrigger (Mode B).
-  // Mode A apps (autoTrigger false/absent) just load the template and wait. Fires once the
+  // Mode A apps (autoTrigger false/absent) just load the app and wait. Fires once the
   // live connection is ready, no user turn; resets on app/Live change so re-selecting re-runs.
   const [triggered, setTriggered] = useState(false);
   useEffect(() => setTriggered(false), [selected, live]);
@@ -544,7 +544,7 @@ export function TemplatesView({
   // ARRIVAL CONTRACT (STATE_MODEL §5b): a component streams in WITH its state already
   // set — the seed carries the def's `state` block (its initial values). EXCEPT
   // `defaultState`: in the preview the SELECTED STATE CHIP is the state controller —
-  // seeding always lands inline (the universal default), and the template's focus
+  // seeding always lands inline (the universal default), and the app's focus
   // state chip writes `focused` into the slice (the where-activation below), exactly
   // what a real arrival-in-focus or a component's own expand button would do.
   function seed(comps: Def[]) {
@@ -576,7 +576,7 @@ export function TemplatesView({
   }
 
   // Which components to mock for the current selection: ONLY an app's declared
-  // previewComponents. No declaration → seed nothing, so the template renders its own
+  // previewComponents. No declaration → seed nothing, so the app renders its own
   // default/welcome state (the default view) instead of a dump of the whole catalog.
   const seedSet = (tmpls: Def[], comps: Def[], sel: string | null): Def[] => {
     const t = tmpls.find((t) => t.name === sel);
@@ -593,15 +593,15 @@ export function TemplatesView({
     Promise.all([
       // The header's org scope filters the list ("all" → every org's apps, each
       // tagged); the selected app's org still picks its own preview theme.
-      // Components are SCOPED like the templates: an org sees "universal + its own".
+      // Components are SCOPED like the apps: an org sees "universal + its own".
       // Fetched unscoped, a cloned org's same-named component (design/lyceum cloned
       // from design/bpp → two bare `journey-finder`s) sat beside the original and
       // Mock seeding picked whichever listed first.
-      authedFetch(`/dev/templates${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`).then((r) => (r.ok ? r.json() : { templates: [] })),
+      authedFetch(`/dev/apps${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`).then((r) => (r.ok ? r.json() : { apps: [] })),
       authedFetch(`/dev/components${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`).then((r) => (r.ok ? r.json() : { components: [] })),
     ])
       .then(([t, c]) => {
-        const tl: Def[] = t.templates ?? [];
+        const tl: Def[] = t.apps ?? [];
         const cl: Def[] = c.components ?? [];
         setTemplates(tl);
         setComponents(cl);
@@ -626,17 +626,17 @@ export function TemplatesView({
     if (live || !components.length || !selected) return;
     const when = activeState?.when;
     // TWO AXES compose (name-sync, docs/design/05): the LAYOUT pill picks the surfaced
-    // view (seeds components into it) while the LOCAL state picks the template's own
+    // view (seeds components into it) while the LOCAL state picks the app's own
     // condition (callState, hasMessages) — any layout × any state. `activeLayout` is
     // the non-default layout pill, or null (default layout, no surfaced component).
     const layoutSel = activeLayout ? { field: "defaultState", eq: activeLayout } : undefined;
     // A picked state activates by its selector (UNOVERSE_LAYERS.md §7):
-    //  • "isEmpty"  → leave the store pristine (the template's empty/welcome layer)
+    //  • "isEmpty"  → leave the store pristine (the app's empty/welcome layer)
     //  • "hasMessages" / a component state / default → seed the mock conversation
-    //  • { field, eq } (template-state selector, e.g. defaultState="focus") → set it after seeding
+    //  • { field, eq } (app-state selector, e.g. defaultState="focus") → set it after seeding
     // An explicit preview entry for the state OVERRIDES all of it — the author decided.
     const previewMap = selectedDef?.app?.preview;
-    // An OBJECT preview entry is authored TEMPLATE-STATE mock data — what the workflow
+    // An OBJECT preview entry is authored APP-STATE mock data — what the workflow
     // would have echoed (comments, railState, an anchor) — merged as-is so a state's
     // pill previews with real content. Arrays keep the existing meaning: component seeds.
     const stateEntry = activeState ? previewMap?.[activeState.name] : undefined;
@@ -645,8 +645,8 @@ export function TemplatesView({
     const entry = Array.isArray(layoutEntry) ? layoutEntry : undefined;
     const wantEmpty = !entry && !activeLayout && typeof when === "string" && when === "isEmpty";
     // A COMPONENT is only seeded for a reaction-contract state (select.where) — the
-    // surface needs one to grab (Focus). Plain template states (welcome, conversation)
-    // preview the TEMPLATE's own chrome; a component in the transcript there is noise.
+    // surface needs one to grab (Focus). Plain app states (welcome, conversation)
+    // preview the APP's own chrome; a component in the transcript there is noise.
     const wantComponent = Boolean(layoutSel) || Boolean((activeState?.where as { field?: string } | undefined)?.field);
     let seededSet: Def[] = [];
     if (!wantEmpty) {
@@ -667,7 +667,7 @@ export function TemplatesView({
       if (set.length || activeState) {
         // An autoTrigger app launches by RAW trigger — nothing prints to the
         // conversation (protocol §launch-from-UI). The mock mirrors it: components
-        // seed without the synthetic user turn, so a template that renders user turns
+        // seed without the synthetic user turn, so an app that renders user turns
         // outside a chat (a review pile) never shows "Show me this app" as content.
         if (!selectedDef?.app?.autoTrigger) store.addUserMessage(chatIdFor(selected ?? "app"), "Show me this app");
         // Component states need a body to grab; app declares no previewComponents →
@@ -685,13 +685,13 @@ export function TemplatesView({
     }
     if (when && typeof when === "object" && "field" in (when as object)) {
       const c = when as { field: string; eq?: unknown };
-      store.mergeTemplateState({ [c.field]: c.eq ?? true });
+      store.mergeAppState({ [c.field]: c.eq ?? true });
     } else if (typeof when === "string" && when !== "isEmpty" && when !== "hasMessages") {
-      store.mergeTemplateState({ [when]: true });
+      store.mergeAppState({ [when]: true });
     }
-    // Authored template-state mock (object preview entry) — merged AFTER the selector so
+    // Authored app-state mock (object preview entry) — merged AFTER the selector so
     // the author's data wins (it may refine the same keys, e.g. railState + comments).
-    if (stateData) store.mergeTemplateState(stateData);
+    if (stateData) store.mergeAppState(stateData);
     // Reaction-contract activation (STATE_MODEL §5b): the surface (or the layout pill —
     // same selector) reacts to COMPONENT state, so activate it the way the runtime
     // does — put a seeded component INTO that view. Same write the component's own
@@ -716,7 +716,7 @@ export function TemplatesView({
       <nav className={NAV}>
         <div className={NAV_SECTION}>Apps</div>
         {templates.length === 0 && (
-          <div className="p-2 text-xs text-gray-400">No apps yet — add one under design/&lt;project&gt;/templates/.</div>
+          <div className="p-2 text-xs text-gray-400">No apps yet — add one under design/&lt;project&gt;/apps/.</div>
         )}
         {templates.map((t) => (
           <div key={`${t.org ?? ""}/${t.name}`}>
@@ -732,7 +732,7 @@ export function TemplatesView({
                 </span>
               )}
             </button>
-            {/* The template's LOCAL states — its states/ folder. STATE MODEL v2: these
+            {/* The app's LOCAL states — its states/ folder. STATE MODEL v2: these
                 are PRIVATE SUBSTATES of the BASE arrangement (welcome/conversation guard
                 inside main's chrome), never states of a reaction arrangement — so they
                 list ONLY while the base pill (Main) is active. Reaction states get the
@@ -765,8 +765,8 @@ export function TemplatesView({
       <div className="flex min-h-0 min-w-0 flex-col">
         {/* toolbar */}
         <div className="flex items-center gap-3 border-b px-4 py-2 text-[11px]" style={{ borderColor: theme.color["border.subtle"], color: theme.color["text.secondary"], background: theme.color["surface.base"] }}>
-          <span className="font-medium uppercase tracking-wider opacity-60">{selected ?? "template"}</span>
-          {/* TEMPLATE LAYOUTS (name-sync) — the faces pill row, template tier: the default
+          <span className="font-medium uppercase tracking-wider opacity-60">{selected ?? "app"}</span>
+          {/* APP LAYOUTS (name-sync) — the faces pill row, app tier: the default
               layout first, then each named layout. Picking one runs the SAME activation a
               reaction surface uses (its served `where` selector seeds a component into the
               view of that name), so the preview machinery needs zero special-casing. */}
@@ -948,7 +948,7 @@ export function TemplatesView({
           <span className="tabular-nums" style={{ color: theme.color["text.tertiary"] }}>{stageWidth ? `${stageWidth}px` : "100%"}</span>
         </div>
 
-        {/* MCP APP DETAILS — the selected template's manifest (discovery meta + binding). */}
+        {/* MCP APP DETAILS — the selected app's manifest (discovery meta + binding). */}
         {metaOpen && selected && (() => {
           const app = selectedDef?.app;
           const accent = theme.color["action.primary"] ?? "#6366f1";
@@ -964,7 +964,7 @@ export function TemplatesView({
                 { label: "Trigger", value: app.binding?.trigger || "—", mono: true },
                 { label: "Auto-trigger", value: app.autoTrigger ? "On load" : "On message", dot: app.autoTrigger ? ok : muted },
                 { label: "Layout", value: selected, mono: true },
-                { label: "Default state", value: (() => { const v = app.defaultState ?? app.mode ?? "template"; return v.charAt(0).toUpperCase() + v.slice(1); })(), dot: (app.defaultState ?? app.mode ?? "template") === "template" ? ok : muted },
+                { label: "Default state", value: (() => { const v = app.defaultState ?? app.mode ?? "app"; return v.charAt(0).toUpperCase() + v.slice(1); })(), dot: (app.defaultState ?? app.mode ?? "app") === "app" ? ok : muted },
                 { label: "Input params", value: Object.keys(((app.inputSchema as { properties?: Record<string, unknown> })?.properties) ?? {}).join(", ") || "—", mono: true },
               ]
             : [];
@@ -1038,7 +1038,7 @@ export function TemplatesView({
                     {initials}
                   </div>
                   <div className="text-[13px] leading-relaxed" style={{ color: sub }}>
-                    <span className="font-semibold" style={{ color: theme.color["text.primary"] }}>Plain template</span> — not yet a discoverable MCP app.
+                    <span className="font-semibold" style={{ color: theme.color["text.primary"] }}>Plain app</span> — not yet a discoverable MCP app.
                     <br />Add a <code className="rounded px-1 font-mono text-[11px]" style={{ background: theme.color["surface.sunken"] }}>manifest.json</code> beside{" "}
                     <code className="rounded px-1 font-mono text-[11px]" style={{ background: theme.color["surface.sunken"] }}>{selected.toLowerCase()}.json</code> to give it a name, description, and workflow binding.
                   </div>
@@ -1048,13 +1048,13 @@ export function TemplatesView({
           );
         })()}
 
-        {/* STAGE — templates are full-screen layouts; render in a centered device frame */}
+        {/* STAGE — apps are full-screen layouts; render in a centered device frame */}
         <section className="flex min-h-0 flex-1 justify-center overflow-auto p-6 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden" style={{ background: theme.color["surface.sunken"] ?? "#f3f4f6" }} data-store-version={version} data-store-width={storeVersion}>
           {selected && (
             <div
-              // The host just provides the DEVICE BOX; the template's own layout DATA fills it
-              // (a template surface fills its container — see StreamedUnoverseTemplate). Per-
-              // template height mode (manifest `fluidHeight`, default true): FLUID gives a
+              // The host just provides the DEVICE BOX; the app's own layout DATA fills it
+              // (an app surface fills its container — see StreamedUnoverseApp). Per-
+              // app height mode (manifest `fluidHeight`, default true): FLUID gives a
               // full-height box (chat/voice fill it); CONTENT gives an auto-height box that
               // wraps the rendered component (widget apps like Bank Transfer) — `self-start`
               // so the flex stage doesn't stretch it.
@@ -1098,26 +1098,26 @@ export function TemplatesView({
                 <NativeAppHost
                   server={UNOVERSE_BASE || liveBase}
                   token={token}
-                  templateId={`${selectedDef?.org ? `${selectedDef.org}/` : ""}${selected ?? ""}`}
+                  appId={`${selectedDef?.org ? `${selectedDef.org}/` : ""}${selected ?? ""}`}
                   userId={session.userId}
                   conversationId={session.conversationId}
                   onStatus={setNativeStatus}
                 />
               ) : !activeDef && templates.length === 0 ? (
-                /* The workflow can announce its template BEFORE /dev/templates answers.
+                /* The workflow can announce its app BEFORE /dev/apps answers.
                    Reading it org-less is a guaranteed server refusal, so hold one beat
                    until the list arrives and the org can be resolved. */
                 null
               ) : (
-              <StreamedUnoverseTemplate
+              <StreamedUnoverseApp
                 client={client}
                 store={store}
-                // The workflow can SELECT the template (WORKFLOW_STARTED metadata.template →
-                // store.activeTemplate); that overrides the manual pick. Loaded via the
-                // official resources/read unoverse://templates/{name} (templates = MCP apps).
-                uri={`unoverse://templates/${activeDef?.org ? `${activeDef.org}/` : ""}${activeName}`}
+                // The workflow can SELECT the app (WORKFLOW_STARTED metadata.app →
+                // store.activeApp); that overrides the manual pick. Loaded via the
+                // official resources/read unoverse://apps/{org}/{name}/definition.
+                uri={`unoverse://apps/${activeDef?.org ? `${activeDef.org}/` : ""}${activeName}/definition`}
                 theme={theme}
-                // Voice state arrives via TEMPLATE STATE (the service is a producer inside
+                // Voice state arrives via APP STATE (the service is a producer inside
                 // the renderer); startCall/endCall/toggleMute are answered there too.
                 props={undefined}
                 voice={voiceConfig}
@@ -1179,11 +1179,11 @@ export function TemplatesView({
                       console.error("[workbench] app launch: no binding for", appRef);
                       return;
                     }
-                    // Write the app's declared default state (open NAME) into template state
-                    // on load — templates branch on `defaultState` by name. "template" apps
-                    // ARE the surface, so there's nothing to write.
-                    const declared = target?.app?.defaultState ?? target?.app?.mode ?? "template";
-                    if (declared !== "template") store.mergeTemplateState({ defaultState: declared });
+                    // Write the app's declared default state (open NAME) into app state
+                    // on load — apps branch on `defaultState` by name. An "app" app IS the
+                    // surface, so there's nothing to write.
+                    const declared = target?.app?.defaultState ?? target?.app?.mode ?? "app";
+                    if (declared !== "app") store.mergeAppState({ defaultState: declared });
                     if (live) conn.trigger({ app: appRef, metadata: { targetTriggerNode: b.trigger } });
                     else console.warn("[workbench] app launch is LIVE-only (mock has no workflow):", appRef);
                     return;

package/screens/chrome.ts

@@ -42,7 +42,7 @@ export const NAV_SECTION = "px-2 py-1 text-[10px] font-semibold uppercase tracki
  * SELECTION STATE ONLY, never layout.
  *
  * The navigators legitimately differ in row geometry — a Skills row is two lines, a
- * Templates row is a flex row with a chip, a Components row opens a state tree — and
+ * Apps row is a flex row with a chip, a Components row opens a state tree — and
  * flattening that into one class string would change row heights across five screens to
  * buy nothing. What must NOT differ is what "selected" looks like, and that is what these
  * return. Call sites keep their own layout classes and append one of these.

package/screens/states.ts

@@ -1,5 +1,5 @@
 /**
- * Layer resolution + state activation — shared by the Templates and Components views.
+ * Layer resolution + state activation — shared by the Apps and Components views.
  *
  * A component's `states/` files are its Switch-case layers: the state NAME is the
  * case key, and the Switch's `on` field is the discriminant that selects it
@@ -8,7 +8,7 @@
  *
  * SCOPE lives here too (UNOVERSE_LAYERS.md §3c): a layer belongs to the arrangement
  * that DRAWS it — a face's steps are the Switches on the component's own keys inside
- * that face; a template state belongs to the layouts whose trees carry its selector.
+ * that face; an app state belongs to the layouts whose trees carry its selector.
  * The structure is the declaration; both views derive, neither lists.
  */
 
@@ -100,7 +100,7 @@ export function discriminantFor(root: unknown, stateName: string): string | null
 export function stateActivation(root: unknown, state: { name: string; when?: unknown }): Record<string, unknown> | null {
   const disc = discriminantFor(root, state.name);
   if (disc) return { [disc]: state.name };
-  // Fallback: a state file that carries its own `visibleWhen` selector (template-style).
+  // Fallback: a state file that carries its own `visibleWhen` selector (app-style).
   const w = state.when;
   if (w && typeof w === "object" && typeof (w as { field?: unknown }).field === "string") {
     const c = w as { field: string; eq?: unknown };

package/src/App.tsx

@@ -23,17 +23,27 @@ import { NewProject } from "./NewProject";
 // Local-only screens. Nodes are AUTHORED and TESTED here and nowhere else: Canvas keeps
 // the node library (using nodes), the marketplace acquires them (a universe's job).
 import { NodesView } from "./NodesView";
+import {
+  Atom,
+  Boxes,
+  LayoutDashboard,
+  Palette,
+  Sparkles,
+  SquareDashed,
+  TextQuote,
+  type LucideIcon,
+} from "lucide-react";
 
 type View = "apps" | "components" | "atoms" | "tokens" | "skills" | "prompts" | "nodes";
 
-const NAV: { key: View; label: string; group: string }[] = [
-  { key: "apps", label: "Apps", group: "Build" },
-  { key: "components", label: "Components", group: "Build" },
-  { key: "atoms", label: "Atoms", group: "Build" },
-  { key: "tokens", label: "Styles", group: "Build" },
-  { key: "skills", label: "Skills", group: "AI" },
-  { key: "prompts", label: "Prompt Blocks", group: "AI" },
-  { key: "nodes", label: "Nodes", group: "Code" },
+const NAV: { key: View; label: string; group: string; Icon: LucideIcon }[] = [
+  { key: "apps", label: "Apps", group: "Build", Icon: LayoutDashboard },
+  { key: "components", label: "Components", group: "Build", Icon: SquareDashed },
+  { key: "atoms", label: "Atoms", group: "Build", Icon: Atom },
+  { key: "tokens", label: "Styles", group: "Build", Icon: Palette },
+  { key: "skills", label: "Skills", group: "AI", Icon: Sparkles },
+  { key: "prompts", label: "Prompt Blocks", group: "AI", Icon: TextQuote },
+  { key: "nodes", label: "Nodes", group: "Code", Icon: Boxes },
 ];
 
 /**
@@ -112,10 +122,11 @@ function Shell() {
             <button
               key={n.key}
               onClick={() => setView(n.key)}
-              className={`rounded px-2.5 py-1 text-xs font-medium transition ${
+              className={`flex items-center gap-1.5 rounded px-2.5 py-1 text-xs font-medium transition ${
                 view === n.key ? "bg-white/10 text-gray-100" : "text-gray-400 hover:text-gray-200"
               }`}
             >
+              <n.Icon className="size-3.5" strokeWidth={1.75} aria-hidden />
               {n.label}
             </button>
           ))}

package/src/NewProject.tsx

@@ -51,7 +51,7 @@ export function NewProject({
       >
         <h2 className="text-base font-semibold text-gray-100">New project</h2>
         <p className="mt-1 text-xs text-gray-500">
-          Creates design/&lt;name&gt;/ with components, styles and templates, and one component to
+          Creates design/&lt;name&gt;/ with components, styles and apps, and one component to
           open on.
         </p>
 

package/src/host.ts

@@ -28,7 +28,7 @@ export const hasAuth = false;
  * the connect button. That chrome is gone (LOCAL_STUDIO.md §Publish is terminal-only) —
  * and reading the stale localStorage value after removing the UI left Live mode aimed
  * at a universe nobody could change or clear, failing with that universe's errors
- * (seen live: "Unknown Unoverse template" from a universe the app was never published
+ * (seen live: "Unknown Unoverse app" from a universe the app was never published
  * to). So local Studio's Live preview targets the local dev platform, full stop.
  * Pointing Live at the workspace's own universe (unoverse.yaml) is future work and
  * will come from the workspace, not from a browser store.
@@ -73,7 +73,7 @@ class LocalUnoverseClient {
    * (`template.tsx` → `client.serverOrigin.replace(/^http/, "ws")`). This class is a
    * duck-typed stand-in for that client, so a member it does not implement is not a missing
    * feature, it is a CRASH at render: reading `.replace` of undefined took the whole
-   * Studio page down the moment a template carrying a voice config was previewed.
+   * Studio page down the moment an app carrying a voice config was previewed.
    *
    * Studio's own origin is the honest answer. Nothing is listening on `/ws/gravity` here,
    * so voice fails when it tries to CONNECT, which is a message about needing a universe