@jxsuite/studio 0.32.0 → 0.34.0

package/src/panels/tab-bar.ts

@@ -1,20 +1,23 @@
 /// <reference lib="dom" />
 /**
- * Tab bar — a per-tab contextual action bar rendered between the tab strip and the edit content.
- * Standardizes Back/breadcrumb navigation, media feature toggles, and mode actions (Code-mode
- * Export) into a single bar shared identically by every edit mode.
+ * Tab bar — a persistent per-tab settings bar rendered between the tab strip and the edit content.
+ * Standardizes Back/breadcrumb navigation, the view settings cluster (preview toggle, layout
+ * visibility, dynamic route-param pickers — shown in the edit/design base modes), media feature
+ * toggles, and mode actions (Code-mode Export) into a single bar shared by every edit mode.
  *
  * Follows the same module shape as tab-strip.ts: mount(host, ctx) → effectScope/effect → render().
- * The bar collapses (renders `nothing`, so `#tab-bar:empty` hides the row) when there is nothing
- * contextual to show.
+ * The bar renders `nothing` (so `#tab-bar:empty` hides the row) only when no tab is active.
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { updateUi } from "../store";
+import { projectState, updateUi } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
-import { getEffectiveMedia } from "../site-context";
+import { getEffectiveLayoutPath, getEffectiveMedia } from "../site-context";
+import { dynamicRouteParams, loadParamValues, pagePathsDef } from "../page-params";
 import { mediaDisplayName } from "./shared";
+import type { ParamValues } from "../page-params";
+import type { Tab } from "../tabs/tab";
 import type { DocumentStackEntry, FunctionEditDef } from "../types";
 import type { EffectScope } from "@vue/reactivity";
 import type { TemplateResult } from "lit-html";
@@ -59,12 +62,16 @@ export function mount(host: HTMLElement, ctx: TabBarCtx) {
       if (tab) {
         // Read reactive properties to establish tracking — mirrors the toolbar's subset
         void tab.doc.document;
+        void tab.doc.document?.$layout;
         void tab.doc.mode;
         void tab.documentPath;
         void tab.session.documentStack.length;
         void tab.session.ui.canvasMode;
         void tab.session.ui.editingFunction;
         void tab.session.ui.featureToggles;
+        void tab.session.ui.preview;
+        void tab.session.ui.previewParams;
+        void tab.session.ui.showLayout;
       }
       render();
     });
@@ -143,6 +150,55 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
     `;
   }
 
+  // ── Right region: view settings cluster (edit/design base modes only) ──
+  // Gates on the BASE mode (not the effective mode): the cluster stays visible while the preview
+  // Toggle is on so it can be toggled back off.
+  const baseMode = S.ui.canvasMode;
+  const isPage = Boolean(
+    S.documentPath &&
+    projectState?.isSiteProject &&
+    (S.documentPath.startsWith("pages/") || S.documentPath.startsWith("./pages/")),
+  );
+  let settingsTpl: TemplateResult | typeof nothing = nothing;
+  if (!editing && (baseMode === "edit" || baseMode === "design")) {
+    const canPreview = tab.capabilities.modes.includes("preview");
+    const hasLayout = isPage && Boolean(getEffectiveLayoutPath(S.document?.$layout));
+    const pickersTpl = isPage ? paramPickersTpl(tab) : nothing;
+    const previewTpl = canPreview
+      ? html`
+          <sp-action-button
+            toggles
+            size="s"
+            title="Preview resolved values"
+            ?selected=${Boolean(S.ui.preview)}
+            @click=${() => updateUi("preview", !S.ui.preview)}
+          >
+            <sp-icon-preview slot="icon"></sp-icon-preview>
+            Preview
+          </sp-action-button>
+        `
+      : nothing;
+    const layoutTpl = hasLayout
+      ? html`
+          <sp-action-button
+            toggles
+            size="s"
+            title="Show layout elements"
+            ?selected=${S.ui.showLayout !== false}
+            @click=${() => updateUi("showLayout", S.ui.showLayout === false)}
+          >
+            Layout
+          </sp-action-button>
+        `
+      : nothing;
+    if (pickersTpl !== nothing || previewTpl !== nothing || layoutTpl !== nothing) {
+      settingsTpl = html`
+        ${pickersTpl}
+        <sp-action-group compact size="s">${layoutTpl} ${previewTpl}</sp-action-group>
+      `;
+    }
+  }
+
   // ── Right region: media feature toggles ──
   const { featureQueries } = ctx.parseMediaEntries(getEffectiveMedia(S.document?.$media));
   const togglesTpl =
@@ -183,16 +239,106 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
         `
       : nothing;
 
-  // Collapse the bar entirely when there is nothing contextual to show.
-  if (navTpl === nothing && togglesTpl === nothing && exportTpl === nothing) {
-    return nothing;
-  }
-
   return html`
     <div class="tab-bar">
       ${navTpl}
       <div class="tb-spacer"></div>
-      ${togglesTpl} ${exportTpl}
+      ${settingsTpl} ${togglesTpl} ${exportTpl}
     </div>
   `;
 }
+
+// ── Dynamic route-param pickers ──────────────────────────────────────────────
+// Candidate values load asynchronously (ContentCollection resolution / data-file read); the module
+// Caches the last result per (documentPath, $paths) and re-renders when it lands — the same lazy
+// Fill pattern as head-panel's loadLayoutEntries. When values arrive, any param without a chosen
+// Value auto-selects the first candidate (matching the compiler, whose first expanded route is the
+// First path entry).
+
+let _paramValues: ParamValues | null = null;
+
+let _paramValuesKey: string | null = null;
+
+/**
+ * @param {Tab} tab
+ * @returns {ParamValues | null} — null while loading (or when the doc declares no params)
+ */
+function paramValuesFor(tab: Tab): ParamValues | null {
+  const pathsDef = pagePathsDef({
+    document: tab.doc.document,
+    frontmatter: tab.doc.content.frontmatter,
+  });
+  if (!pathsDef && dynamicRouteParams(tab.documentPath).length === 0) {
+    return null;
+  }
+  const key = `${tab.documentPath ?? ""}::${JSON.stringify(pathsDef)}`;
+  if (_paramValuesKey === key) {
+    return _paramValues;
+  }
+  _paramValuesKey = key;
+  _paramValues = null;
+  void loadParamValues(tab.documentPath, pathsDef).then((values) => {
+    if (_paramValuesKey !== key || activeTab.value !== tab) {
+      return;
+    }
+    _paramValues = values;
+    autoSelectParams(tab, values);
+    render();
+  });
+  return _paramValues;
+}
+
+/**
+ * @param {Tab} tab
+ * @param {ParamValues} values
+ */
+function autoSelectParams(tab: Tab, values: ParamValues) {
+  const current = tab.session.ui.previewParams ?? {};
+  const additions: Record<string, string> = {};
+  for (const [name, list] of Object.entries(values)) {
+    if (!current[name] && list.length > 0) {
+      additions[name] = list[0]!;
+    }
+  }
+  if (Object.keys(additions).length > 0) {
+    updateUi("previewParams", { ...current, ...additions });
+  }
+}
+
+/**
+ * @param {Tab} tab
+ * @returns {TemplateResult | typeof nothing}
+ */
+function paramPickersTpl(tab: Tab): TemplateResult | typeof nothing {
+  const values = paramValuesFor(tab);
+  const names = new Set(dynamicRouteParams(tab.documentPath));
+  for (const name of Object.keys(values ?? {})) {
+    names.add(name);
+  }
+  if (names.size === 0) {
+    return nothing;
+  }
+  const { previewParams } = tab.session.ui;
+  return html`
+    ${[...names].map(
+      (name) => html`
+        <sp-picker
+          size="s"
+          quiet
+          class="tab-bar-param"
+          label=${name}
+          title=${`Preview value for [${name}]`}
+          value=${previewParams?.[name] ?? ""}
+          @change=${(e: Event) => {
+            const { value } = e.target as HTMLInputElement;
+            updateUi("previewParams", { ...tab.session.ui.previewParams, [name]: value });
+          }}
+        >
+          ${(values?.[name] ?? []).map(
+            (v: string) => html`<sp-menu-item value=${v}>${v}</sp-menu-item>`,
+          )}
+        </sp-picker>
+      `,
+    )}
+  `;
+}

