@openspecui/web 1.1.1 → 1.2.0

package/dist-ssg/server/entry-server.js

@@ -36129,7 +36129,7 @@ const DEFAULT_MAIN_TABS = [
   "/settings"
 ];
 const DEFAULT_BOTTOM_TABS = isStaticMode() ? [] : ["/terminal"];
-const POP_ROUTES = ["/search"];
+const POP_ROUTES = ["/search", "/opsx-new"];
 const KV_KEY$1 = "nav-layout";
 const LS_KEY = "nav-layout";
 const PERSIST_DEBOUNCE = 300;
@@ -47681,21 +47681,13 @@ async function getOpsxProjectConfig() {
   const snapshot = await loadSnapshot();
   return snapshot?.opsx?.configYaml ?? null;
 }
-async function getOpsxSchemas() {
+async function getOpsxConfigBundle() {
   const snapshot = await loadSnapshot();
-  return snapshot?.opsx?.schemas ?? [];
-}
-async function getOpsxSchemaDetail(name2) {
-  if (!name2) return null;
-  const snapshot = await loadSnapshot();
-  const details = snapshot?.opsx?.schemaDetails;
-  return details?.[name2] ?? null;
-}
-async function getOpsxSchemaResolution(name2) {
-  if (!name2) return null;
-  const snapshot = await loadSnapshot();
-  const resolutions = snapshot?.opsx?.schemaResolutions;
-  return resolutions?.[name2] ?? null;
+  return {
+    schemas: snapshot?.opsx?.schemas ?? [],
+    schemaDetails: snapshot?.opsx?.schemaDetails ?? {},
+    schemaResolutions: snapshot?.opsx?.schemaResolutions ?? {}
+  };
 }
 async function getOpsxTemplates(schema2) {
   const snapshot = await loadSnapshot();
@@ -106569,15 +106561,20 @@ function useOpsxStatusSubscription(input) {
     input.change ? `opsx.subscribeStatus:${input.change}:${input.schema}:${input.refreshKey}` : void 0
   );
 }
-function useOpsxSchemasSubscription() {
+function useOpsxConfigBundleSubscription() {
   const subscribe2 = reactExports.useCallback(
-    (callbacks) => trpcClient.opsx.subscribeSchemas.subscribe(void 0, {
+    (callbacks) => trpcClient.opsx.subscribeConfigBundle.subscribe(void 0, {
       onData: callbacks.onData,
       onError: callbacks.onError
     }),
     []
   );
-  return useSubscription(subscribe2, getOpsxSchemas, [], "opsx.subscribeSchemas");
+  return useSubscription(
+    subscribe2,
+    getOpsxConfigBundle,
+    [],
+    "opsx.subscribeConfigBundle"
+  );
 }
 function useOpsxStatusListSubscription() {
   const subscribe2 = reactExports.useCallback(
@@ -106587,67 +106584,19 @@ function useOpsxStatusListSubscription() {
     }),
     []
   );
-  return useSubscription(subscribe2, getOpsxStatusList, [], "opsx.subscribeStatusList");
-}
-function useOpsxSchemaDetailSubscription(name2) {
-  const subscribe2 = reactExports.useCallback(
-    (callbacks) => {
-      if (!name2) {
-        callbacks.onData(null);
-        return { unsubscribe: () => {
-        } };
-      }
-      return trpcClient.opsx.subscribeSchemaDetail.subscribe(
-        { name: name2 },
-        {
-          onData: callbacks.onData,
-          onError: callbacks.onError
-        }
-      );
-    },
-    [name2]
-  );
   return useSubscription(
     subscribe2,
-    () => getOpsxSchemaDetail(name2),
-    [name2],
-    name2 ? `opsx.subscribeSchemaDetail:${name2}` : void 0
-  );
-}
-function useOpsxSchemaResolutionSubscription(name2) {
-  const subscribe2 = reactExports.useCallback(
-    (callbacks) => {
-      if (!name2) {
-        callbacks.onData(null);
-        return { unsubscribe: () => {
-        } };
-      }
-      return trpcClient.opsx.subscribeSchemaResolution.subscribe(
-        { name: name2 },
-        {
-          onData: callbacks.onData,
-          onError: callbacks.onError
-        }
-      );
-    },
-    [name2]
-  );
-  return useSubscription(
-    subscribe2,
-    () => getOpsxSchemaResolution(name2),
-    [name2],
-    name2 ? `opsx.subscribeSchemaResolution:${name2}` : void 0
+    getOpsxStatusList,
+    [],
+    "opsx.subscribeStatusList"
   );
 }
 function useOpsxTemplatesSubscription(schema2) {
   const subscribe2 = reactExports.useCallback(
-    (callbacks) => trpcClient.opsx.subscribeTemplates.subscribe(
-      schema2 ? { schema: schema2 } : void 0,
-      {
-        onData: callbacks.onData,
-        onError: callbacks.onError
-      }
-    ),
+    (callbacks) => trpcClient.opsx.subscribeTemplates.subscribe(schema2 ? { schema: schema2 } : void 0, {
+      onData: callbacks.onData,
+      onError: callbacks.onError
+    }),
     [schema2]
   );
   return useSubscription(
@@ -106684,13 +106633,10 @@ function useOpsxSchemaFilesSubscription(name2) {
 }
 function useOpsxTemplateContentsSubscription(schema2) {
   const subscribe2 = reactExports.useCallback(
-    (callbacks) => trpcClient.opsx.subscribeTemplateContents.subscribe(
-      schema2 ? { schema: schema2 } : void 0,
-      {
-        onData: callbacks.onData,
-        onError: callbacks.onError
-      }
-    ),
+    (callbacks) => trpcClient.opsx.subscribeTemplateContents.subscribe(schema2 ? { schema: schema2 } : void 0, {
+      onData: callbacks.onData,
+      onError: callbacks.onError
+    }),
     [schema2]
   );
   return useSubscription(
@@ -106708,7 +106654,12 @@ function useOpsxProjectConfigSubscription() {
     }),
     []
   );
-  return useSubscription(subscribe2, getOpsxProjectConfig, [], "opsx.subscribeProjectConfig");
+  return useSubscription(
+    subscribe2,
+    getOpsxProjectConfig,
+    [],
+    "opsx.subscribeProjectConfig"
+  );
 }
 function useOpsxChangeListSubscription() {
   const subscribe2 = reactExports.useCallback(
@@ -106718,7 +106669,12 @@ function useOpsxChangeListSubscription() {
     }),
     []
   );
-  return useSubscription(subscribe2, getOpsxChangeList, [], "opsx.subscribeChanges");
+  return useSubscription(
+    subscribe2,
+    getOpsxChangeList,
+    [],
+    "opsx.subscribeChanges"
+  );
 }
 function useOpsxChangeMetadataSubscription(changeId) {
   const subscribe2 = reactExports.useCallback(
@@ -106842,9 +106798,19 @@ function ChangeList() {
         );
       }),
       statuses?.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground p-4 text-center", children: [
-        "No active changes. Use ",
-        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "/opsx:new" }),
-        " to create one."
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "No active changes." }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => navController.activatePop("/opsx-new"),
+            className: "text-primary mt-2 inline-flex items-center gap-1 hover:underline",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "h-3.5 w-3.5" }),
+              "/opsx:new"
+            ]
+          }
+        )
       ] })
     ] })
   ] });
