openclaw-node-harness 2.0.0

package/mission-control/src/components/memory/memory-list.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { format } from "date-fns";
+import { FileText, BookOpen, Database, ChevronRight } from "lucide-react";
+import type { MemoryDocListItem } from "@/lib/hooks";
+
+const SOURCE_STYLES: Record<
+  string,
+  { color: string; dotColor: string; icon: typeof FileText; label: string }
+> = {
+  daily_log: {
+    color: "text-blue-400",
+    dotColor: "bg-blue-400",
+    icon: FileText,
+    label: "Daily Log",
+  },
+  long_term_memory: {
+    color: "text-purple-400",
+    dotColor: "bg-purple-400",
+    icon: BookOpen,
+    label: "Long-Term Memory",
+  },
+  clawvault: {
+    color: "text-amber-400",
+    dotColor: "bg-amber-400",
+    icon: Database,
+    label: "ClawVault",
+  },
+};
+
+interface MemoryListProps {
+  docs: MemoryDocListItem[];
+  isLoading: boolean;
+  selectedPath: string | null;
+  onSelect: (filePath: string) => void;
+}
+
+export function MemoryList({
+  docs,
+  isLoading,
+  selectedPath,
+  onSelect,
+}: MemoryListProps) {
+  if (isLoading) {
+    return (
+      <div className="space-y-2">
+        {[...Array(8)].map((_, i) => (
+          <div
+            key={i}
+            className="animate-pulse rounded-lg border border-border bg-card p-3.5 h-16"
+          >
+            <div className="h-4 w-3/4 bg-muted rounded mb-2" />
+            <div className="h-3 w-1/3 bg-muted rounded" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (docs.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-40 text-sm text-muted-foreground/50 gap-2">
+        <FileText className="h-8 w-8" />
+        <p>No memories found</p>
+        <p className="text-[10px]">
+          Click &ldquo;Sync Memory&rdquo; in the sidebar to index from disk
+        </p>
+      </div>
+    );
+  }
+
+  // Group by date for chronological display
+  let lastDateGroup = "";
+
+  return (
+    <div className="space-y-1">
+      {docs.map((doc) => {
+        const style = SOURCE_STYLES[doc.source] ?? SOURCE_STYLES.daily_log;
+        const Icon = style.icon;
+        const isSelected = doc.filePath === selectedPath;
+
+        let dateStr = "";
+        let dateGroup = "";
+        if (doc.date) {
+          try {
+            dateStr = format(new Date(doc.date), "MMM d, yyyy");
+            dateGroup = format(new Date(doc.date), "MMMM yyyy");
+          } catch {
+            dateStr = doc.date;
+          }
+        } else if (doc.modifiedAt) {
+          try {
+            dateStr = format(new Date(doc.modifiedAt), "MMM d, yyyy");
+            dateGroup = format(new Date(doc.modifiedAt), "MMMM yyyy");
+          } catch {
+            dateStr = "";
+          }
+        }
+
+        const showDateHeader = dateGroup && dateGroup !== lastDateGroup;
+        if (dateGroup) lastDateGroup = dateGroup;
+
+        const fileName = doc.filePath.split("/").pop() ?? "";
+
+        return (
+          <div key={doc.id}>
+            {showDateHeader && (
+              <div className="sticky top-0 bg-background/95 backdrop-blur-sm px-1 py-2 mt-3 first:mt-0">
+                <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+                  {dateGroup}
+                </p>
+              </div>
+            )}
+            <button
+              onClick={() => onSelect(doc.filePath)}
+              className={`w-full text-left rounded-lg border px-3.5 py-3 transition-all group ${
+                isSelected
+                  ? "border-primary/50 bg-primary/5"
+                  : "border-transparent hover:border-border hover:bg-card"
+              }`}
+            >
+              <div className="flex items-center gap-3">
+                <div
+                  className={`flex h-8 w-8 items-center justify-center rounded-lg bg-card border border-border shrink-0 ${
+                    isSelected ? "border-primary/30" : ""
+                  }`}
+                >
+                  <Icon className={`h-4 w-4 ${style.color}`} />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-foreground truncate">
+                    {doc.title ?? fileName}
+                  </p>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span
+                      className={`flex items-center gap-1 text-[10px] ${style.color}`}
+                    >
+                      <span
+                        className={`h-1.5 w-1.5 rounded-full ${style.dotColor}`}
+                      />
+                      {style.label}
+                    </span>
+                    {dateStr && (
+                      <span className="text-[10px] text-muted-foreground">
+                        {dateStr}
+                      </span>
+                    )}
+                    {doc.category && (
+                      <span className="text-[10px] text-muted-foreground/60 bg-muted rounded px-1.5 py-0.5">
+                        {doc.category}
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <ChevronRight
+                  className={`h-4 w-4 shrink-0 transition-colors ${
+                    isSelected
+                      ? "text-primary"
+                      : "text-muted-foreground/30 group-hover:text-muted-foreground"
+                  }`}
+                />
+              </div>
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/mission-control/src/components/memory/search-bar.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Search } from "lucide-react";
+
+const SOURCES = [
+  { key: undefined as string | undefined, label: "All" },
+  { key: "daily_log", label: "Daily Logs" },
+  { key: "long_term_memory", label: "Long-Term" },
+  { key: "clawvault", label: "ClawVault" },
+];
+
+interface SearchBarProps {
+  onQueryChange: (query: string) => void;
+  onSourceChange: (source: string | undefined) => void;
+  source: string | undefined;
+  showInput?: boolean;
+}
+
+export function SearchBar({
+  onQueryChange,
+  onSourceChange,
+  source,
+  showInput = true,
+}: SearchBarProps) {
+  const [input, setInput] = useState("");
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onQueryChange(input);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [input, onQueryChange]);
+
+  return (
+    <div className="space-y-3">
+      {showInput && (
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Search memory..."
+            className="w-full rounded-lg border border-border bg-card pl-10 pr-4 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-primary"
+            autoFocus
+          />
+        </div>
+      )}
+      <div className="flex gap-2">
+        {SOURCES.map((s) => (
+          <button
+            key={s.label}
+            onClick={() => onSourceChange(s.key)}
+            className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
+              source === s.key
+                ? "bg-primary text-primary-foreground"
+                : "bg-accent text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            {s.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/mission-control/src/components/memory/search-results.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { format } from "date-fns";
+import { FileText, BookOpen, Database } from "lucide-react";
+import type { MemoryResult } from "@/lib/hooks";
+
+/** Strip all HTML except <mark> tags, and escape content between them to prevent XSS */
+function sanitizeExcerpt(html: string): string {
+  // Parse into segments: text outside <mark> tags and text inside them
+  const parts: string[] = [];
+  let cursor = 0;
+  const tagRe = /<\/?mark\b[^>]*>/gi;
+  let match: RegExpExecArray | null;
+  while ((match = tagRe.exec(html)) !== null) {
+    // Escape text before this tag
+    if (match.index > cursor) {
+      parts.push(escapeHtml(html.slice(cursor, match.index)));
+    }
+    // Keep only bare <mark> or </mark>
+    parts.push(match[0].startsWith("</") ? "</mark>" : "<mark>");
+    cursor = match.index + match[0].length;
+  }
+  if (cursor < html.length) {
+    parts.push(escapeHtml(html.slice(cursor)));
+  }
+  return parts.join("");
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+const SOURCE_STYLES: Record<string, { color: string; icon: typeof FileText }> = {
+  daily_log: { color: "bg-blue-500/20 text-blue-400", icon: FileText },
+  long_term_memory: { color: "bg-purple-500/20 text-purple-400", icon: BookOpen },
+  clawvault: { color: "bg-amber-500/20 text-amber-400", icon: Database },
+};
+
+interface SearchResultsProps {
+  results: MemoryResult[];
+  total: number;
+  isLoading: boolean;
+  query: string;
+  selectedPath: string | null;
+  onSelect: (filePath: string) => void;
+}
+
+export function SearchResults({
+  results,
+  total,
+  isLoading,
+  query,
+  selectedPath,
+  onSelect,
+}: SearchResultsProps) {
+  if (query.length < 2) {
+    return (
+      <div className="flex items-center justify-center h-40 text-sm text-muted-foreground/50">
+        Type at least 2 characters to search...
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        {[...Array(3)].map((_, i) => (
+          <div key={i} className="animate-pulse rounded-lg bg-card p-4">
+            <div className="h-4 w-2/3 bg-muted rounded" />
+            <div className="mt-2 h-3 w-full bg-muted rounded" />
+            <div className="mt-1 h-3 w-4/5 bg-muted rounded" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (results.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-40 text-sm text-muted-foreground/50">
+        No results for &ldquo;{query}&rdquo;
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      <p className="text-[10px] text-muted-foreground mb-2">
+        {total} result{total !== 1 ? "s" : ""}
+      </p>
+      {results.map((result) => {
+        const sourceStyle = SOURCE_STYLES[result.source] ?? SOURCE_STYLES.daily_log;
+        const Icon = sourceStyle.icon;
+        const isSelected = result.filePath === selectedPath;
+
+        let dateStr = "";
+        if (result.date) {
+          try {
+            dateStr = format(new Date(result.date), "MMM d, yyyy");
+          } catch {
+            dateStr = result.date;
+          }
+        }
+
+        return (
+          <button
+            key={result.id}
+            onClick={() => onSelect(result.filePath)}
+            className={`w-full text-left rounded-lg border p-3 transition-colors ${
+              isSelected
+                ? "border-primary bg-primary/10"
+                : "border-border bg-card hover:border-border hover:bg-accent/50"
+            }`}
+          >
+            <div className="flex items-start gap-2">
+              <Icon className="h-4 w-4 mt-0.5 shrink-0 text-muted-foreground" />
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium text-foreground truncate">
+                  {result.title ?? result.filePath.split("/").pop()}
+                </p>
+                <div className="mt-1 flex items-center gap-2">
+                  <span
+                    className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-medium ${sourceStyle.color}`}
+                  >
+                    {result.source.replace("_", " ")}
+                  </span>
+                  {dateStr && (
+                    <span className="text-[10px] text-muted-foreground">
+                      {dateStr}
+                    </span>
+                  )}
+                </div>
+                <p
+                  className="mt-1.5 text-xs text-muted-foreground line-clamp-2 [&_mark]:bg-yellow-500/30 [&_mark]:text-foreground [&_mark]:rounded-sm [&_mark]:px-0.5"
+                  dangerouslySetInnerHTML={{ __html: sanitizeExcerpt(result.excerpt) }}
+                />
+              </div>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/mission-control/src/components/obsidian/backlinks-panel.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, ChevronRight, ArrowLeft } from "lucide-react";
+
+interface Backlink {
+  filePath: string;
+  title: string;
+}
+
+interface BacklinksPanelProps {
+  backlinks: Backlink[];
+  onSelect: (filePath: string) => void;
+}
+
+export function BacklinksPanel({ backlinks, onSelect }: BacklinksPanelProps) {
+  const [expanded, setExpanded] = useState(true);
+
+  if (backlinks.length === 0) return null;
+
+  return (
+    <div className="border-t border-border">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center gap-2 px-4 py-2 text-xs text-muted-foreground hover:text-foreground"
+      >
+        {expanded ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+        <ArrowLeft className="h-3 w-3" />
+        <span className="font-semibold uppercase tracking-wider">
+          Backlinks ({backlinks.length})
+        </span>
+      </button>
+      {expanded && (
+        <div className="px-4 pb-3 space-y-1 max-h-36 overflow-y-auto">
+          {backlinks.map((bl) => (
+            <button
+              key={bl.filePath}
+              onClick={() => onSelect(bl.filePath)}
+              className="w-full text-left text-xs text-purple-400 hover:text-purple-300 truncate py-0.5"
+            >
+              {bl.title}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/mission-control/src/components/obsidian/file-tree.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import {
+  ChevronRight,
+  ChevronDown,
+  FileText,
+  Folder,
+  FolderOpen,
+  Search,
+} from "lucide-react";
+import type { FileNode } from "@/lib/hooks";
+
+interface FileTreeProps {
+  tree: FileNode[];
+  isLoading: boolean;
+  selectedPath: string | null;
+  onSelect: (path: string) => void;
+}
+
+export function FileTree({
+  tree,
+  isLoading,
+  selectedPath,
+  onSelect,
+}: FileTreeProps) {
+  const [search, setSearch] = useState("");
+
+  const filteredTree = useMemo(() => {
+    if (!search.trim()) return tree;
+    const q = search.toLowerCase();
+    return filterTree(tree, q);
+  }, [tree, search]);
+
+  if (isLoading) {
+    return (
+      <div className="p-3 space-y-2 animate-pulse">
+        {[...Array(8)].map((_, i) => (
+          <div key={i} className="h-4 bg-muted rounded" style={{ width: `${50 + Math.random() * 50}%` }} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Search */}
+      <div className="px-2 py-2 border-b border-border">
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Filter files..."
+            className="w-full bg-background border border-border rounded pl-7 pr-2 py-1 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+          />
+        </div>
+      </div>
+      {/* Tree */}
+      <div className="flex-1 overflow-y-auto px-1 py-1">
+        {filteredTree.length === 0 ? (
+          <div className="px-3 py-4 text-xs text-muted-foreground text-center">
+            {search ? "No matches" : "Empty workspace"}
+          </div>
+        ) : (
+          filteredTree.map((node) => (
+            <TreeNode
+              key={node.path}
+              node={node}
+              depth={0}
+              selectedPath={selectedPath}
+              onSelect={onSelect}
+              defaultOpen={search.length > 0}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TreeNode({
+  node,
+  depth,
+  selectedPath,
+  onSelect,
+  defaultOpen,
+}: {
+  node: FileNode;
+  depth: number;
+  selectedPath: string | null;
+  onSelect: (path: string) => void;
+  defaultOpen: boolean;
+}) {
+  const [open, setOpen] = useState(
+    defaultOpen || depth < 1 || isAncestor(node, selectedPath)
+  );
+  const isSelected = node.path === selectedPath;
+  const isDir = node.type === "dir";
+  const isMarkdown = node.ext === ".md" || node.ext === ".txt";
+  const isCode = [".ts", ".tsx", ".js", ".sol", ".json", ".yaml", ".yml"].includes(node.ext || "");
+
+  const textColor = isSelected
+    ? "text-foreground font-medium"
+    : isMarkdown
+    ? "text-foreground/80"
+    : isCode
+    ? "text-blue-400/70"
+    : "text-muted-foreground";
+
+  if (isDir) {
+    return (
+      <div>
+        <button
+          onClick={() => setOpen(!open)}
+          className={`w-full flex items-center gap-1 px-1 py-0.5 rounded text-xs hover:bg-accent/50 ${textColor}`}
+          style={{ paddingLeft: `${depth * 12 + 4}px` }}
+        >
+          {open ? (
+            <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
+          )}
+          {open ? (
+            <FolderOpen className="h-3 w-3 shrink-0 text-amber-400/70" />
+          ) : (
+            <Folder className="h-3 w-3 shrink-0 text-amber-400/70" />
+          )}
+          <span className="truncate">{node.name}</span>
+        </button>
+        {open && node.children && (
+          <div>
+            {node.children.map((child) => (
+              <TreeNode
+                key={child.path}
+                node={child}
+                depth={depth + 1}
+                selectedPath={selectedPath}
+                onSelect={onSelect}
+                defaultOpen={defaultOpen}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={() => onSelect(node.path)}
+      className={`w-full flex items-center gap-1 px-1 py-0.5 rounded text-xs hover:bg-accent/50 ${
+        isSelected ? "bg-accent" : ""
+      } ${textColor}`}
+      style={{ paddingLeft: `${depth * 12 + 16}px` }}
+    >
+      <FileText className="h-3 w-3 shrink-0 text-muted-foreground" />
+      <span className="truncate">{node.name}</span>
+    </button>
+  );
+}
+
+/** Filter tree to only show nodes matching query (and their parent dirs) */
+function filterTree(nodes: FileNode[], query: string): FileNode[] {
+  const result: FileNode[] = [];
+  for (const node of nodes) {
+    if (node.type === "dir") {
+      const filtered = filterTree(node.children || [], query);
+      if (filtered.length > 0 || node.name.toLowerCase().includes(query)) {
+        result.push({ ...node, children: filtered });
+      }
+    } else {
+      if (node.name.toLowerCase().includes(query)) {
+        result.push(node);
+      }
+    }
+  }
+  return result;
+}
+
+/** Check if a dir node is an ancestor of the selected path */
+function isAncestor(node: FileNode, selectedPath: string | null): boolean {
+  if (!selectedPath || node.type !== "dir") return false;
+  return selectedPath.startsWith(node.path + "/");
+}