@jxsuite/studio 0.19.0 → 0.20.0

package/src/new-project/new-project-modal.js

@@ -0,0 +1,204 @@
+/**
+ * New Project modal — guides the user through creating a new Jx project. Fields mirror the CLI
+ * scaffolder: name, description, url, adapter.
+ */
+
+import { html } from "lit-html";
+import { openModal } from "../ui/layers.js";
+import { getPlatform } from "../platform.js";
+
+/** @type {ReturnType<typeof openModal> | null} */
+let _handle = null;
+
+/**
+ * @type {{
+ *   name: string;
+ *   description: string;
+ *   url: string;
+ *   adapter: string;
+ *   directory: string;
+ * }}
+ */
+let _form = { name: "", description: "", url: "", adapter: "static", directory: "" };
+
+/** @type {string} */
+let _error = "";
+
+/** @type {boolean} */
+let _creating = false;
+
+/** @type {((result: { root: string; config: object } | null) => void) | null} */
+let _resolve = null;
+
+/**
+ * Open the New Project modal. Returns a promise that resolves with the created project info (or
+ * null if cancelled).
+ *
+ * @returns {Promise<{ root: string; config: object } | null>}
+ */
+export function openNewProjectModal() {
+  if (_handle) return Promise.resolve(null);
+  _form = { name: "", description: "", url: "", adapter: "static", directory: "" };
+  _error = "";
+  _creating = false;
+
+  return new Promise((resolve) => {
+    _resolve = resolve;
+    renderModal();
+  });
+}
+
+export function closeNewProjectModal() {
+  if (!_handle) return;
+  _handle.close();
+  _handle = null;
+  if (_resolve) {
+    _resolve(null);
+    _resolve = null;
+  }
+}
+
+function renderModal() {
+  const onInput =
+    (/** @type {"name" | "description" | "url" | "adapter" | "directory"} */ field) =>
+    (/** @type {Event} */ e) => {
+      _form[field] = /** @type {HTMLInputElement} */ (e.target).value;
+      if (field === "name" && !_form.directory) {
+        // Auto-derive directory slug from name while user hasn't manually typed one
+        _dirDerived = true;
+      }
+      if (_dirDerived && field === "name") {
+        _form.directory = _form.name
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .replace(/^-|-$/g, "");
+      }
+      if (field === "directory") _dirDerived = false;
+      renderModal();
+    };
+
+  const onAdapterChange = (/** @type {Event} */ e) => {
+    _form.adapter = /** @type {HTMLInputElement} */ (e.target).value;
+    renderModal();
+  };
+
+  const onSubmit = async () => {
+    if (!_form.name.trim()) {
+      _error = "Project name is required";
+      renderModal();
+      return;
+    }
+    if (!_form.directory.trim()) {
+      _form.directory = _form.name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
+    }
+
+    _creating = true;
+    _error = "";
+    renderModal();
+
+    try {
+      const platform = getPlatform();
+      const result = await platform.createProject(_form);
+      _creating = false;
+      if (_handle) {
+        _handle.close();
+        _handle = null;
+      }
+      if (_resolve) {
+        _resolve(result);
+        _resolve = null;
+      }
+    } catch (/** @type {unknown} */ e) {
+      _creating = false;
+      _error = /** @type {Error} */ (e).message;
+      renderModal();
+    }
+  };
+
+  const tpl = html`
+    <sp-underlay open @close=${closeNewProjectModal}></sp-underlay>
+    <div
+      class="new-project-modal"
+      @keydown=${(/** @type {KeyboardEvent} */ e) => {
+        if (e.key === "Escape") closeNewProjectModal();
+      }}
+    >
+      <div class="new-project-modal-header">
+        <h2 class="new-project-modal-title">New Project</h2>
+        <sp-action-button quiet size="s" @click=${closeNewProjectModal} title="Close">
+          <sp-icon-close slot="icon"></sp-icon-close>
+        </sp-action-button>
+      </div>
+      <div class="new-project-modal-body">
+        <label class="new-project-field">
+          <span class="new-project-label">Project Name *</span>
+          <sp-textfield
+            placeholder="My Site"
+            .value=${_form.name}
+            @input=${onInput("name")}
+            style="width: 100%"
+          ></sp-textfield>
+        </label>
+
+        <label class="new-project-field">
+          <span class="new-project-label">Directory</span>
+          <sp-textfield
+            placeholder="my-site"
+            .value=${_form.directory}
+            @input=${onInput("directory")}
+            style="width: 100%"
+          ></sp-textfield>
+        </label>
+
+        <label class="new-project-field">
+          <span class="new-project-label">Description</span>
+          <sp-textfield
+            placeholder="A short description of the site"
+            .value=${_form.description}
+            @input=${onInput("description")}
+            style="width: 100%"
+          ></sp-textfield>
+        </label>
+
+        <label class="new-project-field">
+          <span class="new-project-label">Production URL</span>
+          <sp-textfield
+            placeholder="https://example.com"
+            .value=${_form.url}
+            @input=${onInput("url")}
+            style="width: 100%"
+          ></sp-textfield>
+        </label>
+
+        <label class="new-project-field">
+          <span class="new-project-label">Deployment Adapter</span>
+          <sp-picker label="Adapter" .value=${_form.adapter} @change=${onAdapterChange}>
+            <sp-menu-item value="static">Static</sp-menu-item>
+            <sp-menu-item value="cloudflare-pages">Cloudflare Pages</sp-menu-item>
+            <sp-menu-item value="node">Node</sp-menu-item>
+            <sp-menu-item value="bun">Bun</sp-menu-item>
+          </sp-picker>
+        </label>
+
+        ${_error ? html`<div class="new-project-error">${_error}</div>` : ""}
+      </div>
+      <div class="new-project-modal-footer">
+        <sp-button variant="secondary" @click=${closeNewProjectModal}>Cancel</sp-button>
+        <sp-button variant="accent" ?disabled=${_creating} @click=${onSubmit}>
+          ${_creating ? "Creating…" : "Create Project"}
+        </sp-button>
+      </div>
+    </div>
+  `;
+
+  if (!_handle) {
+    _handle = openModal(tpl);
+  } else {
+    _handle.update(tpl);
+  }
+}
+
+let _dirDerived = true;