@@ -106861,7 +106827,7 @@ function ArtifactHeader({ artifact }) {
   const status = statusConfig[artifact.status];
   const StatusIcon = status.icon;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-border flex flex-wrap items-center justify-between gap-3 rounded-md border bg-card px-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-border bg-card flex flex-wrap items-center justify-between gap-3 rounded-md border px-4 py-3", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(FileText, { className: "text-muted-foreground h-4 w-4" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: artifact.id }),
@@ -106882,7 +106848,10 @@ function ArtifactHeader({ artifact }) {
   ] });
 }
 function SingleFileContent({ changeId, artifact }) {
-  const { data: content2, isLoading } = useOpsxArtifactOutputSubscription(changeId, artifact.outputPath);
+  const { data: content2, isLoading } = useOpsxArtifactOutputSubscription(
+    changeId,
+    artifact.outputPath
+  );
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center text-sm", children: "Loading output..." });
   }
@@ -106891,19 +106860,22 @@ function SingleFileContent({ changeId, artifact }) {
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground flex h-full items-center justify-center rounded-md border border-dashed p-6 text-sm", children: [
     "Not yet generated. Use ",
-    /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Continue" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "mx-2", children: "Continue" }),
     " to generate this artifact."
   ] });
 }
 function GlobContent({ changeId, artifact }) {
-  const { data: files, isLoading } = useOpsxGlobArtifactFilesSubscription(changeId, artifact.outputPath);
+  const { data: files, isLoading } = useOpsxGlobArtifactFilesSubscription(
+    changeId,
+    artifact.outputPath
+  );
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-[400px] items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "text-muted-foreground h-6 w-6 animate-spin" }) });
   }
   if (!files?.length) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground flex h-full items-center justify-center rounded-md border border-dashed p-6 text-sm", children: [
       "Not yet generated. Use ",
