shraga 0.1.142 → 0.1.144

package/dist/client/index.html

@@ -13,8 +13,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
-    <script type="module" crossorigin src="/assets/index-DbQklb-I.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BLAQpfJ9.css">
+    <script type="module" crossorigin src="/assets/index-D8WQMu83.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BBkhe7pK.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shraga",
-  "version": "0.1.142",
+  "version": "0.1.144",
   "description": "The teammate you delegate coding to — a self-hostable, multi-user AI coding agent web UI (Claude Code, with a pluggable engine seam).",
   "type": "module",
   "main": "./src/index.ts",
@@ -56,6 +56,7 @@
   },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.3.280",
+    "@livx.cc/bare-v3": "0.1.0-alpha.57",
     "@livx.cc/mcp-firebase": "^0.1.14",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",
@@ -67,10 +68,13 @@
     "clsx": "^2.1.1",
     "cron-parser": "^5.5.0",
     "cronstrue": "^3.14.0",
+    "dompurify": "^3.4.16",
     "edge.libx.js": "^0.6.1",
     "express": "^4.21.1",
     "firebase": "^11.0.0",
+    "highlight.js": "~11.11.0",
     "lucide-react": "^0.468.0",
+    "marked": "^18.0.14",
     "mcp-slack-use": "github:Livshitz/mcp-slack-use#38ff8b7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/src/client/bare-v3.d.ts

@@ -0,0 +1,15 @@
+// bare-v3 ships plain JS without typings — just the surface AssistantMarkdown uses.
+declare module '@livx.cc/bare-v3/elements/markdown-stream' {
+  export class MarkdownStream {
+    constructor(options: { Marked: unknown; sanitize: (html: string) => string; code?: (text: string, lang: string) => string });
+    buf: string;
+    attach(el: HTMLElement): this;
+    detach(): void;
+    push(chunk: string): void;
+    end(): void;
+    toHtml(src: string): string;
+  }
+  export function codeBlock(text: string, lang: string): string;
+  export function promptGuide(options?: object): string;
+}
+declare module '@livx.cc/bare-v3/css';

package/src/client/components/AssistantMarkdown.css

@@ -0,0 +1,18 @@
+/* bare-v3 ships its styles in @layer; Tailwind's preflight is unlayered, so it wins regardless of
+   specificity (zeroes borders, strips button chrome). Inside bare-v3 components, roll those
+   properties back to bare's layer. */
+.assistant-md { font-family: inherit; }
+.assistant-md :is(.b3-table-wrap, .b3-alert, .b3-stat, .b3-surface, .b3-badge, .b3-button, .b3-skeleton),
+.assistant-md :is(.b3-table-wrap, .b3-alert) * {
+  border-width: revert-layer;
+  border-style: revert-layer;
+  border-color: revert-layer;
+}
+.assistant-md .b3-button {
+  padding: revert-layer;
+  background: revert-layer;
+  line-height: revert-layer;
+}
+.assistant-md .b3-alert :is(ul, ol) { list-style: revert-layer; padding-inline-start: 1.25em; }
+.assistant-md .b3-alert p + * { margin-block-start: 0.5em; }
+.assistant-md > .not-prose { margin-block: 1em; }

