@jxsuite/studio 0.23.1 → 0.24.0

package/src/panels/{toolbar.js → toolbar.ts}

@@ -1,54 +1,51 @@
+/// <reference lib="dom" />
 /**
  * Toolbar panel — extracted from studio.js renderToolbar(). Owns rendering of breadcrumbs, file
  * ops, feature toggles, and mode switcher.
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { updateSession, updateUi } from "../store.js";
-import { undo as tabUndo, redo as tabRedo } from "../tabs/transact.js";
-import { effect, effectScope } from "../reactivity.js";
-import { activeTab } from "../workspace/workspace.js";
-import { getEffectiveMedia } from "../site-context.js";
-import { mediaDisplayName } from "./shared.js";
-import { view, applyPanelCollapse } from "../view.js";
-import { getRecentProjects } from "../recent-projects.js";
-import { openQuickSearch } from "./quick-search.js";
-import { getPlatform } from "../platform.js";
-import { refreshGitStatus } from "./git-panel.js";
-import { openBrowseModal } from "../browse/browse-modal.js";
-import { openNewProjectModal } from "../new-project/new-project-modal.js";
+import { updateSession, updateUi } from "../store";
+import { undo as tabUndo, redo as tabRedo } from "../tabs/transact";
+import { effect, effectScope } from "../reactivity";
+import { activeTab } from "../workspace/workspace";
+import type { DocumentStackEntry } from "../types";
+import { getEffectiveMedia } from "../site-context";
+import { mediaDisplayName } from "./shared";
+import { view, applyPanelCollapse } from "../view";
+import { getRecentProjects } from "../recent-projects";
+import { openQuickSearch } from "./quick-search";
+import { getPlatform } from "../platform";
+import { refreshGitStatus } from "./git-panel";
+import { openBrowseModal } from "../browse/browse-modal";
+import { openNewProjectModal } from "../new-project/new-project-modal";
 
-/** @type {HTMLElement | null} */
-let _rootEl = null;
+interface ToolbarCtx {
+  navigateBack: () => void;
+  navigateToLevel: (level: number) => void;
+  openProject: () => void;
+  openFile?: (path: string) => void;
+  saveFile: () => void;
+  parseMediaEntries: (media: Record<string, string> | null | undefined) => {
+    sizeBreakpoints: { name: string; query: string; width: number; type: string }[];
+    featureQueries: { name: string; query: string }[];
+    baseWidth: number;
+  };
+  getCanvasMode: () => string;
+  setCanvasMode: (mode: string) => void;
+  renderCanvas: () => void;
+  safeRenderRightPanel: () => void;
+  openRecentProject: (root: string) => Promise<void>;
+  closeFunctionEditor: () => void;
+}
 
-/**
- * @typedef {{
- *   navigateBack: () => void;
- *   navigateToLevel: (level: number) => void;
- *   openProject: () => void;
- *   openFile?: (path: string) => void;
- *   saveFile: () => void;
- *   parseMediaEntries: (media: Record<string, string> | null | undefined) => {
- *     sizeBreakpoints: { name: string; query: string; width: number; type: string }[];
- *     featureQueries: { name: string; query: string }[];
- *     baseWidth: number;
- *   };
- *   getCanvasMode: () => string;
- *   setCanvasMode: (mode: string) => void;
- *   renderCanvas: () => void;
- *   safeRenderRightPanel: () => void;
- *   openRecentProject: (root: string) => Promise<void>;
- *   closeFunctionEditor: () => void;
- * }} ToolbarCtx
- */
+let _rootEl: HTMLElement | null = null;
 
-/** @type {ToolbarCtx | null} */
-let _ctx = null;
+let _ctx: ToolbarCtx | null = null;
 
-/** @type {import("@vue/reactivity").EffectScope | null} */
-let _scope = null;
+let _scope: import("@vue/reactivity").EffectScope | null = null;
 