package/src/panels/activity-bar.js

@@ -31,7 +31,7 @@ export function unmount() {
   _scope = null;
 }
 
-const gitBranchIcon = (/** @type {any} */ s) => html`
+const gitBranchIcon = (/** @type {string} */ s) => html`
   <svg
     slot="icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -52,35 +52,37 @@ const gitBranchIcon = (/** @type {any} */ s) => html`
 `;
 
 /**
- * @param {any} tag
- * @param {any} size
+ * @param {string} tag
+ * @param {string} [size]
  */
 export function tabIcon(tag, size) {
-  /** @type {Record<string, any>} */
+  /** @type {Record<string, (s: string) => import("lit-html").TemplateResult>} */
   const m = {
-    "sp-icon-folder": (/** @type {any} */ s) =>
+    "sp-icon-folder": (/** @type {string} */ s) =>
       html`<sp-icon-folder slot="icon" size=${s}></sp-icon-folder>`,
-    "sp-icon-layers": (/** @type {any} */ s) =>
+    "sp-icon-layers": (/** @type {string} */ s) =>
       html`<sp-icon-layers slot="icon" size=${s}></sp-icon-layers>`,
-    "sp-icon-view-grid": (/** @type {any} */ s) =>
+    "sp-icon-view-grid": (/** @type {string} */ s) =>
       html`<sp-icon-view-grid slot="icon" size=${s}></sp-icon-view-grid>`,
-    "sp-icon-brackets": (/** @type {any} */ s) =>
+    "sp-icon-brackets": (/** @type {string} */ s) =>
       html`<sp-icon-brackets slot="icon" size=${s}></sp-icon-brackets>`,
-    "sp-icon-data": (/** @type {any} */ s) =>
+    "sp-icon-data": (/** @type {string} */ s) =>
       html`<sp-icon-data slot="icon" size=${s}></sp-icon-data>`,
-    "sp-icon-properties": (/** @type {any} */ s) =>
+    "sp-icon-properties": (/** @type {string} */ s) =>
       html`<sp-icon-properties slot="icon" size=${s}></sp-icon-properties>`,
-    "sp-icon-event": (/** @type {any} */ s) =>
+    "sp-icon-event": (/** @type {string} */ s) =>
       html`<sp-icon-event slot="icon" size=${s}></sp-icon-event>`,
-    "sp-icon-brush": (/** @type {any} */ s) =>
+    "sp-icon-brush": (/** @type {string} */ s) =>
       html`<sp-icon-brush slot="icon" size=${s}></sp-icon-brush>`,
-    "sp-icon-file-single-web-page": (/** @type {any} */ s) =>
+    "sp-icon-file-single-web-page": (/** @type {string} */ s) =>
       html`<sp-icon-file-single-web-page slot="icon" size=${s}></sp-icon-file-single-web-page>`,
-    "sp-icon-view-all-tags": (/** @type {any} */ s) =>
+    "sp-icon-view-all-tags": (/** @type {string} */ s) =>
       html`<sp-icon-view-all-tags slot="icon" size=${s}></sp-icon-view-all-tags>`,
-    "sp-icon-artboard": (/** @type {any} */ s) =>
+    "sp-icon-artboard": (/** @type {string} */ s) =>
       html`<sp-icon-artboard slot="icon" size=${s}></sp-icon-artboard>`,
-    "sp-icon-box": (/** @type {any} */ s) =>
+    "sp-icon-chat": (/** @type {string} */ s) =>
+      html`<sp-icon-chat slot="icon" size=${s}></sp-icon-chat>`,
+    "sp-icon-box": (/** @type {string} */ s) =>
       html`<sp-icon-box slot="icon" size=${s}></sp-icon-box>`,
     "sp-icon-git-branch": gitBranchIcon,
   };
@@ -92,7 +94,7 @@ export function renderActivityBar() {
   const tab = activeTab.value;
   if (!tab) return;
   const leftTab = view.leftTab;
-  const gitFileCount = /** @type {any} */ (tab?.session.ui.gitStatus)?.files?.length || 0;
+  const gitFileCount = tab?.session.ui.gitStatus?.files?.length || 0;
   const tabs = [
     { value: "files", icon: "sp-icon-folder", label: "Files" },
     { value: "layers", icon: "sp-icon-layers", label: "Layers" },
@@ -108,8 +110,8 @@ export function renderActivityBar() {
       selected=${view.leftPanelCollapsed ? "" : leftTab}
       direction="vertical"
       quiet
-      @change=${(/** @type {any} */ e) => {
-        const clicked = e.target.selected;
+      @change=${(/** @type {Event} */ e) => {
+        const clicked = /** @type {HTMLElement & { selected: string }} */ (e.target).selected;
         if (clicked === view.leftTab && !view.leftPanelCollapsed) {
           view.leftPanelCollapsed = true;
           applyPanelCollapse();
@@ -146,5 +148,5 @@ export function renderActivityBar() {
       </sp-action-button>
     </div>
   `;