package/src/client/components/AssistantMarkdown.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { Marked } from 'marked';
+import DOMPurify from 'dompurify';
+import hljs from 'highlight.js/lib/common';
+import { MarkdownStream, codeBlock } from '@livx.cc/bare-v3/elements/markdown-stream';
+import '@livx.cc/bare-v3/css';
+import 'highlight.js/styles/github.css';
+import './AssistantMarkdown.css';
+import { NEEDS_AUTH, authedBlobUrl } from './AuthedImage';
+import { useWorkspace } from '@/lib/workspaceContext';
+import { useDarkMode } from '@/hooks/useDarkMode';
+import { logger } from '@/lib/debug';
+
+const log = logger.forComponent('AssistantMarkdown');
+
+// Assistant text renders through bare-v3's MarkdownStream: finished blocks freeze, only the tail
+// re-renders, and half-written syntax never flashes raw. One instance per text block, so text
+// segments split by tool calls each get their own stream.
+
+const RTL_BLOCK_TAGS = new Set(['P', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'TD', 'TH']);
+// bare-v3 component roots — `not-prose` keeps Tailwind Typography off them (it would override their styles).
+const B3_BLOCKS = ['b3-table-wrap', 'b3-alert', 'b3-md-code', 'b3-md-stats', 'b3-md-bars', 'b3-md-tasks'];
+const IMG_CLASS = 'max-h-[80vh] max-w-full rounded-xl border object-contain cursor-pointer hover:opacity-80 transition-opacity';
+
+const purify = DOMPurify(window);
+purify.addHook('afterSanitizeAttributes', (node) => {
+  const el = node as Element;
+  if (RTL_BLOCK_TAGS.has(el.tagName)) el.setAttribute('dir', 'auto');
+  if (B3_BLOCKS.some((c) => el.classList?.contains(c))) el.classList.add('not-prose');
+  if (el.tagName === 'A' && el.hasAttribute('href')) { el.setAttribute('target', '_blank'); el.setAttribute('rel', 'noopener noreferrer'); }
+  if (el.tagName === 'IMG') {
+    el.setAttribute('class', IMG_CLASS);
+    const src = el.getAttribute('src') ?? '';
+    // `/uploads/*` 401s without a bearer header — park the src; resolveImages() swaps in a blob URL.
+    if (NEEDS_AUTH.test(src)) { el.setAttribute('data-authed-src', src); el.removeAttribute('src'); }
+  }
+});
+const sanitize = (html: string) => purify.sanitize(html);
+
+const code = (text: string, lang: string) => {
+  const base = codeBlock(text, lang);
+  if (!lang || !hljs.getLanguage(lang)) return base;
+  const html = hljs.highlight(text, { language: lang, ignoreIllegals: true }).value;
+  return base.replace(/<code>[\s\S]*<\/code>/, () => `<code class="hljs language-${lang}">${html}</code>`);
+};
+
+export function AssistantMarkdown({ text, streaming = false, onImageClick }: { text: string; streaming?: boolean; onImageClick?: (src: string) => void }) {
+  const clean = text.replace(/\[Image #\d+\]\s*/g, '').trim();
+  const ref = useRef<HTMLDivElement>(null);
+  const view = useMemo(() => new MarkdownStream({ Marked, sanitize, code }), []);
+  const shown = useRef<{ text: string; live: boolean } | null>(null);
+  const blobs = useRef(new Map<string, Promise<string>>());
+  const { getToken } = useWorkspace();
+  const { dark } = useDarkMode();
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const s = shown.current;
+    const extends_ = !!s?.live && clean.startsWith(s.text);
+    if (streaming) {
+      if (!extends_) { el.replaceChildren(); view.attach(el); view.push(clean); }
+      else if (clean.length > s!.text.length) view.push(clean.slice(s!.text.length));
+    } else if (extends_) {
+      view.push(clean.slice(s!.text.length));
+      view.end();
+    } else if (!s || s.text !== clean) {
+      view.attach(el); // binds the Copy-button delegate; toHtml renders the settled message in one pass
+      el.innerHTML = view.toHtml(clean);
+    }
+    shown.current = { text: clean, live: streaming };
+    for (const img of el.querySelectorAll<HTMLImageElement>('img[data-authed-src]:not([src])')) {
+      const src = img.dataset.authedSrc!;
+      if (!blobs.current.has(src)) blobs.current.set(src, authedBlobUrl(src, getToken));
+      blobs.current.get(src)!.then((url) => { img.src = url; }, (err) => log.error('image load failed:', src, err));
+    }
+  }, [clean, streaming, view, getToken]);
+
+  useEffect(() => () => {
+    view.detach();
+    shown.current = null;
+    for (const p of blobs.current.values()) p.then(URL.revokeObjectURL, () => {});
+    blobs.current.clear();
+  }, [view]);
+
+  return (
+    <div
+      ref={ref}
+      data-b3-theme={dark ? 'dark' : 'light'}
+      onClick={(e) => { const t = e.target as HTMLElement; if (t instanceof HTMLImageElement && t.src) onImageClick?.(t.src); }}
+      className="b3-root assistant-md bg-transparent prose prose-sm max-w-none dark:prose-invert prose-code:before:content-none prose-code:after:content-none break-words min-w-0"
+    />
+  );
+}