package/src/panels/toolbar.ts

@@ -305,7 +305,6 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
 const modes = [
   { iconTag: "sp-icon-edit", key: "edit", label: "Edit" },
   { iconTag: "sp-icon-artboard", key: "design", label: "Design" },
-  { iconTag: "sp-icon-preview", key: "preview", label: "Preview" },
   { iconTag: "sp-icon-code", key: "source", label: "Code" },
   { iconTag: "sp-icon-brush", key: "stylebook", label: "Stylebook" },
 ];
@@ -333,7 +332,9 @@ function toolbarTemplate() {
     selection: tab.session.selection,
     ui: tab.session.ui,
   };
-  const canvasMode = ctx.getCanvasMode();
+  // Base mode, not the effective mode: the switcher keeps Edit/Design highlighted while the
+  // Tab-bar preview toggle is on (preview is no longer a switchable mode).
+  const { canvasMode } = tab.session.ui;
 
   const modeSwitcherTpl = html`
     <sp-action-group selects="single" size="s" compact>

package/src/platforms/devserver.ts

@@ -588,6 +588,21 @@ export function createDevServerPlatform() {
       return schema;
     },
 
+    // ─── Class resolution (dev-proxy) ─────────────────────────────────────
+
+    /** @param {Record<string, unknown>} body */
+    async resolveClass(body: Record<string, unknown>) {
+      const res = await fetch("/__jx_resolve__", {
+        body: JSON.stringify(body),
+        headers: { "content-type": "application/json" },
+        method: "POST",
+      });
+      if (!res.ok) {
+        throw new Error(`Class resolution failed: ${res.status}`);
+      }
+      return await readJson<unknown>(res);
+    },
+
     // ─── Git operations ──────────────────────────────────────────────────
 
     async gitStatus() {
@@ -793,54 +808,10 @@ export function createDevServerPlatform() {
       }
     },
 
-    // ─── AI Assistant ───────────────────────────────────
-
-    async aiAuthStatus() {
-      const res = await fetch("/__studio/ai/auth-status");
-      return await res.json();
-    },
-
-    /** @param {{ message: string; systemPrompt?: string }} opts */
-    async aiCreateSession(opts: { message: string; systemPrompt?: string }) {
-      const res = await fetch("/__studio/ai/session", {
-        body: JSON.stringify(opts),
-        headers: { "Content-Type": "application/json" },
-        method: "POST",
-      });
-      if (!res.ok) {
-        const body = await readJson<ErrorBody>(res);
-        throw new Error(body.error);
-      }
-      return await res.json();
-    },
-
-    /** @param {string} id @param {string} message */
-    async aiSendMessage(id: string, message: string) {
-      const res = await fetch(`/__studio/ai/session/${id}/message`, {
-        body: JSON.stringify({ message }),
-        headers: { "Content-Type": "application/json" },
-        method: "POST",
-      });
-      if (!res.ok) {
-        const body = await readJson<ErrorBody>(res);
-        throw new Error(body.error);
-      }
-      return await res.json();
-    },
-
-    /** @param {string} id */
-    aiStreamUrl(id: string) {
-      return `/__studio/ai/session/${id}/stream`;
-    },
-
-    /** @param {string} id */
-    async aiStopSession(id: string) {
-      await fetch(`/__studio/ai/session/${id}/stop`, { method: "POST" });
-    },
+    // ─── AI Assistant (Stack B: OpenAI-compatible SSE proxy) ───────────────────
 
-    /** @param {string} id */
-    async aiDeleteSession(id: string) {
-      await fetch(`/__studio/ai/session/${id}`, { method: "DELETE" });
+    aiChatUrl() {
+      return "/__studio/ai/chat";
     },
   };
 }

package/src/services/ai-settings.ts

@@ -0,0 +1,107 @@
+/// <reference lib="dom" />
+/**
+ * Ai-settings.js — local persistence for the AI assistant's provider settings.
+ *
+ * The Stack B proxy reads the OpenAI key from the `X-Api-Key` header (falling back to the server's
+ * `OPENAI_API_KEY` env var). Studio stores a user-supplied key in localStorage so the browser/dev
+ * build works without an env var. The key never leaves the machine except to the same-origin proxy.
+ *
+ * @license MIT
+ */
+
+const KEY_STORAGE = "jx.ai.openaiKey";
+const BASE_URL_STORAGE = "jx.ai.baseUrl";
+const MODEL_STORAGE = "jx.ai.model";
+const DEFAULT_MODEL = "gpt-4o";
+
+/** @returns {string} The stored OpenAI key, or "" if none/unavailable. */
+export function getOpenAiKey() {
+  try {
+    return globalThis.localStorage?.getItem(KEY_STORAGE) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Persist (or clear) the OpenAI key.
+ *
+ * @param {string} key - The key to store; an empty/blank value clears it.
+ */
+export function setOpenAiKey(key: string) {
+  try {
+    const trimmed = (key || "").trim();
+    if (trimmed) {
+      globalThis.localStorage?.setItem(KEY_STORAGE, trimmed);
+    } else {
+      globalThis.localStorage?.removeItem(KEY_STORAGE);
+    }
+  } catch {
+    /* LocalStorage unavailable — settings are not persisted. */
+  }
+}
+
+/** @returns {boolean} Whether a non-empty key is stored. */
+export function hasOpenAiKey() {
+  return getOpenAiKey().length > 0;
+}
+
+/**
+ * @returns {string} The OpenAI-compatible base URL override (e.g. a local LLM, OpenRouter, Azure),
+ *   or "" to use the proxy's default (`https://api.openai.com/v1` / server `OPENAI_BASE_URL`).
+ */
+export function getBaseUrl() {
+  try {
+    return globalThis.localStorage?.getItem(BASE_URL_STORAGE) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Persist (or clear) the base URL override.
+ *
+ * @param {string} url - The base URL; an empty/blank value clears the override.
+ */
+export function setBaseUrl(url: string) {
+  try {
+    const trimmed = (url || "").trim().replace(/\/+$/, "");
+    if (trimmed) {
+      globalThis.localStorage?.setItem(BASE_URL_STORAGE, trimmed);
+    } else {
+      globalThis.localStorage?.removeItem(BASE_URL_STORAGE);
+    }
+  } catch {
+    /* LocalStorage unavailable — settings are not persisted. */
+  }
+}
+
+// ─── Model selection ────────────────────────────────────────────────────────
+
+/** @returns {string} The stored model ID, or the default ("gpt-4o"). */
+export function getModel() {
+  try {
+    return globalThis.localStorage?.getItem(MODEL_STORAGE) || DEFAULT_MODEL;
+  } catch {
+    return DEFAULT_MODEL;
+  }
+}
+
+/**
+ * Persist the selected model ID.
+ *
+ * @param {string} modelId - The model ID to store; an empty/blank value clears it, reverting to
+ *   default.
+ */
+export function setModel(modelId: string) {
+  try {
+    const trimmed = (modelId || "").trim();
+    if (trimmed) {
+      globalThis.localStorage?.setItem(MODEL_STORAGE, trimmed);
+    } else {
+      globalThis.localStorage?.removeItem(MODEL_STORAGE);
+    }
+  } catch {
+    /* LocalStorage unavailable — settings are not persisted. */
+  }
+}