-  litRender(tpl, /** @type {any} */ (activityBar));
+  litRender(tpl, activityBar);
 }

package/src/panels/ai-panel.js

@@ -0,0 +1,399 @@
+/**
+ * Ai-panel.js — Claude AI Assistant tab for the right panel
+ *
+ * Uses QuikChat for the chat UI with Claude Agent SDK streaming via SSE.
+ */
+
+import { html, nothing } from "lit-html";
+import quikchat from "quikchat/md";
+import { getPlatform } from "../platform.js";
+import { rightPanel } from "../store.js";
+import { reloadFileInTab } from "../files/files.js";
+
+// ─── State (module-level, persists across tab switches) ─────────────────────
+
+/**
+ * @type {{
+ *   role: string;
+ *   content: string;
+ *   toolUse?: { tool: string; input?: Record<string, unknown> };
+ * }[]}
+ */
+let messages = [];
+let streaming = false;
+let sessionId = /** @type {string | null} */ (null);
+let authStatus = /** @type {"authenticated" | "unauthenticated" | "checking" | "unknown"} */ (
+  "unknown"
+);
+let authError = "";
+let currentAssistantText = "";
+let eventSource = /** @type {EventSource | null} */ (null);
+let mounted = false;
+
+/** @type {any} */
+let chatInstance = null;
+/** @type {Element | null} */
+let chatContainerEl = null;
+let currentStreamMsgId = /** @type {number | null} */ (null);
+let streamStarted = false;
+/** @type {Set<string>} */
+let pendingFileReloads = new Set();
+
+// ─── Lifecycle ──────────────────────────────────────────────────────────────
+
+export function mountAiPanel() {
+  if (mounted) return;
+  mounted = true;
+  checkAuth();
+}
+
+function rerenderPanel() {
+  const { render } = /** @type {any} */ (/** @type {any} */ (globalThis).__jxRightPanelRender) ||
+  {};
+  if (render) render();
+  requestAnimationFrame(() => mountQuikChat());
+}
+
+export function registerRightPanelRender(/** @type {Function} */ fn) {
+  /** @type {any} */ (globalThis).__jxRightPanelRender = { render: fn };
+}
+
+// ─── QuikChat Mount ────────────────────────────────────────────────────────
+
+export function mountQuikChat() {
+  const container = rightPanel.querySelector("#ai-quikchat");
+  if (!container) return;
+  if (chatInstance && chatContainerEl === container) return;
+
+  chatInstance = new quikchat(
+    container,
+    (/** @type {any} */ _chat, /** @type {string} */ msg) => {
+      handleUserSend(msg);
+    },
+    {
+      theme: "quikchat-theme-dark",
+      titleArea: { show: false },
+      showTimestamps: false,
+      messagesArea: { alternating: false },
+    },
+  );
+  chatContainerEl = container;
+
+  replayMessages();
+
+  if (streaming) {
+    chatInstance.inputAreaSetEnabled(false);
+  }
+}
+
+function replayMessages() {
+  if (!chatInstance || !messages.length) return;
+  for (const msg of messages) {
+    if (msg.role === "user") {
+      chatInstance.messageAddNew(msg.content, "You", "right", "user");
+    } else if (msg.role === "tool" && msg.toolUse) {
+      chatInstance.messageAddNew(
+        formatToolLabel(msg.toolUse.tool, msg.toolUse.input),
+        "",
+        "left",
+        "tool",
+      );
+    } else {
+      chatInstance.messageAddNew(msg.content, "", "left", "assistant");
+    }
+  }
+  if (streaming && currentAssistantText) {
+    currentStreamMsgId = chatInstance.messageAddNew(currentAssistantText, "", "left", "assistant");
+    streamStarted = true;
+  }
+}
+
+// ─── Auth ───────────────────────────────────────────────────────────────────
+
+async function checkAuth() {
+  authStatus = "checking";
+  rerenderPanel();
+  try {
+    const plat = getPlatform();
+    const result = await plat.aiAuthStatus();
+    authStatus = result.authenticated ? "authenticated" : "unauthenticated";
+    authError = result.error || "";
+  } catch (err) {
+    authStatus = "unauthenticated";
+    authError = String(err);
+  }
+  rerenderPanel();
+}
+
+// ─── Messaging ──────────────────────────────────────────────────────────────
+
+/** @param {string} text */
+async function handleUserSend(text) {
+  if (!text.trim() || streaming) return;
+
+  messages.push({ role: "user", content: text });
+  streaming = true;
+  currentAssistantText = "";
+  streamStarted = false;
+
+  if (chatInstance) {
+    currentStreamMsgId = chatInstance.messageAddTypingIndicator("");
+    chatInstance.inputAreaSetEnabled(false);
+  }
+
+  rerenderPanel();
+
+  const plat = getPlatform();
+
+  try {
+    if (!sessionId) {
+      const result = await plat.aiCreateSession({ message: text });
+      sessionId = result.id;
+      await connectStream(/** @type {string} */ (sessionId));
+    } else {
+      await plat.aiSendMessage(sessionId, text);
+    }
+  } catch (err) {
+    if (chatInstance && currentStreamMsgId != null) {
+      chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${err}`);
+    }
+    messages.push({ role: "assistant", content: `Error: ${err}` });
+    streaming = false;
+    if (chatInstance) chatInstance.inputAreaSetEnabled(true);
+    rerenderPanel();
+  }
+}
+
+function stop() {
+  if (!sessionId) return;
+  const plat = getPlatform();
+  plat.aiStopSession(sessionId);
+  finishStream();
+}
+
+function newChat() {
+  if (sessionId) {
+    const plat = getPlatform();
+    plat.aiDeleteSession(sessionId);
+  }
+  disconnectStream();
+  messages = [];
+  sessionId = null;
+  streaming = false;
+  currentAssistantText = "";
+  currentStreamMsgId = null;
+  streamStarted = false;
+  pendingFileReloads.clear();
+  if (chatInstance) {
+    chatInstance.historyImport([]);
+    chatInstance.inputAreaSetEnabled(true);
+  }
+  rerenderPanel();
+}
+
+// ─── SSE Stream ─────────────────────────────────────────────────────────────
+
+async function connectStream(/** @type {string} */ id) {
+  disconnectStream();
+  const plat = getPlatform();
+  const url = await Promise.resolve(plat.aiStreamUrl(id));
+  eventSource = new EventSource(url);
+
+  eventSource.addEventListener("stream_event", (e) => {
+    try {
+      const data = JSON.parse(e.data);
+      const evt = data.event;
+      if (evt?.type === "content_block_delta" && evt.delta?.type === "text_delta") {
+        const token = evt.delta.text;
+        currentAssistantText += token;
+        if (chatInstance && currentStreamMsgId != null) {
+          if (!streamStarted) {
+            chatInstance.messageReplaceContent(currentStreamMsgId, currentAssistantText);
+            streamStarted = true;
+          } else {
+            chatInstance.messageAppendContent(currentStreamMsgId, token);
+          }
+        }
+      }
+    } catch {}
+  });
+
+  eventSource.addEventListener("assistant", (e) => {
+    try {
+      handleAssistantMessage(JSON.parse(e.data));
+    } catch {}
+  });
+
+  eventSource.addEventListener("result", (e) => {
+    try {
+      const data = JSON.parse(e.data);
+      if (data.result && data.is_error) {
+        if (chatInstance && currentStreamMsgId != null) {
+          chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.result}`);
+        }
+        currentAssistantText = `Error: ${data.result}`;
+      }
+    } catch {}
+    finishStream();
+  });
+
+  eventSource.addEventListener("done", () => {
+    finishStream();
+  });
+
+  eventSource.addEventListener("error", (e) => {
+    try {
+      const data = JSON.parse(/** @type {MessageEvent} */ (e).data);
+      if (data.error) {
+        if (chatInstance && currentStreamMsgId != null) {
+          chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.error}`);
+        }
+        currentAssistantText = `Error: ${data.error}`;
+      }
+    } catch {}
+    finishStream();
+  });
+
+  eventSource.onerror = () => {
+    finishStream();
+  };
+}
+
+function finishStream() {
+  if (!streaming) return;
+  if (currentAssistantText) {
+    messages.push({ role: "assistant", content: currentAssistantText });
+    currentAssistantText = "";
+  }
+  streaming = false;
+  currentStreamMsgId = null;
+  streamStarted = false;
+  if (chatInstance) chatInstance.inputAreaSetEnabled(true);
+
+  if (pendingFileReloads.size) {
+    for (const fp of pendingFileReloads) reloadFileInTab(fp);
+    pendingFileReloads.clear();
+  }
+
+  rerenderPanel();
+}
+
+function disconnectStream() {
+  if (eventSource) {
+    eventSource.close();
+    eventSource = null;
+  }
+}
+
+/** @param {any} data */
+function handleAssistantMessage(data) {
+  const content = data.message?.content || data.content;
+  if (!content) return;
+
+  let text = "";
+  const toolBlocks = [];
+
+  for (const block of content) {
+    if (block.type === "text") {
+      text += block.text;
+    } else if (block.type === "tool_use") {
+      toolBlocks.push({ tool: block.name, input: block.input });
+      if ((block.name === "Edit" || block.name === "Write") && block.input) {
+        const fp = block.input.file_path || block.input.path;
+        if (fp) pendingFileReloads.add(String(fp));
+      }
+    }
+  }
+
+  if (toolBlocks.length) {
+    if (currentAssistantText) {
+      messages.push({ role: "assistant", content: currentAssistantText });
+    }
+    for (const t of toolBlocks) {
+      messages.push({ role: "tool", content: "", toolUse: t });
+      if (chatInstance) {
+        chatInstance.messageAddNew(formatToolLabel(t.tool, t.input), "", "left", "tool");
+      }
+    }
+  }
+
+  currentAssistantText = text;
+  if (chatInstance) {
+    currentStreamMsgId = chatInstance.messageAddNew(text || "", "", "left", "assistant");
+    streamStarted = !!text;
+  }
+}
+
+// ─── Tool Label Formatting ─────────────────────────────────────────────────
+
+/**
+ * @param {string} tool
+ * @param {Record<string, unknown>} [input]
+ */
+function formatToolLabel(tool, input) {
+  switch (tool) {
+    case "Edit":
+    case "Write":
+      return `📝 ${tool}: ${input?.file_path || input?.path || "file"}`;
+    case "Read":
+      return `📖 Read: ${input?.file_path || input?.path || "file"}`;
+    case "Bash":
+      return `⚡ Run: ${truncate(String(input?.command || ""), 50)}`;
+    case "Glob":
+      return `🔍 Glob: ${input?.pattern || ""}`;
+    case "Grep":
+      return `🔍 Grep: ${truncate(String(input?.pattern || ""), 40)}`;
+    default:
+      return `🔧 ${tool}`;
+  }
+}
+
+/** @param {string} s @param {number} max */
+function truncate(s, max) {
+  return s.length > max ? s.slice(0, max) + "…" : s;
+}
+
+// ─── Template ───────────────────────────────────────────────────────────────
+
+/** @returns {import("lit-html").TemplateResult} */
+export function renderAiPanelTemplate() {
+  if (authStatus === "checking" || authStatus === "unknown") {
+    return html`<div class="ai-tab-body">
+      <div class="ai-status-center">Checking authentication...</div>
+    </div>`;
+  }
+
+  if (authStatus === "unauthenticated") {
+    return html`
+      <div class="ai-tab-body">
+        <div class="ai-status-center">
+          <sp-icon-artboard style="font-size:32px"></sp-icon-artboard>
+          <div>Claude authentication required</div>
+          <div style="font-size:11px;color:var(--spectrum-global-color-gray-600)">
+            Run the following in your terminal:
+          </div>
+          <code class="ai-code-snippet">npx @anthropic-ai/claude-code login</code>
+          ${authError
+            ? html`<sp-help-text variant="negative">${authError}</sp-help-text>`
+            : nothing}
+          <sp-button size="s" variant="primary" @click=${checkAuth}>Retry</sp-button>
+        </div>
+      </div>
+    `;
+  }
+
+  return html`
+    <div class="ai-tab-body">
+      <div class="ai-toolbar">
+        ${streaming
+          ? html`<sp-action-button size="xs" @click=${stop}>Stop</sp-action-button>`
+          : nothing}
+        <sp-action-button size="xs" quiet @click=${newChat}>
+          <sp-icon-add slot="icon"></sp-icon-add>
+          New Chat
+        </sp-action-button>
+      </div>
+      <div id="ai-quikchat"></div>
+    </div>
+  `;
+}