@notis_ai/cli 0.2.0-beta.16.1 → 0.2.0-beta.161.1

package/template/package.json

@@ -1,32 +1,35 @@
 {
   "name": "my-notis-app",
   "version": "0.1.0",
+  "notisAppVersion": "0.1.0",
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
+    "type-check": "tsc --noEmit",
+    "dev": "vite --configLoader runner",
+    "build": "vite build --configLoader runner"
   },
   "dependencies": {
-    "@notis/sdk": "file:./packages/notis-sdk",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@notis/sdk": "file:./packages/sdk",
+    "@phosphor-icons/react": "^2.1.10",
+    "@radix-ui/react-slot": "^1.3.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.474.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwind-merge": "^2.6.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "postcss": "^8.0.0",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.0.0",
-    "vite": "^6.0.0"
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "postcss": "^8.5.28",
+    "tailwindcss": "^4.3.3",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
+    "vite": "^8.2.2",
+    "@tailwindcss/postcss": "^4.3.3"
   }
 }

package/template/packages/{notis-sdk → sdk}/package.json

@@ -1,19 +1,26 @@
 {
   "name": "@notis/sdk",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
+    "./interactions": "./src/interactions.ts",
     "./config": "./src/config.ts",
     "./vite": "./src/vite.ts",
     "./ui": "./src/ui.ts",
     "./styles.css": "./src/styles.css"
   },
   "files": [
-    "src",
-    "template"
+    "src"
   ],
+  "scripts": {
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
+  },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
@@ -21,6 +28,9 @@
     "@vitejs/plugin-react": ">=4.0.0"
   },
   "devDependencies": {
-    "typescript": "^5.0.0"
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "typescript": "^7.0.2"
   }
 }

package/template/packages/sdk/src/agentContext.ts

@@ -0,0 +1,36 @@
+/** Serializable context shared with the agent. Apps own annotation storage. */
+export interface ContextAttachment {
+  /** Durable HTTPS URL supplied by the app. Sent through the host media pipeline. */
+  url: string;
+  name: string;
+  mimeType: string;
+}
+
+export interface AgentContextContent {
+  title?: string;
+  /** Emoji, Phosphor icon name, or HTTPS image URL. Never executable markup. */
+  icon?: string;
+  /** An app-defined kind, not a closed list of annotation types. */
+  kind?: string;
+  text?: string;
+  comment?: string;
+  preview?: { format: 'text' | 'markdown'; content: string };
+  /** Any JSON-serializable value: coordinates, chart state, loaded records, etc. */
+  data?: unknown;
+  attachments?: ContextAttachment[];
+}
+
+export interface AgentContextItem extends AgentContextContent {
+  /** Stable within this app. The host scopes IDs to the originating app. */
+  id: string;
+  resource?: import('./runtime').ContextResource | null;
+}
+
+/** Host-stamped origin. Apps describe resources; the host identifies the app/view. */
+export interface AgentContextSource {
+  appId: string;
+  appName: string;
+  viewSlug: string;
+  viewName: string;
+  viewUrl?: string | null;
+}

