shraga 0.1.147 → 0.1.148

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-C50rEoAa.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DzxOqQtK.css">
+    <script type="module" crossorigin src="/assets/index-CzkEDvV9.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BLAQpfJ9.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shraga",
-  "version": "0.1.147",
+  "version": "0.1.148",
   "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,7 +56,6 @@
   },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.3.280",
-    "@livx.cc/bare-v3": "0.1.0-alpha.59",
     "@livx.cc/mcp-firebase": "^0.1.14",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",
@@ -68,14 +67,12 @@
     "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",
+    "mcp-slack-use": "github:Livshitz/mcp-slack-use#ce2bd32",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^9.0.0",

package/src/client/components/AssistantMarkdown.tsx

@@ -1,94 +1,85 @@
-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 { 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';
+import { Copy, Check } from 'lucide-react';
 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';
+import { AuthedImage, NEEDS_AUTH } from './AuthedImage';
 
-const log = logger.forComponent('AssistantMarkdown');
+// Assistant-reply markdown renderer — a replaceable seam: ChatView imports it as
+// `@/components/AssistantMarkdown`, so a distribution overrides it by shipping a file at that path
+// (the EE build's EE-first `@/` alias). Keep the props contract stable.
 
-// 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>`);
+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);
 };
 
-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, images: (src) => NEEDS_AUTH.test(src) }), []);
-  const shown = useRef<{ text: string; live: boolean } | null>(null);
-  const blobs = useRef(new Map<string, Promise<string>>());
-  const { getToken } = useWorkspace();
-  const { dark } = useDarkMode();
+export interface AssistantMarkdownProps {
+  text: string;
+  /** This block is still streaming (a renderer may use it; this one re-renders whole). */
+  streaming?: boolean;
+  onImageClick?: (src: string) => void;
+}
 
-  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]);
+export function AssistantMarkdown({ text, onImageClick }: AssistantMarkdownProps) {
+  const clean = text.replace(/\[Image #\d+\]\s*/g, '').trim();
+  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>,
+        // Only same-origin /uploads images load; anything else in model output (exfil via a
+        // prompt-injected image URL) shows its alt text instead of auto-fetching.
+        img: ({ src, alt }) => src && NEEDS_AUTH.test(src)
+          ? <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)} />
+          : <span>{alt}</span>,
+      }}
+    >{clean}</ReactMarkdown>
+  );
+}
 
-  useEffect(() => () => {
-    view.detach();
-    shown.current = null;
-    for (const p of blobs.current.values()) p.then(URL.revokeObjectURL, () => {});
-    blobs.current.clear();
-  }, [view]);
+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 (
-    <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"
-    />
+    <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/client/components/ChatView.tsx

@@ -10,12 +10,12 @@ 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';
+import { AssistantMarkdown } from '@/components/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. (Observed with react-markdown; MarkdownStream is unverified there.) Until the native shell issue is fixed, render assistant
+// the native WKWebView shell, not the web app. 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;