package/src/client/components/AuthedImage.tsx

@@ -5,7 +5,15 @@ import { useWorkspace } from '@/lib/workspaceContext';
 // `/uploads/*` is gated by requireAuth on the server, so a plain <img src>/<a href> GET 401s
 // (no Authorization header). Fetch with a fresh bearer token and render/open a blob URL instead.
 // Other srcs (data:, http(s):, blob:) need no auth.
-const NEEDS_AUTH = /^\/uploads\//;
+export const NEEDS_AUTH = /^\/uploads\//;
+
+/** Fetch an auth-gated src with a bearer token → a blob URL the caller must revoke. */
+export async function authedBlobUrl(src: string, getToken: () => Promise<string | null | undefined>): Promise<string> {
+  const token = await getToken();
+  const res = await fetch(src, { headers: token ? { Authorization: `Bearer ${token}` } : {} });
+  if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+  return URL.createObjectURL(await res.blob());
+}
 
 interface ImageProps {
   src: string;
@@ -29,10 +37,7 @@ export function AuthedImage({ src, alt, className, onClick }: ImageProps) {
     setResolved(null);
     (async () => {
       try {
-        const token = await getToken();
-        const res = await fetch(src, { headers: token ? { Authorization: `Bearer ${token}` } : {} });
-        if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
-        objectUrl = URL.createObjectURL(await res.blob());
+        objectUrl = await authedBlobUrl(src, getToken);
         if (cancelled) URL.revokeObjectURL(objectUrl);
         else setResolved(objectUrl);
       } catch (err) {

package/src/client/components/ChatView.tsx

@@ -1,27 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import rehypeHighlight from 'rehype-highlight';
-import type { Root, Element } from 'hast';
-import type { Plugin } from 'unified';
-
-const RTL_BLOCK_TAGS = new Set(['p', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'td', 'th']);
-const rehypeBidi: Plugin<[], Root> = () => (tree) => {
-  const visit = (node: Root | Element) => {
-    for (const child of (node.children ?? [])) {
-      if (child.type === 'element') {
-        if (RTL_BLOCK_TAGS.has(child.tagName)) {
-          child.properties ??= {};
-          child.properties.dir = 'auto';
-        }
-        visit(child);
-      }
-    }
-  };
-  visit(tree);
-};
-import 'highlight.js/styles/github.css';
-import { ChevronRight, Wrench, User, Bot, Copy, Check, RotateCcw, Pencil, X, SendHorizontal, ShieldQuestion, CheckCircle2, XCircle, Eye, EyeOff, Info, Loader2, BrainCircuit, GitFork, Minimize2 } from 'lucide-react';
+import { ChevronRight, Wrench, User, Bot, Check, RotateCcw, Pencil, X, SendHorizontal, ShieldQuestion, CheckCircle2, XCircle, Eye, EyeOff, Info, Loader2, BrainCircuit, GitFork, Minimize2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { toolPreview } from '@/lib/tool-preview';
 import { annotateLimitReset } from '@/lib/limit-reset';
@@ -32,33 +10,15 @@ import { AuthedImage, AuthedFileLink } from './AuthedImage';
 import { useSlots } from '@/lib/slots';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { ZoomableImage } from './ZoomableImage';
+import { AssistantMarkdown } from './AssistantMarkdown';
 
 // The appwrap iOS WKWebView wedges its GPU compositor when rendering react-markdown's DOM for a chat with
 // history — JS keeps running but paint + hit-testing freeze for ~1-2min (screen stuck/touch-dead) before
 // WebKit lazily restores. The SAME content in mobile Safari and on desktop is fine, so this is specific to
-// the native WKWebView shell, not the web app. Until the native shell issue is fixed, render assistant
+// the native WKWebView shell, not the web app. (Observed with react-markdown; MarkdownStream is unverified there.) Until the native shell issue is fixed, render assistant
 // messages as PLAIN TEXT inside the native app only; full markdown stays on Safari/desktop/web.
 const IS_APPWRAP_NATIVE = typeof window !== 'undefined' && !!(window as { webkit?: { messageHandlers?: { appwrap?: unknown } } }).webkit?.messageHandlers?.appwrap;
 
-function AssistantMarkdown({ text, onImageClick }: { text: string; onImageClick?: (src: string) => void }) {
-  const clean = text.replace(/\[Image #\d+\]\s*/g, '').trim();
-  if (IS_APPWRAP_NATIVE) {
-    return <div className="prose prose-sm max-w-none dark:prose-invert break-words min-w-0 whitespace-pre-wrap">{clean}</div>;
-  }
-  return (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
-      rehypePlugins={[rehypeHighlight, rehypeBidi]}
-      className="prose prose-sm max-w-none dark:prose-invert prose-pre:bg-muted prose-pre:border prose-code:before:content-none prose-code:after:content-none break-words min-w-0"
-      components={{
-        pre: ({ children, ...props }) => <CodeBlock {...props}>{children}</CodeBlock>,
-        a: ({ href, children }) => <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>,
-        img: ({ src, alt }) => <AuthedImage src={src ?? ''} alt={alt ?? ''} className="max-h-[80vh] max-w-full rounded-xl border object-contain cursor-pointer hover:opacity-80 transition-opacity" onClick={(s) => onImageClick?.(s)} />,
-      }}
-    >{clean}</ReactMarkdown>
-  );
-}
-
 function formatTs(ts: number): string {
   const d = new Date(ts);
   const now = new Date();
@@ -397,7 +357,7 @@ const MessageRow = memo(function MessageRow({
             const result = block.type === 'tool_use'
               ? message.blocks.find((b): b is MessageBlock & { type: 'tool_result' } => b.type === 'tool_result' && b.toolUseId === block.toolUseId)
               : undefined;
-            return <BlockRenderer key={i} block={block} isUser={isUser} ts={message.ts} onPermissionRespond={onPermissionRespond} onQuestionRespond={onQuestionRespond} pairedResult={result} onImageClick={onImageClick} busy={busy} screenMap={screenMap} />;
+            return <BlockRenderer key={i} block={block} isUser={isUser} ts={message.ts} onPermissionRespond={onPermissionRespond} onQuestionRespond={onQuestionRespond} pairedResult={result} onImageClick={onImageClick} busy={busy} live={!!busy && block === message.blocks[message.blocks.length - 1]} screenMap={screenMap} />;
           })}
             {isUser && userText && (
               <div className={cn('flex gap-1 items-center justify-end transition-opacity', actionsVisible ? 'opacity-100' : 'opacity-0 group-hover/row:opacity-100')}>
@@ -462,7 +422,7 @@ function CompactMarkerDivider({ summary, compactedCount }: { summary: string; co
   );
 }
 
-function BlockRenderer({ block, isUser, ts, onPermissionRespond, onQuestionRespond, pairedResult, onImageClick, busy, screenMap }: { block: MessageBlock; isUser: boolean; ts?: number; onPermissionRespond?: (id: string, allow: boolean, allowAll?: boolean) => void; onQuestionRespond?: (id: string, answers: QuestionAnswers) => void; pairedResult?: MessageBlock & { type: 'tool_result' }; onImageClick?: (src: string) => void; busy?: boolean; screenMap?: Map<string, string[]> }) {
+function BlockRenderer({ block, isUser, ts, onPermissionRespond, onQuestionRespond, pairedResult, onImageClick, busy, live, screenMap }: { block: MessageBlock; isUser: boolean; ts?: number; onPermissionRespond?: (id: string, allow: boolean, allowAll?: boolean) => void; onQuestionRespond?: (id: string, answers: QuestionAnswers) => void; pairedResult?: MessageBlock & { type: 'tool_result' }; onImageClick?: (src: string) => void; busy?: boolean; /** This text block is the one currently streaming. */ live?: boolean; screenMap?: Map<string, string[]> }) {
   const slots = useSlots();
   if (block.type === 'image') {
     return (
@@ -500,7 +460,9 @@ function BlockRenderer({ block, isUser, ts, onPermissionRespond, onQuestionRespo
     }
     return (
       <div className="text-sm" dir="auto">
-        <AssistantMarkdown text={block.text} onImageClick={onImageClick} />
+        {IS_APPWRAP_NATIVE
+          ? <div className="prose prose-sm max-w-none dark:prose-invert break-words min-w-0 whitespace-pre-wrap">{block.text.replace(/\[Image #\d+\]\s*/g, '').trim()}</div>
+          : <AssistantMarkdown text={block.text} streaming={live} onImageClick={onImageClick} />}
       </div>
     );
   }
@@ -938,33 +900,3 @@ function QuestionRequestBlock({
     </div>
   );
 }
-
-function CodeBlock({ children, ...props }: any) {
-  const ref = useRef<HTMLPreElement>(null);
-  return (
-    <div className="relative group">
-      <pre ref={ref} {...props} className="rounded-lg border bg-muted p-4 overflow-x-auto text-xs text-foreground">
-        {children}
-      </pre>
-      <CopyButton getText={() => ref.current?.textContent || ''} />
-    </div>
-  );
-}
-
-function CopyButton({ getText }: { getText: () => string }) {
-  const [copied, setCopied] = useState(false);
-
-  return (
-    <button
-      onClick={() => {
-        navigator.clipboard.writeText(getText());
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-      }}
-      className="absolute top-2 right-2 p-1.5 rounded-md bg-background/80 border opacity-0 group-hover:opacity-100 transition-opacity"
-      title="Copy"
-    >
-      {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
-    </button>
-  );
-}

package/src/server/engine/claude-code.ts

@@ -538,7 +538,11 @@ export class ClaudeCodeEngine implements AgentEngine {
     // where the profile grants Bash — job_start is arbitrary shell — and only for a real session id
     // (wake reports need a session to land in).
     if (durableJobs) {
-      const server = jobsMcpServer({ sessionId: opts.sessionId, uid: opts.uid, userEmail: opts.userEmail, cwd });
+      // The job store scrubs `*_API_KEY` from children, so a nested agent (the social legs' agentx worker)
+      // died "No provider key found" (2026-09-24). Hand back the provider keys THIS turn's own env already
+      // carries (profile-filtered by buildAgentEnv) — the same set the agentx engine gives its jobs.
+      const providerEnv = Object.fromEntries(Object.entries(sdkEnv).filter(([k, v]) => /_API_KEY$/.test(k) && v));
+      const server = jobsMcpServer({ sessionId: opts.sessionId!, uid: opts.uid, userEmail: opts.userEmail, cwd, env: providerEnv });
       options['mcpServers'] = { ...(options['mcpServers'] as object | undefined), [server.name]: server };
       options['allowedTools'] = [...((options['allowedTools'] as string[] | undefined) ?? allowedTools), ...JOBS_TOOL_IDS];
     }