package/template/packages/sdk/src/components/DocumentEditor.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import type { CSSProperties, ReactElement } from 'react';
+import { useNotisRuntime } from '../provider';
+import { useDocument } from '../hooks/useDocument';
+import { Markdown } from './Markdown';
+import type { NotisDocumentEditorProps } from '../runtime';
+
+const fallbackNoticeStyle: CSSProperties = {
+  marginTop: '0.75rem',
+  fontSize: '12px',
+  color: 'hsl(var(--muted-foreground))',
+};
+
+const fallbackFrameStyle: CSSProperties = {
+  borderRadius: '0.5rem',
+  border: '1px dashed hsl(var(--border))',
+  padding: '1rem',
+  fontSize: '13px',
+  color: 'hsl(var(--muted-foreground))',
+};
+
+const fallbackTitleStyle: CSSProperties = {
+  margin: '0 0 0.75rem',
+  fontSize: '1.5rem',
+  fontWeight: 700,
+  letterSpacing: '-0.01em',
+  color: 'hsl(var(--foreground))',
+};
+
+/**
+ * Read-only stand-in used when no host editor is available (standalone dev
+ * harness, snapshots). Markdown content renders via `Markdown`; other content
+ * types get a typed placeholder.
+ */
+function DocumentEditorFallback({ documentId, variant = 'full', className }: NotisDocumentEditorProps) {
+  const runtime = useNotisRuntime();
+  const { document, loading, error } = useDocument(documentId);
+  // Listing screenshots should show the app as it looks in the portal, so the
+  // harness-only editing notice stays out of scenario captures.
+  const isScreenshot = Boolean(runtime?.context?.screenshotScenario);
+
+  if (loading) {
+    return <div className={className} style={fallbackFrameStyle}>Loading document…</div>;
+  }
+  if (error || !document) {
+    return (
+      <div className={className} style={fallbackFrameStyle}>
+        {error?.message ?? 'Document not found.'}
+      </div>
+    );
+  }
+
+  const isMarkdown = document.contentType === 'markdown' || !document.contentType;
+  return (
+    <div className={className}>
+      {variant === 'full' ? <h1 style={fallbackTitleStyle}>{document.title}</h1> : null}
+      {isMarkdown ? (
+        <>
+          <Markdown value={document.contentMarkdown ?? ''} />
+          {isScreenshot ? null : (
+            <p style={fallbackNoticeStyle}>Read-only preview — editing is available inside the Notis portal.</p>
+          )}
+        </>
+      ) : document.contentType === 'view' ? (
+        <div style={fallbackFrameStyle}>
+          {document.viewType === 'report'
+            ? 'Interactive report'
+            : document.viewType === 'html'
+              ? 'Interactive HTML document'
+              : 'View document'} — open it in Notis Documents for
+          the full native experience.
+        </div>
+      ) : (
+        <div style={fallbackFrameStyle}>
+          {document.fileType ? `${document.fileType.toUpperCase()} document` : 'File document'} — open it in
+          the Notis portal to view.
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Embeds the document editor for a document anywhere in an app view. The host
+ * (portal) provides the implementation through `runtime.ui.DocumentEditor` and
+ * dispatches on the document's content type (markdown -> rich text editor,
+ * files -> matching viewer, views -> their trusted native Documents surface).
+ * Outside the portal this falls back to a read-only preview or an explicit
+ * open-in-Documents notice for native views.
+ *
+ * ```tsx
+ * <DocumentEditor documentId={entry.id} variant="body" className="min-h-[320px]" />
+ * ```
+ */
+export function DocumentEditor(props: NotisDocumentEditorProps): ReactElement {
+  const runtime = useNotisRuntime();
+  const HostEditor = runtime?.ui?.DocumentEditor;
+  if (HostEditor) {
+    return <HostEditor {...props} />;
+  }
+  return <DocumentEditorFallback {...props} />;
+}

package/template/packages/sdk/src/components/Markdown.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import type { AnchorHTMLAttributes, ReactElement } from 'react';
+import ReactMarkdown, { type Components } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export interface MarkdownProps {
+  /** Markdown source to render. */
+  value: string;
+  /** Typography scale. 'sm' suits dense surfaces (cards, list rows). */
+  size?: 'sm' | 'base';
+  className?: string;
+  /** Per-element overrides, passed through to react-markdown. */
+  components?: Components;
+}
+
+function MarkdownLink({
+  href,
+  children,
+  node: _node,
+  ...rest
+}: AnchorHTMLAttributes<HTMLAnchorElement> & { node?: unknown }) {
+  const isExternal = typeof href === 'string' && /^https?:\/\//i.test(href);
+  return (
+    <a
+      href={href}
+      {...(isExternal ? { target: '_blank', rel: 'noreferrer noopener' } : {})}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}
+
+const defaultComponents: Components = {
+  a: MarkdownLink,
+};
+
+/**
+ * Renders a markdown value with Notis typography. Markdown is a value type:
+ * use this anywhere markdown appears — document content, database fields,
+ * generated text. Styling comes from `.notis-markdown` rules in the SDK
+ * stylesheet and follows the portal theme variables.
+ */
+export function Markdown({ value, size = 'base', className, components }: MarkdownProps): ReactElement {
+  const classes = ['notis-markdown', size === 'sm' ? 'notis-markdown--sm' : null, className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={classes}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={components ? { ...defaultComponents, ...components } : defaultComponents}
+      >
+        {value}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/template/packages/sdk/src/components/MarkdownEditor.tsx

@@ -0,0 +1,121 @@
+import type { ChangeEvent, KeyboardEvent, ReactElement } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useNotisRuntime } from '../provider';
+import type { NotisMarkdownEditorProps } from '../runtime';
+
+function MarkdownEditorFallback({
+  value,
+  revision,
+  readOnly,
+  autosaveMs = 1500,
+  placeholder = 'Write in Markdown…',
+  className,
+  onChange,
+  onSave,
+  onDirtyChange,
+  onSavingChange,
+}: NotisMarkdownEditorProps) {
+  const [draft, setDraft] = useState(value);
+  const [saveAttempt, setSaveAttempt] = useState(0);
+  const draftRef = useRef(value);
+  const dirtyRef = useRef(false);
+  const savingRef = useRef(false);
+  const revisionRef = useRef(revision);
+  const onSaveRef = useRef(onSave);
+  const readOnlyRef = useRef(readOnly);
+  const unmountedRef = useRef(false);
+  const saveRef = useRef<() => Promise<void>>(async () => undefined);
+
+  useEffect(() => {
+    onSaveRef.current = onSave;
+    readOnlyRef.current = readOnly;
+  }, [onSave, readOnly]);
+
+  useEffect(() => {
+    if (dirtyRef.current) return;
+    draftRef.current = value;
+    revisionRef.current = revision;
+    setDraft(value);
+  }, [revision, value]);
+
+  const save = useCallback(async () => {
+    if (!onSave || !dirtyRef.current || readOnly || savingRef.current) return;
+    const markdown = draftRef.current;
+    savingRef.current = true;
+    if (!unmountedRef.current) onSavingChange?.(true);
+    try {
+      const result = await onSave({ markdown, expectedRevision: revisionRef.current });
+      if (result?.revision) revisionRef.current = result.revision;
+      if (draftRef.current === markdown) {
+        dirtyRef.current = false;
+        if (!unmountedRef.current) onDirtyChange?.(false);
+      }
+    } finally {
+      savingRef.current = false;
+      if (!unmountedRef.current) onSavingChange?.(false);
+      if (dirtyRef.current && draftRef.current !== markdown) {
+        if (unmountedRef.current) {
+          void saveRef.current().catch((error) => console.error('Could not save Markdown on unmount', error));
+        } else {
+          setSaveAttempt((attempt) => attempt + 1);
+        }
+      }
+    }
+  }, [onDirtyChange, onSave, onSavingChange, readOnly]);
+  saveRef.current = save;
+
+  useEffect(() => {
+    unmountedRef.current = false;
+    return () => {
+      unmountedRef.current = true;
+      if (!savingRef.current) {
+        void saveRef.current().catch((error) => console.error('Could not save Markdown on unmount', error));
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!dirtyRef.current || !onSave || readOnly) return;
+    const timer = window.setTimeout(() => void save(), Math.max(250, autosaveMs));
+    return () => window.clearTimeout(timer);
+  }, [autosaveMs, draft, onSave, readOnly, save, saveAttempt]);
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const next = event.currentTarget.value;
+    draftRef.current = next;
+    setDraft(next);
+    if (!dirtyRef.current) {
+      dirtyRef.current = true;
+      onDirtyChange?.(true);
+    }
+    onChange?.(next);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 's') {
+      event.preventDefault();
+      void save();
+    }
+  };
+
+  return (
+    <textarea
+      value={draft}
+      readOnly={readOnly}
+      placeholder={placeholder}
+      className={className}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      style={{ minHeight: 360, width: '100%', resize: 'vertical' }}
+    />
+  );
+}
+
+/** Use Notis' editor while leaving persistence entirely under app control. */
+export function MarkdownEditor(props: NotisMarkdownEditorProps): ReactElement {
+  const runtime = useNotisRuntime();
+  const HostEditor = runtime?.ui?.MarkdownEditor;
+  return HostEditor
+    ? <HostEditor key={props.resourceKey} {...props} />
+    : <MarkdownEditorFallback key={props.resourceKey} {...props} />;
+}