-      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Continue" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "mx-2", children: "Continue" }),
       " to generate this artifact."
     ] });
   }
@@ -109935,6 +109907,59 @@ ZodTuple.create = (schemas, params) => {
     ...processCreateParams(params)
   });
 };
+class ZodRecord extends ZodType {
+  get keySchema() {
+    return this._def.keyType;
+  }
+  get valueSchema() {
+    return this._def.valueType;
+  }
+  _parse(input) {
+    const { status, ctx } = this._processInputParams(input);
+    if (ctx.parsedType !== ZodParsedType.object) {
+      addIssueToContext(ctx, {
+        code: ZodIssueCode.invalid_type,
+        expected: ZodParsedType.object,
+        received: ctx.parsedType
+      });
+      return INVALID;
+    }
+    const pairs2 = [];
+    const keyType = this._def.keyType;
+    const valueType = this._def.valueType;
+    for (const key2 in ctx.data) {
+      pairs2.push({
+        key: keyType._parse(new ParseInputLazyPath(ctx, key2, ctx.path, key2)),
+        value: valueType._parse(new ParseInputLazyPath(ctx, ctx.data[key2], ctx.path, key2)),
+        alwaysSet: key2 in ctx.data
+      });
+    }
+    if (ctx.common.async) {
+      return ParseStatus.mergeObjectAsync(status, pairs2);
+    } else {
+      return ParseStatus.mergeObjectSync(status, pairs2);
+    }
+  }
+  get element() {
+    return this._def.valueType;
+  }
+  static create(first, second, third) {
+    if (second instanceof ZodType) {
+      return new ZodRecord({
+        keyType: first,
+        valueType: second,
+        typeName: ZodFirstPartyTypeKind.ZodRecord,
+        ...processCreateParams(third)
+      });
+    }
+    return new ZodRecord({
+      keyType: ZodString.create(),
+      valueType: first,
+      typeName: ZodFirstPartyTypeKind.ZodRecord,
+      ...processCreateParams(second)
+    });
+  }
+}
 class ZodMap extends ZodType {
   get keySchema() {
     return this._def.keyType;
@@ -110679,10 +110704,11 @@ const booleanType = ZodBoolean.create;
 ZodNever.create;
 const arrayType = ZodArray.create;
 const objectType = ZodObject.create;
-ZodUnion.create;
+const unionType = ZodUnion.create;
 const discriminatedUnionType = ZodDiscriminatedUnion.create;
 ZodIntersection.create;
 ZodTuple.create;
+const recordType = ZodRecord.create;
 const literalType = ZodLiteral.create;
 const enumType = ZodEnum.create;
 ZodPromise.create;
@@ -110690,6 +110716,7 @@ ZodOptional.create;
 ZodNullable.create;
 const PositiveInt = numberType().int().positive();
 const PtyPlatformSchema = enumType(["windows", "macos", "common"]);
+const CloseCallbackUrlSchema = unionType([stringType(), recordType(stringType())]);
 const PtySessionInfoSchema = objectType({
   id: stringType().min(1),
   title: stringType(),
@@ -110697,7 +110724,9 @@ const PtySessionInfoSchema = objectType({
   args: arrayType(stringType()),
   platform: PtyPlatformSchema,
   isExited: booleanType(),
-  exitCode: numberType().int().nullable()
+  exitCode: numberType().int().nullable(),
+  closeTip: stringType().optional(),
+  closeCallbackUrl: CloseCallbackUrlSchema.optional()
 });
 const PtyCreateMessageSchema = objectType({
   type: literalType("create"),
@@ -110705,7 +110734,9 @@ const PtyCreateMessageSchema = objectType({
   cols: PositiveInt.optional(),
   rows: PositiveInt.optional(),
   command: stringType().min(1).optional(),
-  args: arrayType(stringType()).optional()
+  args: arrayType(stringType()).optional(),
+  closeTip: stringType().optional(),
+  closeCallbackUrl: CloseCallbackUrlSchema.optional()
 });
 const PtyInputMessageSchema = objectType({
   type: literalType("input"),
@@ -148182,6 +148213,8 @@ class TerminalController {
       command: opts?.command,
       args: opts?.args,
       isDedicated: opts?.isDedicated ?? false,
+      closeTip: opts?.closeTip,
+      closeCallbackUrl: opts?.closeCallbackUrl,
       restored: false,
       serverSessionId: null,
       platform: DEFAULT_PTY_PLATFORM
@@ -148204,13 +148237,17 @@ class TerminalController {
         cols: instance.terminal.cols || 80,
         rows: instance.terminal.rows || 24,
         command: opts?.command,
-        args: opts?.args
+        args: opts?.args,
+        closeTip: opts?.closeTip,
+        closeCallbackUrl: opts?.closeCallbackUrl
       });
     } else {
       this.pendingCreates.push({
         requestId: id2,
         command: opts?.command,
         args: opts?.args,
+        closeTip: opts?.closeTip,
+        closeCallbackUrl: opts?.closeCallbackUrl,
         cols: instance.terminal.cols || 80,
         rows: instance.terminal.rows || 24
       });
@@ -148279,6 +148316,8 @@ class TerminalController {
       exitCode: null,
       command: opts.command,
       args: opts.args,
+      closeTip: opts.closeTip,
+      closeCallbackUrl: opts.closeCallbackUrl,
       mountedContainer: null,
       resizeObserver: null,
       hasOpened: false,
@@ -148288,9 +148327,10 @@ class TerminalController {
       platform: opts.platform
     };
   }
-  closeSession(id2) {
+  closeSession(id2, opts) {
     const instance = this.instances.get(id2);
     if (!instance) return;
+    const shouldTriggerCloseCallback = opts?.triggerCloseCallback !== false;
     if (instance.mountedContainer) {
       this.unmount(id2);
     }
@@ -148309,12 +148349,15 @@ class TerminalController {
       }
     }
     instance.terminal.dispose();
+    if (shouldTriggerCloseCallback) {
+      this.runCloseCallback(instance);
+    }
     this.instances.delete(id2);
     this.notify();
   }
   closeAll() {
     for (const id2 of [...this.instances.keys()]) {
-      this.closeSession(id2);
+      this.closeSession(id2, { triggerCloseCallback: false });
     }
   }
   // --- DOM mount/unmount ---
@@ -148512,10 +148555,11 @@ class TerminalController {
     if (!instance) return;
     instance.isExited = true;
     instance.exitCode = msg.exitCode;
-    if (instance.isDedicated) {
+    if (instance.closeTip || instance.isDedicated) {
+      const tip = instance.closeTip ?? "Press any key to close (equivalent to close action).";
       instance.terminal.write(
         `\r
-\x1B[90m[Process exited with code ${msg.exitCode}. Press any key to close (equivalent to close action).]\x1B[0m`
+\x1B[90m[Process exited with code ${msg.exitCode}. ${tip}]\x1B[0m`
       );
     }
     this.notify();
@@ -148591,6 +148635,8 @@ class TerminalController {
         outputActive: inst.lastOutputTime > 0 && Date.now() - inst.lastOutputTime < OUTPUT_IDLE_THRESHOLD,
         command: inst.command,
         args: inst.args,
+        closeTip: inst.closeTip,
+        closeCallbackUrl: inst.closeCallbackUrl,
         platform: inst.platform
       });
     }
@@ -148632,7 +148678,9 @@ class TerminalController {
           cols: pending.cols,
           rows: pending.rows,
           command: pending.command,
-          args: pending.args
+          args: pending.args,
+          closeTip: pending.closeTip,
+          closeCallbackUrl: pending.closeCallbackUrl
         });
       }
       this.pendingCreates = [];
@@ -148715,6 +148763,8 @@ class TerminalController {
           command: serverSession.command,
           args: serverSession.args,
           isDedicated: false,
+          closeTip: serverSession.closeTip,
+          closeCallbackUrl: serverSession.closeCallbackUrl,
           restored: true,
           serverSessionId: serverSession.id,
           platform: serverSession.platform ?? DEFAULT_PTY_PLATFORM
@@ -148737,6 +148787,8 @@ class TerminalController {
       } else if (!instance.serverSessionId) {
         instance.serverSessionId = serverSession.id;
       }
+      instance.closeTip = serverSession.closeTip;
+      instance.closeCallbackUrl = serverSession.closeCallbackUrl;
       instance.platform = serverSession.platform ?? DEFAULT_PTY_PLATFORM;
       instance.inputPanelAddon.setPlatform(instance.platform);
       this.serverToLocalSessionId.set(serverSession.id, instance.id);
@@ -148760,12 +148812,45 @@ class TerminalController {
   get discoveredSessions() {
     return this.hasDiscoveredSessions;
   }
+  runCloseCallback(instance) {
+    if (!instance.isExited) return;
+    const callbackUrl = resolveCloseCallbackUrl(instance.closeCallbackUrl, instance.exitCode);
+    if (!callbackUrl) return;
+    navigateCloseCallback(callbackUrl);
+  }
   wsSend(msg) {
     if (this.ws?.readyState === WebSocket.OPEN) {
       this.ws.send(JSON.stringify(msg));
     }
   }
 }
+function resolveCloseCallbackUrl(raw2, exitCode) {
+  if (!raw2) return null;
+  if (typeof raw2 === "string") {
+    const trimmed = raw2.trim();
+    return trimmed.length > 0 ? trimmed : null;
+  }
+  const exact = raw2[exitCode == null ? "null" : String(exitCode)];
+  if (typeof exact === "string" && exact.trim().length > 0) return exact.trim();
+  const fallback = raw2["*"];
+  if (typeof fallback === "string" && fallback.trim().length > 0) return fallback.trim();
+  return null;
+}
+function navigateCloseCallback(rawUrl) {
+  let parsed;
+  try {
+    parsed = new URL(rawUrl, window.location.origin);
+  } catch {
+    return;
+  }
+  if (parsed.origin === window.location.origin) {
+    const href = `${parsed.pathname}${parsed.search}${parsed.hash}`;
+    const targetArea = navController.getAreaForPath(parsed.pathname);
+    navController.push(targetArea, href, null);
+    return;
+  }
+  window.open(parsed.toString(), "_blank", "noopener,noreferrer");
+}
 const terminalController = new TerminalController();
 const TerminalContext = reactExports.createContext(null);
 function useTerminalContext() {
@@ -148966,13 +149051,14 @@ function Config() {
   const [newSchemaSource, setNewSchemaSource] = reactExports.useState("spec-driven");
   const { data: configYaml, isLoading: configLoading } = useOpsxProjectConfigSubscription();
   const {
-    data: schemas,
+    data: configBundle,
     isLoading: schemasLoading,
     error: schemasError
-  } = useOpsxSchemasSubscription();
+  } = useOpsxConfigBundleSubscription();
+  const schemas = configBundle?.schemas;
   const [selectedSchema, setSelectedSchema] = reactExports.useState(void 0);
-  const { data: schemaDetail } = useOpsxSchemaDetailSubscription(selectedSchema);
-  const { data: schemaResolution } = useOpsxSchemaResolutionSubscription(selectedSchema);
+  const schemaDetail = selectedSchema ? configBundle?.schemaDetails[selectedSchema] ?? null : null;
+  const schemaResolution = selectedSchema ? configBundle?.schemaResolutions[selectedSchema] ?? null : null;
   const { data: schemaFiles, error: schemaFilesError } = useOpsxSchemaFilesSubscription(selectedSchema);
   const { data: templates } = useOpsxTemplatesSubscription(selectedSchema);
   const { data: templateContents } = useOpsxTemplateContentsSubscription(selectedSchema);
@@ -150241,7 +150327,6 @@ function Config() {
 }
 function Dashboard() {
   const { data: statuses, isLoading, error } = useOpsxStatusListSubscription();
-  const { createDedicatedSession } = useTerminalContext();
   const summary = reactExports.useMemo(() => {
     const totalChanges = statuses?.length ?? 0;
     const totalArtifacts = statuses?.reduce((count2, status) => count2 + status.artifacts.length, 0) ?? 0;
@@ -150252,15 +150337,8 @@ function Dashboard() {
     return { totalChanges, totalArtifacts, doneArtifacts };
   }, [statuses]);
   const runNewChange = reactExports.useCallback(() => {
-    const name2 = window.prompt("Change name (kebab-case):");
-    if (!name2) return;
-    const schema2 = window.prompt("Schema (optional):");
-    const args = ["new", "change", name2.trim()];
-    if (schema2) {
-      args.push("--schema", schema2.trim());
-    }
-    createDedicatedSession("openspec", args);
-  }, [createDedicatedSession]);
+    navController.activatePop("/opsx-new");
+  }, []);
   if (isLoading && !statuses) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "route-loading animate-pulse", children: "Loading dashboard..." });
   }
@@ -150293,13 +150371,35 @@ function Dashboard() {
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(StatCard, { label: "Active Changes", value: summary.totalChanges }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(StatCard, { label: "Artifacts Complete", value: `${summary.doneArtifacts}/${summary.totalArtifacts}` }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(StatCard, { label: "Completion", value: summary.totalArtifacts > 0 ? `${Math.round(summary.doneArtifacts / summary.totalArtifacts * 100)}%` : "0%" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        StatCard,
+        {
+          label: "Artifacts Complete",
+          value: `${summary.doneArtifacts}/${summary.totalArtifacts}`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        StatCard,
+        {
+          label: "Completion",
+          value: summary.totalArtifacts > 0 ? `${Math.round(summary.doneArtifacts / summary.totalArtifacts * 100)}%` : "0%"
+        }
+      )
     ] }),
     !hasChanges && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-border text-muted-foreground rounded-md border border-dashed p-6 text-center text-sm", children: [
-      "No active changes yet. Use ",
-      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "/opsx:new" }),
-      " to create your first change."
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "No active changes yet." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: runNewChange,
+          className: "text-primary mt-2 inline-flex items-center gap-1 hover:underline",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "h-3.5 w-3.5" }),
+            "/opsx:new"
+          ]
+        }
+      )
     ] }),
     hasChanges && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-border divide-border divide-y rounded-lg border", children: statuses?.map((status) => {
       const done = status.artifacts.filter((a2) => a2.status === "done").length;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openspecui/web",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "type": "module",
   "bin": {
     "openspecui-ssg": "./dist-ssg/ssg-cli.mjs"
@@ -61,8 +61,8 @@
     "vitest": "^4.0.18",
     "yaml": "^2.8.0",
     "yargs": "^18.0.0",
+    "@openspecui/server": "1.2.0",
     "xterm-input-panel": "1.0.0",
-    "@openspecui/server": "1.1.0",
     "@openspecui/search": "1.1.0"
   },
   "scripts": {