-const toolbarIconMap = /** @type {Record<string, import("lit-html").TemplateResult>} */ ({
+const toolbarIconMap = {
   "sp-icon-folder-open": html`<sp-icon-folder-open slot="icon"></sp-icon-folder-open>`,
   "sp-icon-save-floppy": html`<sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>`,
   "sp-icon-back": html`<sp-icon-back slot="icon"></sp-icon-back>`,
@@ -64,14 +61,14 @@ const toolbarIconMap = /** @type {Record<string, import("lit-html").TemplateResu
   "sp-icon-view-list": html`<sp-icon-view-list slot="icon"></sp-icon-view-list>`,
   "sp-icon-gears": html`<sp-icon-gears slot="icon"></sp-icon-gears>`,
   "sp-icon-document": html`<sp-icon-document slot="icon"></sp-icon-document>`,
-});
+} as Record<string, import("lit-html").TemplateResult>;
 
 /**
  * @param {string} label
- * @param {Function} onClick
+ * @param {() => void} onClick
  * @param {string} [iconTag]
  */
-function tbBtnTpl(label, onClick, iconTag) {
+function tbBtnTpl(label: string, onClick: () => void, iconTag?: string) {
   return html`
     <sp-action-button size="s" @click=${onClick}>
       ${iconTag ? toolbarIconMap[iconTag] : nothing} ${label}
@@ -86,13 +83,12 @@ function tbBtnTpl(label, onClick, iconTag) {
  * @param {ToolbarCtx} ctx — { navigateBack, closeFunctionEditor, openProject, openFile, saveFile,
  *   parseMediaEntries, getCanvasMode, setCanvasMode, renderCanvas, safeRenderRightPanel }
  */
-export function mount(rootEl, ctx) {
+export function mount(rootEl: HTMLElement, ctx: ToolbarCtx) {
   _rootEl = rootEl;
   _ctx = ctx;
   if (
-    /** @type {{ __jxPlatform?: { windowControls?: unknown } }} */ (
-      /** @type {unknown} */ (globalThis)
-    ).__jxPlatform?.windowControls
+    (globalThis as unknown as { __jxPlatform?: { windowControls?: unknown } }).__jxPlatform
+      ?.windowControls
   ) {
     rootEl.classList.add("electrobun-webkit-app-region-drag");
   }
@@ -143,7 +139,7 @@ async function handleNewProject() {
 }
 
 /** @param {ToolbarCtx} ctx */
-function minimalToolbarTemplate(ctx) {
+function minimalToolbarTemplate(ctx: ToolbarCtx) {
   const recentProjects = getRecentProjects();
   const recentProjectsTpl = html`
     <overlay-trigger placement="bottom-start" triggered-by="click">
@@ -152,8 +148,8 @@ function minimalToolbarTemplate(ctx) {
       </sp-action-button>
       <sp-popover slot="click-content" tip>
         <sp-menu
-          @change=${(/** @type {Event} */ e) => {
-            const val = /** @type {HTMLInputElement} */ (/** @type {unknown} */ (e.target)).value;
+          @change=${(e: Event) => {
+            const val = (e.target as unknown as HTMLInputElement).value;
             if (val === "__new__") {
               handleNewProject();
             } else {
@@ -172,13 +168,13 @@ function minimalToolbarTemplate(ctx) {
     </overlay-trigger>
   `;
 
-  const windowControls = /**
-   * @type {{
-   *   __jxPlatform?: {
-   *     windowControls?: { minimize: () => void; maximize: () => void; close: () => void };
-   *   };
-   * }}
-   */ (/** @type {unknown} */ (globalThis)).__jxPlatform?.windowControls;
+  const windowControls = (
+    globalThis as unknown as {
+      __jxPlatform?: {
+        windowControls?: { minimize: () => void; maximize: () => void; close: () => void };
+      };
+    }
+  ).__jxPlatform?.windowControls;
   const csdTpl = windowControls
     ? html`
         <sp-action-group class="window-controls" size="s">
@@ -303,7 +299,7 @@ function toolbarTemplate() {
             ${toolbarIconMap["sp-icon-back"]}Back
           </sp-action-button>
           ${S.documentStack.map(
-            (/** @type {DocumentStackEntry} */ frame, /** @type {number} */ i) => html`
+            (frame: DocumentStackEntry, i: number) => html`
               <span class="breadcrumb-item clickable" @click=${() => ctx.navigateToLevel(i)}
                 >${frame.documentPath?.split("/").pop() || "untitled"}</span
               >
@@ -366,7 +362,9 @@ function toolbarTemplate() {
               view.panX = 0;
               view.panY = 0;
               /** @type {{ editingFunction: null; rightTab?: string }} */
-              const uiPatch = { editingFunction: null };
+              const uiPatch: { editingFunction: null; rightTab?: string } = {
+                editingFunction: null,
+              };
               if (m.key === "stylebook") uiPatch.rightTab = "style";
               updateSession({ ui: uiPatch });
               ctx.renderCanvas();
@@ -380,13 +378,13 @@ function toolbarTemplate() {
     </sp-action-group>
   `;
 
-  const windowControls = /**
-   * @type {{
-   *   __jxPlatform?: {
-   *     windowControls?: { minimize: () => void; maximize: () => void; close: () => void };
-   *   };
-   * }}
-   */ (/** @type {unknown} */ (globalThis)).__jxPlatform?.windowControls;
+  const windowControls = (
+    globalThis as unknown as {
+      __jxPlatform?: {
+        windowControls?: { minimize: () => void; maximize: () => void; close: () => void };
+      };
+    }
+  ).__jxPlatform?.windowControls;
   const isMac = navigator.platform.startsWith("Mac");
   const csdTpl = windowControls
     ? isMac
@@ -462,8 +460,8 @@ function toolbarTemplate() {
       </sp-action-button>
       <sp-popover slot="click-content" tip>
         <sp-menu
-          @change=${(/** @type {Event} */ e) => {
-            const val = /** @type {HTMLInputElement} */ (/** @type {unknown} */ (e.target)).value;
+          @change=${(e: Event) => {
+            const val = (e.target as unknown as HTMLInputElement).value;
             if (val === "__new__") {
               handleNewProject();
             } else {
@@ -495,10 +493,10 @@ function toolbarTemplate() {
       ${toolbarIconMap["sp-icon-save-floppy"]} Save
     </sp-action-button>
     <sp-action-group compact size="s">
-      <sp-action-button size="s" ?disabled=${!canUndo} @click=${() => tabUndo(activeTab.value)}>
+      <sp-action-button size="s" ?disabled=${!canUndo} @click=${() => tabUndo(activeTab.value!)}>
         ${toolbarIconMap["sp-icon-undo"]} Undo
       </sp-action-button>
-      <sp-action-button size="s" ?disabled=${!canRedo} @click=${() => tabRedo(activeTab.value)}>
+      <sp-action-button size="s" ?disabled=${!canRedo} @click=${() => tabRedo(activeTab.value!)}>
         ${toolbarIconMap["sp-icon-redo"]} Redo
       </sp-action-button>
     </sp-action-group>

package/src/panels/{welcome-screen.js → welcome-screen.ts}

@@ -1,32 +1,30 @@
+/// <reference lib="dom" />
 /**
  * Welcome screen — shown when no project is loaded and no document tabs are open. Mimics VS Code's
  * welcome tab with start actions and recent projects.
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { getRecentProjects } from "../recent-projects.js";
-import { platformSupportsClone } from "./git-panel.js";
+import { getRecentProjects } from "../recent-projects";
+import { platformSupportsClone } from "./git-panel";
 
-/**
- * @typedef {{
- *   openProject: () => void;
- *   openRecentProject: (root: string) => void;
- *   openNewProject: () => void;
- *   cloneRepository: () => void;
- * }} WelcomeCtx
- */
+interface WelcomeCtx {
+  openProject: () => void;
+  openRecentProject: (root: string) => void;
+  openNewProject: () => void;
+  cloneRepository: () => void;
+}
 
-/** @type {WelcomeCtx | null} */
-let _ctx = null;
+let _ctx: WelcomeCtx | null = null;
 
 /** @param {WelcomeCtx} ctx */
-export function initWelcome(ctx) {
+export function initWelcome(ctx: WelcomeCtx) {
   _ctx = ctx;
 }
 
 /** @param {HTMLElement} host */
-export function renderWelcome(host) {
-  const ctx = /** @type {WelcomeCtx} */ (_ctx);
+export function renderWelcome(host: HTMLElement) {
+  const ctx = _ctx as WelcomeCtx;
   const recent = getRecentProjects();
   const showClone = platformSupportsClone();
 
@@ -112,7 +110,7 @@ export function renderWelcome(host) {
 }
 
 /** @param {string} path */
-function shortenPath(path) {
+function shortenPath(path: string) {
   if (path.startsWith("/home/")) {
     const parts = path.split("/");
     return "~/" + parts.slice(3).join("/");

package/src/{platform.js → platform.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Platform.js — Platform Abstraction Layer (PAL)
  *
@@ -11,11 +12,12 @@
  * See spec/desktop.md §3 for the full StudioPlatform interface.
  */
 
-/** @type {{ __jxPlatform?: StudioPlatform }} */
-const g = /** @type {{ __jxPlatform?: StudioPlatform }} */ (/** @type {unknown} */ (globalThis));
+import type { StudioPlatform } from "./types";
+
+const g = globalThis as unknown as { __jxPlatform?: StudioPlatform };
 
 /** @param {StudioPlatform} platform */
-export function registerPlatform(platform) {
+export function registerPlatform(platform: StudioPlatform) {
   g.__jxPlatform = platform;
 }
 

package/src/platforms/{devserver.js → devserver.ts}

@@ -24,7 +24,7 @@ export function createDevServerPlatform() {
    *
    * @param {string} rel
    */
-  function serverPath(rel) {
+  function serverPath(rel: string) {
     const r = rel.replaceAll("\\", "/");
     if (!_projectRoot) return r;
     if (r === ".") return _projectRoot;
@@ -36,7 +36,7 @@ export function createDevServerPlatform() {
    *
    * @param {string} path
    */
-  function stripRoot(path) {
+  function stripRoot(path: string) {
     const p = path.replaceAll("\\", "/");
     if (!_projectRoot) return p;
     return p.startsWith(_projectRoot + "/") ? p.slice(_projectRoot.length + 1) : p;
@@ -60,7 +60,7 @@ export function createDevServerPlatform() {
      *
      * @param {string} [root]
      */
-    async activate(root) {
+    async activate(root?: string) {
       const r = root ?? _projectRoot;
       await fetch("/__studio/activate", {
         method: "POST",
@@ -79,13 +79,14 @@ export function createDevServerPlatform() {
 
       let dirHandle;
       try {
-        dirHandle =
-          await /** @type {{ showDirectoryPicker(opts: { mode: string }): Promise<FileSystemDirectoryHandle> }} */ (
-            window
-          ).showDirectoryPicker({ mode: "readwrite" });
-      } catch (/** @type {unknown} */ e) {
+        dirHandle = await (
+          window as unknown as {
+            showDirectoryPicker(opts: { mode: string }): Promise<FileSystemDirectoryHandle>;
+          }
+        ).showDirectoryPicker({ mode: "readwrite" });
+      } catch (e) {
         // User cancelled the picker
-        if (/** @type {Error} */ (e).name === "AbortError") return null;
+        if ((e as Error).name === "AbortError") return null;
         throw e;
       }
 
@@ -105,8 +106,10 @@ export function createDevServerPlatform() {
       if (!sitesRes.ok) throw new Error("Failed to fetch site list from server");
       const sites = await sitesRes.json();
       const match = sites.find(
-        /** @param {{ config: unknown; path: string }} s */ (s) =>
-          JSON.stringify(s.config) === JSON.stringify(config),
+        /** @param {{ config: unknown; path: string }} s */ (s: {
+          config: unknown;
+          path: string;
+        }) => JSON.stringify(s.config) === JSON.stringify(config),
       );
 
       if (!match) {
@@ -164,7 +167,13 @@ export function createDevServerPlatform() {
      *   directory: string;
      * }} opts
      */
-    async createProject(opts) {
+    async createProject(opts: {
+      name: string;
+      description?: string;
+      url?: string;
+      adapter?: string;
+      directory: string;
+    }) {
       const res = await fetch("/__studio/create-project", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -180,7 +189,7 @@ export function createDevServerPlatform() {
     // ─── File operations ──────────────────────────────────────────────────
 
     /** @param {string} dir */
-    async listDirectory(dir) {
+    async listDirectory(dir: string) {
       const res = await fetch(`/__studio/files?dir=${encodeURIComponent(serverPath(dir))}`);
       if (!res.ok) throw new Error(`Failed to list directory: ${dir}`);
       const entries = await res.json();
@@ -189,7 +198,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string} path */
-    async readFile(path) {
+    async readFile(path: string) {
       const res = await fetch(`/__studio/file?path=${encodeURIComponent(serverPath(path))}`);
       if (!res.ok) throw new Error(`Failed to read file: ${path}`);
       const data = await res.json();
@@ -200,7 +209,7 @@ export function createDevServerPlatform() {
      * @param {string} path
      * @param {string} content
      */
-    async writeFile(path, content) {
+    async writeFile(path: string, content: string) {
       const res = await fetch(`/__studio/file?path=${encodeURIComponent(serverPath(path))}`, {
         method: "PUT",
         body: content,
@@ -214,7 +223,7 @@ export function createDevServerPlatform() {
      * @param {string} path — project-relative destination path
      * @param {File | Blob | ArrayBuffer} data — file content
      */
-    async uploadFile(path, data) {
+    async uploadFile(path: string, data: File | Blob | ArrayBuffer) {
       const res = await fetch(
         `/__studio/file/upload?path=${encodeURIComponent(serverPath(path))}`,
         { method: "POST", body: data },
@@ -224,7 +233,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string} path */
-    async deleteFile(path) {
+    async deleteFile(path: string) {
       const res = await fetch(`/__studio/file?path=${encodeURIComponent(serverPath(path))}`, {
         method: "DELETE",
       });
@@ -235,7 +244,7 @@ export function createDevServerPlatform() {
      * @param {string} from
      * @param {string} to
      */
-    async renameFile(from, to) {
+    async renameFile(from: string, to: string) {
       const res = await fetch("/__studio/file/rename", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -245,7 +254,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string} _path */
-    async createDirectory(_path) {
+    async createDirectory(_path: string) {
       // The server creates directories implicitly when writing files.
       // Write a placeholder and delete it, or rely on mkdir behavior.
       // For now, use the writeFile + delete approach if directory creation
@@ -255,7 +264,7 @@ export function createDevServerPlatform() {
     // ─── Component discovery ──────────────────────────────────────────────
 
     /** @param {string} dir */
-    async discoverComponents(dir) {
+    async discoverComponents(dir: string) {
       const scanDir = dir || _projectRoot;
       if (!scanDir) return [];
       const url = `/__studio/components?dir=${encodeURIComponent(scanDir)}`;
@@ -267,7 +276,7 @@ export function createDevServerPlatform() {
     // ─── Package management ──────────────────────────────────────────────
 
     /** @param {string} name */
-    async addPackage(name) {
+    async addPackage(name: string) {
       const res = await fetch("/__studio/packages/add", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -278,7 +287,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string} name */
-    async removePackage(name) {
+    async removePackage(name: string) {
       const res = await fetch("/__studio/packages/remove", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -300,7 +309,7 @@ export function createDevServerPlatform() {
      * @param {string} action
      * @param {unknown} payload
      */
-    async codeService(action, payload) {
+    async codeService(action: string, payload: unknown) {
       try {
         const res = await fetch(`/__studio/code/${action}`, {
           method: "POST",
@@ -322,7 +331,7 @@ export function createDevServerPlatform() {
      *
      * @param {string} filePath — absolute system path
      */
-    async resolveSiteContext(filePath) {
+    async resolveSiteContext(filePath: string) {
       const res = await fetch(`/__studio/resolve-site?path=${encodeURIComponent(filePath)}`);
       if (!res.ok) return { sitePath: null };
       return await res.json();
@@ -331,7 +340,7 @@ export function createDevServerPlatform() {
     // ─── File location ────────────────────────────────────────────────────
 
     /** @param {string} name */
-    async locateFile(name) {
+    async locateFile(name: string) {
       try {
         const res = await fetch("/__studio/locate", {
           method: "POST",
@@ -344,7 +353,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string} query */
-    async searchFiles(query) {
+    async searchFiles(query: string) {
       const glob = `**/*${query}*.{json,md}`;
       const res = await fetch(
         `/__studio/files?dir=${encodeURIComponent(serverPath("."))}&glob=${encodeURIComponent(glob)}`,
@@ -362,7 +371,7 @@ export function createDevServerPlatform() {
      * @param {string} prototype
      * @param {string} base
      */
-    async fetchPluginSchema(src, prototype, base) {
+    async fetchPluginSchema(src: string, prototype: string, base: string) {
       const params = new URLSearchParams({ src });
       if (prototype) params.set("prototype", prototype);
       if (base) params.set("base", base);
@@ -387,7 +396,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {number} [limit] */
-    async gitLog(limit) {
+    async gitLog(limit?: number) {
       const q = limit ? `?limit=${limit}` : "";
       const res = await fetch(`/__studio/git/log${q}`);
       if (!res.ok) throw new Error(await res.text());
@@ -395,7 +404,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string[]} files */
-    async gitStage(files) {
+    async gitStage(files: string[]) {
       const res = await fetch("/__studio/git/stage", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -406,7 +415,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string[]} files */
-    async gitUnstage(files) {
+    async gitUnstage(files: string[]) {
       const res = await fetch("/__studio/git/unstage", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -417,7 +426,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string} message */
-    async gitCommit(message) {
+    async gitCommit(message: string) {
       const res = await fetch("/__studio/git/commit", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -428,7 +437,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {{ setUpstream?: boolean }} [opts] */
-    async gitPush(opts) {
+    async gitPush(opts?: { setUpstream?: boolean }) {
       const res = await fetch("/__studio/git/push", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -451,7 +460,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string} branch */
-    async gitCheckout(branch) {
+    async gitCheckout(branch: string) {
       const res = await fetch("/__studio/git/checkout", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -462,7 +471,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string} name */
-    async gitCreateBranch(name) {
+    async gitCreateBranch(name: string) {
       const res = await fetch("/__studio/git/create-branch", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -473,14 +482,14 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string} path */
-    async gitDiff(path) {
+    async gitDiff(path: string) {
       const res = await fetch(`/__studio/git/diff?path=${encodeURIComponent(path)}`);
       if (!res.ok) throw new Error(await res.text());
       return await res.json();
     },
 
     /** @param {{ path: string; ref?: string }} opts */
-    async gitShow(opts) {
+    async gitShow(opts: { path: string; ref?: string }) {
       const params = new URLSearchParams({ path: opts.path });
       if (opts.ref) params.set("ref", opts.ref);
       const res = await fetch(`/__studio/git/show?${params}`);
@@ -490,7 +499,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string[]} files */
-    async gitDiscard(files) {
+    async gitDiscard(files: string[]) {
       const res = await fetch("/__studio/git/discard", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -501,7 +510,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string} url */
-    async gitClone(url) {
+    async gitClone(url: string) {
       const res = await fetch("/__studio/git/clone", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -520,7 +529,7 @@ export function createDevServerPlatform() {
      * @param {string} name
      * @param {string} url
      */
-    async gitAddRemote(name, url) {
+    async gitAddRemote(name: string, url: string) {
       const res = await fetch("/__studio/git/add-remote", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -537,7 +546,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {{ message: string; systemPrompt?: string }} opts */
-    async aiCreateSession(opts) {
+    async aiCreateSession(opts: { message: string; systemPrompt?: string }) {
       const res = await fetch("/__studio/ai/session", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -548,7 +557,7 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string} id @param {string} message */
-    async aiSendMessage(id, message) {
+    async aiSendMessage(id: string, message: string) {
       const res = await fetch(`/__studio/ai/session/${id}/message`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -559,17 +568,17 @@ export function createDevServerPlatform() {
     },
 
     /** @param {string} id */
-    aiStreamUrl(id) {
+    aiStreamUrl(id: string) {
       return `/__studio/ai/session/${id}/stream`;
     },
 
     /** @param {string} id */
-    async aiStopSession(id) {
+    async aiStopSession(id: string) {
       await fetch(`/__studio/ai/session/${id}/stop`, { method: "POST" });
     },
 
     /** @param {string} id */
-    async aiDeleteSession(id) {
+    async aiDeleteSession(id: string) {
       await fetch(`/__studio/ai/session/${id}`, { method: "DELETE" });
     },
   };