tinyhumansai · senamakel · Jun 1, 2026 · May 31, 2026 · May 31, 2026 · May 31, 2026
@@ -45,7 +45,7 @@ import {
   levelColor,
   nodeColor,
   nodeRadius,
-  supportsWebGL,
+  SOURCE_COLOR,
   VIEWPORT_H,
   VIEWPORT_W,
   ZOOM_MAX,
@@ -54,8 +54,18 @@ import {
 import { summaryWorkspacePath } from './memoryWorkspacePaths';
 import { PixiGraph } from './PixiGraph';
 
-/** Detected once — WebGL availability decides Pixi vs the SVG fallback. */
-const HAS_WEBGL = supportsWebGL();
+/** Use WebGL (Pixi) in production; fall back to SVG in test (jsdom). */
+const HAS_WEBGL =
+  typeof document !== 'undefined' &&
+  typeof document.createElement === 'function' &&
+  (() => {
+    try {
+      const c = document.createElement('canvas');
+      return !!(c.getContext('webgl2') || c.getContext('webgl'));
+    } catch {
+      return false;
+    }
+  })();
 
 interface SimNode extends GraphNode {
   x: number;
@@ -357,6 +367,9 @@ export function MemoryGraph({ nodes, edges, mode, emptyHint }: MemoryGraphProps)
   const legend =
     mode === 'tree'
       ? [
+          ...(nodes.some(n => n.kind === 'source')
+            ? [{ label: t('graph.source', 'Source'), color: SOURCE_COLOR }]
+            : []),
           ...Array.from(new Set(nodes.filter(n => n.kind === 'summary').map(n => n.level ?? 0)))
             .sort((a, b) => a - b)
             .map(lvl => ({ label: `L${lvl}`, color: levelColor(lvl) })),
@@ -486,7 +499,11 @@ export function MemoryGraph({ nodes, edges, mode, emptyHint }: MemoryGraphProps)
         <div
           className="border-t border-stone-100 dark:border-neutral-800 bg-stone-50/70 dark:bg-neutral-900/70 px-4 py-2 text-xs text-stone-700 dark:text-neutral-200"
           data-testid="memory-graph-tooltip">
-          {hovered.kind === 'summary' ? (
+          {hovered.kind === 'source' ? (
+            <span className="font-medium text-orange-600 dark:text-orange-400">
+              {hovered.label}
+            </span>
+          ) : hovered.kind === 'summary' ? (
             <>
               <span className="font-mono">L{hovered.level ?? '?'}</span>
               <span className="text-stone-400 dark:text-neutral-500"> · </span>

@@ -24,13 +24,29 @@ import {
   updateMemorySource,
 } from '../../services/memorySourcesService';
 import type { ToastNotification } from '../../types/intelligence';
+import { memoryTreeFlushSource } from '../../utils/tauriCommands/memoryTree';
 import { AddMemorySourceDialog } from './AddMemorySourceDialog';
 
 interface MemorySourcesRegistryProps {
   onToast?: (toast: Omit<ToastNotification, 'id'>) => void;
   pollIntervalMs?: number;
 }
 
+interface SyncProgress {
+  stage: string;
+  detail: string | null;
+  percent: number | null;
+}
+
+function parseSyncProgress(detail: string | null): number | null {
+  if (!detail) return null;
+  const match = detail.match(/^(\d+)\/(\d+)\s/);
+  if (!match) return null;
+  const current = parseInt(match[1], 10);
+  const total = parseInt(match[2], 10);
+  return total > 0 ? Math.round((current / total) * 100) : null;
+}
+
 export function MemorySourcesRegistry({
   onToast,
   pollIntervalMs = 5000,
@@ -41,6 +57,43 @@ export function MemorySourcesRegistry({
   const [loading, setLoading] = useState(true);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [syncingId, setSyncingId] = useState<string | null>(null);
+  const [buildingId, setBuildingId] = useState<string | null>(null);
+  const [syncProgress, setSyncProgress] = useState<Map<string, SyncProgress>>(new Map());
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const data = (e as CustomEvent).detail as {
+        stage?: string;
+        connection_id?: string;
+        detail?: string;
+      } | null;
+      if (!data?.connection_id) return;
+      const sourceId = data.connection_id;
+      const stage = data.stage ?? '';
+
+      if (stage === 'completed' || stage === 'failed') {
+        setSyncProgress(prev => {
+          const next = new Map(prev);
+          next.delete(sourceId);
+          return next;
+        });
+        setSyncingId(prev => (prev === sourceId ? null : prev));
+        return;
+      }
+
+      const percent = parseSyncProgress(data.detail ?? null);
+      setSyncProgress(prev => {
+        const next = new Map(prev);
+        next.set(sourceId, { stage, detail: data.detail ?? null, percent });
+        return next;
+      });
+      if (stage === 'requested' || stage === 'fetching' || stage === 'ingesting') {
+        setSyncingId(sourceId);
+      }
+    };
+    window.addEventListener('openhuman:memory-sync-stage', handler);
+    return () => window.removeEventListener('openhuman:memory-sync-stage', handler);
+  }, []);
 
   const refresh = useCallback(async () => {
     try {
@@ -136,6 +189,31 @@ export function MemorySourcesRegistry({
     [onToast, refresh, t]
   );
 
+  const handleBuild = useCallback(
+    async (source: MemorySourceEntry) => {
+      const scope = sourceTreeScope(source);
+      if (!scope) return;
+      setBuildingId(source.id);
+      try {
+        const resp = await memoryTreeFlushSource(scope);
+        onToast?.({
+          type: 'success',
+          title: t('memorySources.build.successTitle'),
+          message: `${resp.seals_fired} ${t('memorySources.build.sealsMessage')}`,
+        });
+      } catch (err) {
+        onToast?.({
+          type: 'error',
+          title: t('memorySources.build.failedTitle'),
+          message: err instanceof Error ? err.message : String(err),
+        });
+      } finally {
+        setBuildingId(prev => (prev === source.id ? null : prev));
+      }
+    },
+    [onToast, t]
+  );
+
   const handleAdded = useCallback(
     (source: MemorySourceEntry) => {
       setSources(prev => [...prev, source]);
@@ -176,9 +254,12 @@ export function MemorySourcesRegistry({
               source={source}
               status={statusById.get(source.id) ?? null}
               isSyncing={syncingId === source.id}
+              isBuilding={buildingId === source.id}
+              progress={syncProgress.get(source.id) ?? null}
               onToggle={handleToggle}
               onRemove={handleRemove}
               onSync={handleSync}
+              onBuild={handleBuild}
             />
           ))}
         </ul>
@@ -197,12 +278,25 @@ interface SourceRowProps {
   source: MemorySourceEntry;
   status: SourceStatus | null;
   isSyncing: boolean;
+  isBuilding: boolean;
+  progress: SyncProgress | null;
   onToggle: (source: MemorySourceEntry) => void;
   onRemove: (source: MemorySourceEntry) => void;
   onSync: (source: MemorySourceEntry) => void;
+  onBuild: (source: MemorySourceEntry) => void;
 }
 
-function SourceRow({ source, status, isSyncing, onToggle, onRemove, onSync }: SourceRowProps) {
+function SourceRow({
+  source,
+  status,
+  isSyncing,
+  isBuilding,
+  progress,
+  onToggle,
+  onRemove,
+  onSync,
+  onBuild,
+}: SourceRowProps) {
   const { t } = useT();
   const icon = SOURCE_KIND_ICONS[source.kind] ?? '📄';
   const kindLabel = t(SOURCE_KIND_LABEL_KEYS[source.kind] ?? source.kind);
@@ -234,7 +328,32 @@ function SourceRow({ source, status, isSyncing, onToggle, onRemove, onSync }: So
             {detail}
           </p>
         )}
-        {status && (status.chunks_synced > 0 || status.chunks_pending > 0) && (
+        {progress && (
+          <div className="mt-2 pl-7">
+            <div className="flex items-center gap-2 text-xs text-stone-500 dark:text-neutral-400">
+              <span className="capitalize">{progress.stage}</span>
+              {progress.percent !== null && (
+                <span className="font-medium text-primary-600 dark:text-primary-400">
+                  {progress.percent}%
+                </span>
+              )}
+              {progress.detail && (
+                <span className="truncate text-stone-400 dark:text-neutral-500">
+                  {progress.detail}
+                </span>
+              )}
+            </div>
+            <div className="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-stone-200 dark:bg-neutral-700">
+              <div
+                className="h-full rounded-full bg-primary-500 transition-all duration-300"
+                style={{
+                  width: `${progress.percent ?? (progress.stage === 'fetching' ? 10 : 5)}%`,
+                }}
+              />
+            </div>
+          </div>
+        )}
+        {!progress && status && (status.chunks_synced > 0 || status.chunks_pending > 0) && (
           <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 pl-7 text-xs text-stone-500 dark:text-neutral-400">
             <span>
               {status.chunks_synced.toLocaleString()} {t('sync.chunks')}
@@ -266,6 +385,21 @@ function SourceRow({ source, status, isSyncing, onToggle, onRemove, onSync }: So
           {isSyncing ? <Spinner /> : <SyncIcon />}
           {isSyncing ? t('sync.syncing') : t('sync.sync')}
         </button>
+        <button
+          type="button"
+          onClick={() => onBuild(source)}
+          disabled={!source.enabled || isBuilding || isSyncing}
+          title={t('memorySources.build.title')}
+          className="inline-flex items-center gap-1 rounded-md border border-primary-300
+                     bg-white px-3 py-1.5 text-xs font-semibold text-primary-600
+                     shadow-sm transition-colors hover:bg-primary-50
+                     disabled:cursor-not-allowed disabled:opacity-50
+                     dark:border-primary-500/30 dark:bg-neutral-900 dark:text-primary-400
+                     dark:hover:bg-primary-500/10
+                     focus:outline-none focus:ring-2 focus:ring-primary-200">
+          {isBuilding ? <Spinner /> : <BuildIcon />}
+          {isBuilding ? t('memorySources.build.building') : t('memorySources.build.title')}
+        </button>
         <button
           type="button"
           onClick={() => onToggle(source)}
@@ -324,6 +458,14 @@ function relativeTimestamp(epochMs: number | null, t: (k: string) => string): st
   return `${days}${t('time.daysAgoSuffix')}`;
 }
 
+function sourceTreeScope(source: MemorySourceEntry): string | null {
+  if (source.kind === 'github_repo' && source.url) {
+    const m = source.url.match(/github\.com\/([^/]+)\/([^/.]+)/);
+    if (m) return `github:${m[1]}/${m[2]}`;
+  }
+  return source.id;
+}
+
 function sourceDetail(source: MemorySourceEntry): string | null {
   switch (source.kind) {
     case 'composio': {
@@ -379,6 +521,24 @@ function TrashIcon() {
   );
 }
 
+function BuildIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true">
+      <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+      <path d="M22 4L12 14.01l-3-3" />
+    </svg>
+  );
+}
+
 function SyncIcon() {
   return (
     <svg

@@ -48,6 +48,7 @@ import { MemoryGraph } from './MemoryGraph';
 import { MemorySourcesRegistry } from './MemorySourcesRegistry';
 import { MemoryTreeStatusPanel } from './MemoryTreeStatusPanel';
 import { ObsidianVaultSection } from './ObsidianVaultSection';
+import { SyncAuditPanel } from './SyncAuditPanel';
 import { WhatsAppMemorySection } from './WhatsAppMemorySection';
 
 interface MemoryWorkspaceProps {
@@ -63,13 +64,13 @@ export function MemoryWorkspace({ onToast }: MemoryWorkspaceProps) {
   const [resetting, setResetting] = useState(false);
   const [mode, setMode] = useState<GraphMode>('tree');
 
-  // (Re)load the graph whenever the mode toggle flips. The Memory
-  // sources panel manages its own polling.
+  const [graphVersion, setGraphVersion] = useState(0);
+
+  // (Re)load the graph whenever the mode toggle flips or tree events arrive.
   useEffect(() => {
-    console.debug('[ui-flow][memory-workspace] graph load: entry mode=%s', mode);
+    console.debug('[ui-flow][memory-workspace] graph load: entry mode=%s v=%d', mode, graphVersion);
     let cancelled = false;
     setError(null);
-    setGraph(null);
     void (async () => {
       try {
         const resp = await memoryTreeGraphExport(mode);
@@ -90,7 +91,25 @@ export function MemoryWorkspace({ onToast }: MemoryWorkspaceProps) {
     return () => {
       cancelled = true;
     };
-  }, [mode]);
+  }, [mode, graphVersion]);
+
+  useEffect(() => {
+    const onTreeDone = () => {
+      setTimeout(() => setGraphVersion(v => v + 1), 2000);
+    };
+    const onSyncDone = (e: Event) => {
+      const data = (e as CustomEvent).detail as { stage?: string } | null;
+      if (data?.stage === 'completed') {
+        setTimeout(() => setGraphVersion(v => v + 1), 3000);
+      }
+    };
+    window.addEventListener('openhuman:memory-tree-completed', onTreeDone);
+    window.addEventListener('openhuman:memory-sync-stage', onSyncDone);
+    return () => {
+      window.removeEventListener('openhuman:memory-tree-completed', onTreeDone);
+      window.removeEventListener('openhuman:memory-sync-stage', onSyncDone);
+    };
+  }, []);
 
   const handleWipe = useCallback(async () => {
     // Two-step confirm so accidental clicks can't nuke a workspace.
@@ -296,6 +315,13 @@ export function MemoryWorkspace({ onToast }: MemoryWorkspaceProps) {
       ) : (
         <MemoryGraph nodes={graph.nodes} edges={graph.edges} mode={mode} />
       )}
+
+      <div className="rounded-lg border border-stone-100 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4">
+        <h3 className="mb-2 text-sm font-medium text-stone-700 dark:text-neutral-200">
+          {t('sync.auditTitle', 'Sync History')}
+        </h3>
+        <SyncAuditPanel />
+      </div>
     </div>
   );
 }