@notis_ai/cli 0.2.0-beta.167.1 → 0.2.0-beta.177.1

package/dist/agent-hooks/notis-agent-hook.mjs

@@ -9050,7 +9050,7 @@ var BUNDLE_DIR = join4(OUTPUT_DIR, "bundle");
 var MANIFEST_FILE = join4(OUTPUT_DIR, "manifest.json");
 var METADATA_DIR = "metadata";
 var CLI_ROOT = resolve3(dirname3(fileURLToPath2(import.meta.url)), "../..");
-var TEMPLATE_SDK_DIR = join4(CLI_ROOT, "template", "packages", "sdk");
+var TEMPLATE_SDK_DIR = join4(CLI_ROOT, "dist", "sdk");
 var NOTIS_APP_CATEGORIES = [
   "Productivity",
   "Sales & Marketing",
@@ -11533,7 +11533,7 @@ function resolveHarnessReactVersion(projectDir) {
   const candidates = [
     join5(projectDir, "node_modules", "@notis", "sdk", "package.json"),
     join5(REPO_ROOT, "packages", "sdk", "package.json"),
-    join5(CLI_ROOT2, "template", "packages", "sdk", "package.json")
+    join5(CLI_ROOT2, "dist", "sdk", "package.json")
   ];
   for (const candidate of candidates) {
     const pkg = readJsonFile(candidate);
@@ -16633,7 +16633,7 @@ async function discoverSupabaseSqlTool(runtime) {
   return match;
 }
 function unwrapToolExecutionPayload(payload) {
-  return payload?.data?.results?.[0]?.response?.data ?? payload?.results?.[0]?.response?.data ?? payload?.data?.result ?? payload?.result ?? payload?.data ?? payload;
+  return payload?.data?.data?.results?.[0]?.response?.data ?? payload?.data?.results?.[0]?.response?.data ?? payload?.results?.[0]?.response?.data ?? payload?.data?.result ?? payload?.result ?? payload?.data ?? payload;
 }
 function parseJsonCandidate(value) {
   if (typeof value !== "string") return null;
@@ -16642,20 +16642,17 @@ function parseJsonCandidate(value) {
     return JSON.parse(trimmed);
   } catch {
     const boundaryEnd = trimmed.lastIndexOf("</untrusted-data");
-    const boundaryStart = boundaryEnd >= 0 ? trimmed.lastIndexOf("<untrusted-data", boundaryEnd) : -1;
-    const contentStart = boundaryStart >= 0 ? trimmed.indexOf(">", boundaryStart) + 1 : -1;
-    if (contentStart > 0 && boundaryEnd > contentStart) {
-      const inner = trimmed.slice(contentStart, boundaryEnd).trim().replace(/^(?:\\r?\\n)+/, "").replace(/(?:\\r?\\n)+$/, "").trim();
+    const boundaryName = boundaryEnd >= 0 ? trimmed.slice(boundaryEnd + 2, trimmed.indexOf(">", boundaryEnd)) : null;
+    const opening = boundaryName ? `<${boundaryName}>` : null;
+    for (let boundaryStart = opening ? trimmed.indexOf(opening) : -1; boundaryStart >= 0 && boundaryStart < boundaryEnd; boundaryStart = trimmed.indexOf(opening, boundaryStart + opening.length)) {
+      const contentStart = boundaryStart + opening.length;
+      const inner = trimmed.slice(contentStart, boundaryEnd).trim().replace(/^(?:(?:\\r)?\\n)+/, "").replace(/(?:(?:\\r)?\\n)+$/, "").trim();
       try {
         return JSON.parse(inner);
-      } catch (error) {
-        const nested = parseJsonCandidate(inner);
-        if (nested !== null) return nested;
-        throw usageError(
-          `Supabase diagnostic rows were not valid JSON: ${error instanceof Error ? error.message : String(error)}; prefix=${JSON.stringify(inner.slice(0, 100))}`
-        );
+      } catch {
       }
     }
+    if (boundaryEnd >= 0) throw usageError("Supabase diagnostic rows were not valid JSON.");
     const arrayMatch = trimmed.match(/(\[[\s\S]*\])/);
     if (arrayMatch) {
       try {

package/dist/base-skills/notis-apps/references/design.md

@@ -15,12 +15,25 @@
 - Let Notis own navigation, folder trees, and search. Use `PageHeading`,
   `NativeSelect`, `.list-row`, and `useTopBarSearch` instead of duplicating chrome.
 - Prefer inline optimistic edits for simple changes, with rollback on failure.
-  Use a dialog for multi-field edits or destructive confirmation.
+  Use SDK `Dialog` for multi-field edits or destructive confirmation; keep its actions app-owned.
 
 Build enforces the existing design rules and reports violations by file/line.
 Use those diagnostics to fix specific problems; passing them does not establish
 that the design is good. See [troubleshooting](troubleshooting.md) when needed.
 
+### Controls and side panels
+
+- **Keep controls with what they control.** Filters, counts, and Create belong
+  above the list; record actions belong inside the detail panel. Only controls
+  that affect both panes belong above both.
+- **Align sibling panes.** Start the list and detail panel at the same height,
+  with consistent header spacing and control sizes.
+- **Keep secondary actions quiet.** Put occasional destructive actions in an
+  overflow menu, retaining their confirmation step.
+
+For example, a ticket view has two side-by-side panes: **Tickets / New ticket →
+filters → list**, and **ticket ID / actions / close → details**.
+
 ### Look at the result
 
 Run build and verification, then inspect screenshots of the affected view at a

package/dist/base-skills/notis-apps/references/sdk.md

@@ -23,6 +23,7 @@ already installs `ShortcutProvider`; app code should not add a second provider.
 | `NotisSelectionBoundary` | `(NotisSelectionBoundaryProps) => ReactElement` | Attach structured, explicitly untrusted app/resource/selection context to selected content and copy operations |
 | `SelectionCheckbox` / `SelectionMarquee` | components | Standard selection controls backed by `useCollectionInteractions` |
 | `MultiSelectActionBar` | component | Standard bulk actions with pending/disabled state and shortcut support |
+| `Dialog` | `{ open, onClose, title, description?, role?, children }` | Themed native modal with top-layer stacking, focus handling and background shortcut isolation. Use `role="alertdialog"` for destructive confirmation; put the safe action first. |
 
 Import headless collection action types and helpers from
 `@notis/sdk/interactions`. Keep an open detail view synchronized with

package/dist/sdk/src/components/Dialog.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { useEffect, useId, useRef, type ReactNode } from 'react';
+
+export interface DialogProps {
+  open: boolean;
+  /** Request dismissal. Keep open unchanged to prevent dismissal while saving. */
+  onClose: () => void;
+  title: ReactNode;
+  description?: ReactNode;
+  role?: 'dialog' | 'alertdialog';
+  children: ReactNode;
+}
+
+/** Native top-layer dialog; content and actions remain app-owned. */
+export function Dialog({ open, onClose, title, description, role = 'dialog', children }: DialogProps) {
+  const ref = useRef<HTMLDialogElement>(null);
+  const titleId = useId();
+  const descriptionId = useId();
+
+  useEffect(() => {
+    if (!open) return;
+    const dialog = ref.current!;
+    dialog.showModal();
+    return () => dialog.close();
+  }, [open]);
+
+  return (
+    <dialog
+      ref={ref}
+      className="notis-dialog"
+      role={role}
+      aria-labelledby={titleId}
+      aria-describedby={description == null ? undefined : descriptionId}
+      onCancel={(event) => {
+        event.preventDefault();
+        onClose();
+      }}
+      onKeyDown={(event) => event.stopPropagation()}
+    >
+      <h2 id={titleId} className="notis-dialog-title">{title}</h2>
+      {description != null && <p id={descriptionId} className="notis-dialog-description">{description}</p>}
+      {children}
+    </dialog>
+  );
+}

package/{template/packages → dist}/sdk/src/index.ts

@@ -72,6 +72,8 @@ export {
 } from './documents';
 
 // Multi-select components
+export { Dialog } from './components/Dialog';
+export type { DialogProps } from './components/Dialog';
 export { MultiSelectActionBar } from './components/MultiSelectActionBar';
 export { MultiSelectCheckbox, MultiSelectCheckbox as SelectionCheckbox } from './components/MultiSelectCheckbox';
 export { MultiSelectDragOverlay, MultiSelectDragOverlay as SelectionMarquee } from './components/MultiSelectDragOverlay';

package/{template/packages → dist}/sdk/src/interactions/shortcuts.tsx

@@ -215,6 +215,14 @@ function consumeShortcut(event: KeyboardEvent, definition: ShortcutDefinition):
   void definition.onTrigger(event);
 }
 
+// Native dialogs make the background inert, but document capture listeners still
+// receive their keyboard events. Leave those events to the dialog and its controls.
+function isDialogEvent(event: KeyboardEvent): boolean {
+  return event.composedPath().some((target) =>
+    target instanceof HTMLElement && target.matches('dialog.notis-dialog[open]'),
+  );
+}
+
 export function ShortcutProvider({ children }: { children: ReactNode }) {
   const parentRegistry = useContext(ShortcutContext);
   if (parentRegistry) return <>{children}</>;
@@ -280,7 +288,7 @@ function registerFallbackShortcut(input: Omit<ShortcutRegistration, 'id' | 'orde
       registrations,
       nextId: 1,
       dispatch: (event) => {
-        if (event.defaultPrevented) return;
+        if (event.defaultPrevented || isDialogEvent(event)) return;
         const editable = isEditableShortcutEvent(event);
         const token = chordToken(eventChord(event));
         for (const registration of applicableRegistrations(registrations.values())) {
@@ -370,6 +378,7 @@ function ShortcutProviderRoot({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || isDialogEvent(event)) return;
       const editable = isEditableShortcutEvent(event);
       if (!editable && !event.repeat && event.key === '?' && !event.metaKey && !event.ctrlKey && !event.altKey) {
         event.preventDefault();

package/{template/packages → dist}/sdk/src/styles.css

@@ -8,94 +8,113 @@
  * The portal injects the live Notis theme variables at render time.
  */
 
+/* Top-layer surfaces must remain distinct from the app's flat content panels. */
+dialog.notis-dialog {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  box-sizing: border-box;
+  width: min(28rem, calc(100% - 2rem));
+  max-height: calc(100dvh - 2rem);
+  overflow: auto;
+  padding: 1.25rem;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  box-shadow: 0 16px 48px rgb(0 0 0 / 0.2);
+}
+
+dialog.notis-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
+.notis-dialog-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; }
+.notis-dialog-description { margin: 0.5rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.875rem; line-height: 1.5; }
+
 /* Framework-neutral styles: the app owns its Tailwind entry point. This file
- * is also consumed in shadow roots and by apps on older Tailwind versions. */
-@layer base {
-  * {
-    border-color: hsl(var(--border));
-  }
-  [data-notis-app-root] {
-    color: hsl(var(--foreground));
-    display: block;
-    min-height: 100%;
-  }
+ * is also consumed in shadow roots and by apps on older Tailwind versions.
+ * Keep rules outside Tailwind-owned @layer blocks: Vite processes this import
+ * separately from the app stylesheet, so Tailwind 3 has no matching directives. */
+* {
+  border-color: hsl(var(--border));
+}
+[data-notis-app-root] {
+  color: hsl(var(--foreground));
+  display: block;
+  min-height: 100%;
 }
 
-@layer components {
-  .notis-app-shell {
-    margin-inline: auto;
-    width: 100%;
-    max-width: var(--portal-page-max-width);
-    padding: 1.5rem 1rem;
-  }
+.notis-app-shell {
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--portal-page-max-width);
+  padding: 1.5rem 1rem;
+}
 
-  /* Flat panel: no border or shadow around items. */
-  .notis-app-surface {
-    border-radius: 1rem;
-    background-color: hsl(var(--muted));
-    color: hsl(var(--card-foreground));
-  }
+/* Flat panel: no border or shadow around items. */
+.notis-app-surface {
+  border-radius: 1rem;
+  background-color: hsl(var(--muted));
+  color: hsl(var(--card-foreground));
+}
 
-  .list-row {
-    border-radius: 0.75rem;
-    background-color: hsl(var(--muted));
-    padding: 0.75rem 1rem;
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-duration: 150ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  }
+.list-row {
+  border-radius: 0.75rem;
+  background-color: hsl(var(--muted));
+  padding: 0.75rem 1rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
 
-  .list-row-selected {
-    background-color: hsl(var(--primary) / 0.06);
-  }
+.list-row-selected {
+  background-color: hsl(var(--primary) / 0.06);
+}
 
-  /* Split pages are full-bleed; only the list pane carries a hairline. */
-  .notis-app-split {
-    display: flex;
-    height: 100%;
-    min-height: 0;
-    width: 100%;
-    max-width: none;
-    flex-direction: column;
-  }
+/* Split pages are full-bleed; only the list pane carries a hairline. */
+.notis-app-split {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+  max-width: none;
+  flex-direction: column;
+}
 
-  .notis-app-pane-list {
-    width: 100%;
-    flex-shrink: 0;
-    background-color: hsl(var(--muted) / 0.4);
-  }
+.notis-app-pane-list {
+  width: 100%;
+  flex-shrink: 0;
+  background-color: hsl(var(--muted) / 0.4);
+}
 
-  .notis-app-pane-detail {
-    min-width: 0;
-    flex: 1 1 0%;
-    background-color: hsl(var(--background));
-  }
+.notis-app-pane-detail {
+  min-width: 0;
+  flex: 1 1 0%;
+  background-color: hsl(var(--background));
+}
 
-  .notis-app-section {
-    padding: 1.25rem;
-  }
+.notis-app-section {
+  padding: 1.25rem;
+}
 
-  @media (min-width: 768px) {
-    .notis-app-shell { padding-block: 2rem; }
-    .notis-app-section { padding: 1.5rem; }
-  }
+@media (min-width: 768px) {
+  .notis-app-shell { padding-block: 2rem; }
+  .notis-app-section { padding: 1.5rem; }
+}
 
-  @media (min-width: 1024px) {
-    .list-row { background-color: transparent; }
-    .list-row:hover { background-color: hsl(var(--muted) / 0.6); }
-    .list-row-selected,
-    .list-row-selected:hover { background-color: hsl(var(--primary) / 0.06); }
-    .notis-app-split { flex-direction: row; }
-    .notis-app-pane-list {
-      width: 20rem;
-      border-right-width: 1px;
-      border-right-color: hsl(var(--border));
-    }
+@media (min-width: 1024px) {
+  .list-row { background-color: transparent; }
+  .list-row:hover { background-color: hsl(var(--muted) / 0.6); }
+  .list-row-selected,
+  .list-row-selected:hover { background-color: hsl(var(--primary) / 0.06); }
+  .notis-app-split { flex-direction: row; }
+  .notis-app-pane-list {
+    width: 20rem;
+    border-right-width: 1px;
+    border-right-color: hsl(var(--border));
   }
+}
 
-  @media (min-width: 1280px) {
-    .notis-app-pane-list { width: 24rem; }
-  }
+@media (min-width: 1280px) {
+  .notis-app-pane-list { width: 24rem; }
 }
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notis_ai/cli",
-  "version": "0.2.0-beta.167.1",
+  "version": "0.2.0-beta.177.1",
   "description": "Agent-first Notis CLI for apps and generic tool execution",
   "type": "module",
   "bin": {

package/src/command-specs/diagnostics.js

@@ -58,7 +58,8 @@ async function discoverSupabaseSqlTool(runtime) {
 
 export function unwrapToolExecutionPayload(payload) {
   return (
-    payload?.data?.results?.[0]?.response?.data
+    payload?.data?.data?.results?.[0]?.response?.data
+    ?? payload?.data?.results?.[0]?.response?.data
     ?? payload?.results?.[0]?.response?.data
     ?? payload?.data?.result
     ?? payload?.result
@@ -74,30 +75,30 @@ function parseJsonCandidate(value) {
     return JSON.parse(trimmed);
   } catch {
     const boundaryEnd = trimmed.lastIndexOf('</untrusted-data');
-    const boundaryStart = boundaryEnd >= 0
-      ? trimmed.lastIndexOf('<untrusted-data', boundaryEnd)
-      : -1;
-    const contentStart = boundaryStart >= 0 ? trimmed.indexOf('>', boundaryStart) + 1 : -1;
-    if (contentStart > 0 && boundaryEnd > contentStart) {
+    const boundaryName = boundaryEnd >= 0
+      ? trimmed.slice(boundaryEnd + 2, trimmed.indexOf('>', boundaryEnd)) : null;
+    const opening = boundaryName ? `<${boundaryName}>` : null;
+    for (let boundaryStart = opening ? trimmed.indexOf(opening) : -1;
+      boundaryStart >= 0 && boundaryStart < boundaryEnd;
+      boundaryStart = trimmed.indexOf(opening, boundaryStart + opening.length)) {
+      const contentStart = boundaryStart + opening.length;
       // Supabase MCP sometimes returns the prose envelope with literal "\\n"
       // separators. Strip those only at the boundary: globally replacing them
       // corrupts valid escaped newlines inside JSON string values.
       const inner = trimmed
         .slice(contentStart, boundaryEnd)
         .trim()
-        .replace(/^(?:\\r?\\n)+/, '')
-        .replace(/(?:\\r?\\n)+$/, '')
+        .replace(/^(?:(?:\\r)?\\n)+/, '')
+        .replace(/(?:(?:\\r)?\\n)+$/, '')
         .trim();
       try {
         return JSON.parse(inner);
-      } catch (error) {
-        const nested = parseJsonCandidate(inner);
-        if (nested !== null) return nested;
-        throw usageError(
-          `Supabase diagnostic rows were not valid JSON: ${error instanceof Error ? error.message : String(error)}; prefix=${JSON.stringify(inner.slice(0, 100))}`,
-        );
+      } catch {
+        // The provider also mentions this marker in its introductory prose.
+        // Try its actual opening, never a nested tool result's different marker.
       }
     }
+    if (boundaryEnd >= 0) throw usageError('Supabase diagnostic rows were not valid JSON.');
     const arrayMatch = trimmed.match(/(\[[\s\S]*\])/);
     if (arrayMatch) {
       try {

package/src/runtime/app-platform.js

@@ -27,7 +27,7 @@ const BUNDLE_DIR = join(OUTPUT_DIR, 'bundle');
 const MANIFEST_FILE = join(OUTPUT_DIR, 'manifest.json');
 const METADATA_DIR = 'metadata';
 const CLI_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '../..');
-const TEMPLATE_SDK_DIR = join(CLI_ROOT, 'template', 'packages', 'sdk');
+const TEMPLATE_SDK_DIR = join(CLI_ROOT, 'dist', 'sdk');
 export const NOTIS_APP_CATEGORIES = [
   'Productivity',
   'Sales & Marketing',
@@ -1847,7 +1847,7 @@ function listFilesRecursive(dir, base = dir, results = []) {
 /**
  * Keep an app's embedded `packages/sdk` copy identical to the SDK this CLI
  * ships. The copy is a mirror by contract (the parity test in the CLI keeps
- * the template in step with packages/sdk), so an app never edits it; before
+ * the bundled artifact generated from packages/sdk), so an app never edits it; before
  * this sync existed every app silently ran whatever SDK snapshot it was
  * scaffolded with and never received hook or style updates.
  *

package/src/runtime/app-test-server.js

@@ -80,7 +80,7 @@ function resolveHarnessReactVersion(projectDir) {
   const candidates = [
     join(projectDir, 'node_modules', '@notis', 'sdk', 'package.json'),
     join(REPO_ROOT, 'packages', 'sdk', 'package.json'),
-    join(CLI_ROOT, 'template', 'packages', 'sdk', 'package.json'),
+    join(CLI_ROOT, 'dist', 'sdk', 'package.json'),
   ];
   for (const candidate of candidates) {
     const pkg = readJsonFile(candidate);

package/template/packages/sdk/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "types": ["node", "react", "react-dom"],
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "declaration": true,
-    "outDir": "dist",
-    "rootDir": "src"
-  },
-  "include": ["src"]
-}