@archznn/crewloop-skills 0.5.0 → 0.7.0

package/servers/dashboard/ui/src/components/FileActivity.tsx

@@ -0,0 +1,20 @@
+import type { FileEntry } from '../../../src/lib/invocations';
+import { FileList } from './FileList';
+import { FileDiff } from './FileDiff';
+
+interface Props {
+  files: FileEntry[];
+  selectedPath: string | null;
+  onSelect: (path: string) => void;
+}
+
+export function FileActivity({ files, selectedPath, onSelect }: Props) {
+  const selectedFile = files.find((f) => f.path === selectedPath);
+
+  return (
+    <div className="flex-1 flex min-h-0 overflow-hidden">
+      <FileList files={files} selectedPath={selectedPath} onSelect={onSelect} />
+      <FileDiff file={selectedFile} />
+    </div>
+  );
+}

package/servers/dashboard/ui/src/components/FileDiff.tsx

@@ -0,0 +1,68 @@
+import { escapeHtml } from '../../../src/lib/format';
+import type { FileEntry } from '../../../src/lib/invocations';
+import { StatusBadge } from './ui/StatusBadge';
+
+interface Props {
+  file: FileEntry | undefined;
+}
+
+export function FileDiff({ file }: Props) {
+  if (!file) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-text-muted text-sm">
+        Select a file to view activity.
+      </div>
+    );
+  }
+
+  const latest = file.ops[file.ops.length - 1];
+  const lines = file.snippet ? String(file.snippet).split('\n').slice(0, 80) : [];
+
+  return (
+    <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
+      <header className="flex flex-col gap-2 p-4 pb-3 border-b border-border-default">
+        <span className="text-text-primary break-all text-sm font-mono">{file.path}</span>
+        <div className="flex gap-2 flex-wrap">
+          {file.ops.map((op) => (
+            <span
+              key={op.id}
+              className={`text-[10px] font-semibold uppercase px-1.5 py-0.5 rounded border ${
+                op.type === 'read'
+                  ? 'text-running border-running/35'
+                  : op.type === 'edit'
+                  ? 'text-success border-success/35'
+                  : 'text-text-muted border-border-default'
+              }`}
+            >
+              {op.type}
+            </span>
+          ))}
+          <StatusBadge status={latest.status} />
+        </div>
+      </header>
+      <div className="flex-1 overflow-auto p-4 font-mono text-[13px]">
+        {lines.length === 0 ? (
+          <p className="text-text-muted">No diff or content snippet available.</p>
+        ) : (
+          <div className="min-w-full inline-block">
+            {lines.map((line, i) => {
+              let cls = 'text-text-secondary px-1 whitespace-pre';
+              if (line.startsWith('+')) cls = 'text-success bg-success/5 px-1 whitespace-pre';
+              else if (line.startsWith('-')) cls = 'text-error bg-error/5 px-1 whitespace-pre';
+              else if (line.startsWith('@@') || line.startsWith('---') || line.startsWith('+++'))
+                cls = 'text-text-muted px-1 whitespace-pre';
+              return (
+                <div key={i} className={cls}>
+                  <span dangerouslySetInnerHTML={{ __html: escapeHtml(line) }} />
+                </div>
+              );
+            })}
+            {String(file.snippet).split('\n').length > 80 && (
+              <p className="text-text-muted mt-2 text-xs">Content truncated.</p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/servers/dashboard/ui/src/components/FileList.tsx

@@ -0,0 +1,64 @@
+import type { FileEntry } from '../../../src/lib/invocations';
+import { truncate } from '../../../src/lib/format';
+import { Icon } from './ui/Icon';
+import { StatusBadge } from './ui/StatusBadge';
+
+interface Props {
+  files: FileEntry[];
+  selectedPath: string | null;
+  onSelect: (path: string) => void;
+}
+
+export function FileList({ files, selectedPath, onSelect }: Props) {
+  if (files.length === 0) {
+    return (
+      <div className="w-full md:w-72 flex-shrink-0 flex items-center justify-center text-text-muted text-sm border-r border-border-default">
+        No file activity matches the filters.
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full md:w-72 flex-shrink-0 overflow-y-auto border-r border-border-default p-2">
+      {files.map((file) => {
+        const latest = file.ops[file.ops.length - 1];
+        const isActive = file.path === selectedPath;
+        return (
+          <button
+            key={file.path}
+            onClick={() => onSelect(file.path)}
+            className={`file-list-item w-full flex flex-col gap-1.5 text-left p-2.5 rounded border transition-colors ${
+              isActive
+                ? 'bg-elevated border-accent'
+                : 'border-transparent hover:bg-elevated'
+            }`}
+          >
+            <div className="flex items-center gap-2 min-w-0 text-text-primary font-mono text-[13px]">
+              <Icon name="FileText" className="w-4 h-4 text-accent flex-shrink-0" />
+              <span className="truncate" title={file.path}>
+                {truncate(file.path, 32)}
+              </span>
+            </div>
+            <div className="flex gap-1.5 flex-wrap items-center">
+              {file.ops.map((op) => (
+                <span
+                  key={op.id}
+                  className={`text-[10px] font-semibold uppercase px-1.5 py-0.5 rounded border ${
+                    op.type === 'read'
+                      ? 'text-running border-running/35'
+                      : op.type === 'edit'
+                      ? 'text-success border-success/35'
+                      : 'text-text-muted border-border-default'
+                  }`}
+                >
+                  {op.type}
+                </span>
+              ))}
+              <StatusBadge status={latest.status} />
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/servers/dashboard/ui/src/components/FilterBar.tsx

@@ -0,0 +1,208 @@
+import { useEffect, useRef, useState } from 'react';
+import type { FilterOptions, TimeRange } from '../lib/types';
+import { useFilters } from '../contexts/FilterContext';
+import { Icon } from './ui/Icon';
+
+interface Props {
+  options: FilterOptions;
+  resultCount: number;
+  onExport?: () => void;
+}
+
+function FilterPopover({
+  label,
+  activeCount,
+  children,
+}: {
+  label: string;
+  activeCount: number;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function onMouseDown(e: MouseEvent) {
+      if (!ref.current?.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', onMouseDown);
+    return () => document.removeEventListener('mousedown', onMouseDown);
+  }, [open]);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-xs transition-colors ${
+          activeCount > 0
+            ? 'border-accent text-accent bg-accent/10'
+            : 'border-border-default text-text-secondary hover:border-strong'
+        }`}
+      >
+        <span>{label}</span>
+        {activeCount > 0 && (
+          <span className="px-1 rounded bg-accent text-white text-[10px]">{activeCount}</span>
+        )}
+      </button>
+      {open && (
+        <div className="absolute top-[calc(100%+6px)] left-0 z-30 min-w-[180px] max-h-64 overflow-y-auto bg-surface border border-border-default rounded-lg shadow-lg p-2">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CheckboxRow({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <label className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-elevated cursor-pointer text-sm text-text-secondary">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="accent-accent"
+      />
+      <span className="truncate">{label}</span>
+    </label>
+  );
+}
+
+export function FilterBar({ options, resultCount, onExport }: Props) {
+  const { filters, setFilters, resetFilters } = useFilters();
+  const activeCount =
+    filters.sources.length +
+    filters.skills.length +
+    filters.statuses.length +
+    filters.tools.length +
+    filters.opTypes.length +
+    (filters.timeRange !== 'all' ? 1 : 0);
+
+  function toggleList<T extends string>(current: T[], value: T): T[] {
+    return current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+  }
+
+  return (
+    <div className="filter-bar flex flex-col gap-2 px-5 py-3 border-b border-border-default flex-shrink-0">
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="relative flex items-center flex-1 min-w-[200px]">
+          <Icon name="MagnifyingGlass" className="absolute left-2.5 w-4 h-4 text-text-muted" />
+          <input
+            type="text"
+            value={filters.query}
+            onChange={(e) => setFilters({ query: e.target.value })}
+            placeholder="Filter events..."
+            className="w-full h-9 pl-9 pr-8 rounded-lg bg-elevated border border-border-default text-sm text-text-primary placeholder:text-text-muted outline-none focus:border-accent"
+          />
+          {filters.query && (
+            <button
+              onClick={() => setFilters({ query: '' })}
+              aria-label="Clear search"
+              className="absolute right-2 text-text-muted hover:text-text-primary"
+            >
+              <Icon name="XCircle" className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+
+        <FilterPopover label="Source" activeCount={filters.sources.length}>
+          {options.sources.map((s) => (
+            <CheckboxRow
+              key={s}
+              label={s}
+              checked={filters.sources.includes(s)}
+              onChange={() => setFilters({ sources: toggleList(filters.sources, s) })}
+            />
+          ))}
+        </FilterPopover>
+
+        <FilterPopover label="Skill" activeCount={filters.skills.length}>
+          {options.skills.map((s) => (
+            <CheckboxRow
+              key={s}
+              label={s}
+              checked={filters.skills.includes(s)}
+              onChange={() => setFilters({ skills: toggleList(filters.skills, s) })}
+            />
+          ))}
+        </FilterPopover>
+
+        <FilterPopover label="Status" activeCount={filters.statuses.length}>
+          {options.statuses.map((s) => (
+            <CheckboxRow
+              key={s}
+              label={s}
+              checked={filters.statuses.includes(s)}
+              onChange={() => setFilters({ statuses: toggleList(filters.statuses, s) })}
+            />
+          ))}
+        </FilterPopover>
+
+        <FilterPopover label="Tool" activeCount={filters.tools.length}>
+          {options.tools.map((t) => (
+            <CheckboxRow
+              key={t}
+              label={t}
+              checked={filters.tools.includes(t)}
+              onChange={() => setFilters({ tools: toggleList(filters.tools, t) })}
+            />
+          ))}
+        </FilterPopover>
+
+        <FilterPopover label="Op" activeCount={filters.opTypes.length}>
+          {options.opTypes.map((o) => (
+            <CheckboxRow
+              key={o}
+              label={o}
+              checked={filters.opTypes.includes(o)}
+              onChange={() => setFilters({ opTypes: toggleList(filters.opTypes, o) })}
+            />
+          ))}
+        </FilterPopover>
+
+        <FilterPopover label="Time" activeCount={filters.timeRange !== 'all' ? 1 : 0}>
+          {(['all', '1m', '5m', '15m', '1h', '24h', 'session'] as TimeRange[]).map((r) => (
+            <CheckboxRow
+              key={r}
+              label={r === 'all' ? 'All time' : r === 'session' ? 'This session' : r}
+              checked={filters.timeRange === r}
+              onChange={() => setFilters({ timeRange: r })}
+            />
+          ))}
+        </FilterPopover>
+
+        {activeCount > 0 && (
+          <button
+            onClick={resetFilters}
+            className="text-xs text-text-muted hover:text-text-primary transition-colors"
+          >
+            Clear all
+          </button>
+        )}
+
+        {onExport && (
+          <button
+            onClick={onExport}
+            aria-label="Export JSON"
+            className="w-9 h-9 rounded-lg border border-border-default bg-elevated text-text-secondary hover:border-accent hover:text-accent transition-colors flex items-center justify-center"
+          >
+            <Icon name="DownloadSimple" className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+      <div className="text-xs text-text-muted">
+        {resultCount} result{resultCount === 1 ? '' : 's'}
+      </div>
+    </div>
+  );
+}

package/servers/dashboard/ui/src/components/Network3D.tsx

@@ -0,0 +1,178 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import ForceGraph3D from 'react-force-graph-3d';
+import type { ForceGraphMethods } from 'react-force-graph-3d';
+import type { Graph3D, GraphLink, GraphNode } from '../../../src/lib/graph';
+import { TYPE_COLORS } from '../../../src/lib/constants';
+import { useSettings } from '../contexts/SettingsContext';
+import { Icon } from './ui/Icon';
+
+interface Props {
+  graph: Graph3D;
+}
+
+export function Network3D({ graph }: Props) {
+  const { resolvedTheme: theme, reducedMotion } = useSettings();
+  const fgRef = useRef<ForceGraphMethods | undefined>(undefined);
+  const [selected, setSelected] = useState<GraphNode | null>(null);
+  const [hovered, setHovered] = useState<GraphNode | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const stableNodesRef = useRef<Map<string, GraphNode>>(new Map());
+  const stableLinksRef = useRef<Map<string, GraphLink>>(new Map());
+
+  const normalizedGraph = useMemo(() => {
+    const next = graph;
+    const nodeIds = new Set<string>();
+    const nodes: GraphNode[] = [];
+    for (const n of next.nodes) {
+      nodeIds.add(n.id);
+      const existing = stableNodesRef.current.get(n.id);
+      if (existing) {
+        existing.weight = n.weight;
+        existing.label = n.label;
+        existing.type = n.type;
+        nodes.push(existing);
+      } else {
+        stableNodesRef.current.set(n.id, n);
+        nodes.push(n);
+      }
+    }
+    for (const id of Array.from(stableNodesRef.current.keys())) {
+      if (!nodeIds.has(id)) stableNodesRef.current.delete(id);
+    }
+
+    const linkKeys = new Set<string>();
+    const links: GraphLink[] = [];
+    for (const l of next.links) {
+      const key = `${l.source}→${l.target}`;
+      linkKeys.add(key);
+      const existing = stableLinksRef.current.get(key);
+      if (existing) {
+        existing.weight = l.weight;
+        links.push(existing);
+      } else {
+        stableLinksRef.current.set(key, l);
+        links.push(l);
+      }
+    }
+    for (const key of Array.from(stableLinksRef.current.keys())) {
+      if (!linkKeys.has(key)) stableLinksRef.current.delete(key);
+    }
+    return { nodes, links };
+  }, [graph]);
+
+  const colors = useMemo(() => {
+    const root = getComputedStyle(document.documentElement);
+    const resolve = (token: string) => {
+      const raw = TYPE_COLORS[token];
+      if (!raw.startsWith('var(')) return raw;
+      const name = raw.slice(4, -1).trim();
+      return root.getPropertyValue(name).trim() || '#888888';
+    };
+    return {
+      skill: resolve('skill'),
+      tool: resolve('tool'),
+      file: resolve('file'),
+      link: '#3f3f46',
+    };
+  }, [theme]);
+
+  useEffect(() => {
+    try {
+      const canvas = document.createElement('canvas');
+      const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+      if (!gl) setError('WebGL is not available in this browser.');
+    } catch {
+      setError('Could not initialize WebGL.');
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!fgRef.current || normalizedGraph.nodes.length === 0) return;
+    const controls = (fgRef.current as unknown as { zoomToFit?: (duration: number) => void }).zoomToFit;
+    if (controls) controls(reducedMotion ? 0 : 400);
+  }, [normalizedGraph, reducedMotion]);
+
+  if (error) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-muted">
+        <Icon name="Monitor" className="w-10 h-10" />
+        <p>{error}</p>
+      </div>
+    );
+  }
+
+  if (normalizedGraph.nodes.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-text-muted">
+        Waiting for agent activity...
+      </div>
+    );
+  }
+
+  const linkSourceId = (l: GraphLink) => (typeof l.source === 'string' ? l.source : (l.source as GraphNode).id);
+  const linkTargetId = (l: GraphLink) => (typeof l.target === 'string' ? l.target : (l.target as GraphNode).id);
+
+  const connected = selected
+    ? normalizedGraph.links.filter((l) => linkSourceId(l) === selected.id || linkTargetId(l) === selected.id)
+    : [];
+
+  return (
+    <div className="flex-1 relative min-h-0">
+      <ForceGraph3D
+        ref={fgRef}
+        graphData={normalizedGraph}
+        nodeColor={(n) => colors[(n as GraphNode).type] || colors.file}
+        nodeRelSize={4}
+        nodeVal={(n) => Math.max(1, (n as GraphNode).weight || 1)}
+        nodeLabel="label"
+        linkWidth={1}
+        linkColor={() => colors.link}
+        backgroundColor="rgba(0,0,0,0)"
+        showNavInfo={false}
+        enableNavigationControls
+        onNodeHover={(node) => setHovered(node ? (node as GraphNode) : null)}
+        onNodeClick={(node) => {
+          const n = node as GraphNode;
+          setSelected(n);
+          if (fgRef.current && n.x != null && n.y != null && n.z != null) {
+            const coords = n as unknown as { x: number; y: number; z: number };
+            fgRef.current.cameraPosition(
+              { x: coords.x + 40, y: coords.y + 40, z: coords.z + 40 },
+              coords,
+              reducedMotion ? 0 : 400
+            );
+          }
+        }}
+        onEngineStop={() => {
+          const controls = (fgRef.current as unknown as { zoomToFit?: (duration: number) => void })?.zoomToFit;
+          if (controls) controls(reducedMotion ? 0 : 400);
+        }}
+        warmupTicks={reducedMotion ? 0 : 10}
+        cooldownTicks={reducedMotion ? 0 : 120}
+      />
+      {(selected || hovered) && (
+        <div className="absolute top-3 right-3 w-64 p-3 bg-surface border border-border-default rounded shadow-lg">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-[11px] font-semibold uppercase tracking-widest text-text-muted">
+              {(selected || hovered)?.type}
+            </span>
+            {selected && (
+              <button
+                onClick={() => setSelected(null)}
+                aria-label="Close details"
+                className="text-text-muted hover:text-text-primary"
+              >
+                <Icon name="X" className="w-4 h-4" />
+              </button>
+            )}
+          </div>
+          <p className="text-sm text-text-primary break-words font-mono">{(selected || hovered)?.label}</p>
+          {selected && (
+            <p className="text-xs text-text-muted mt-2">{connected.length} connection(s)</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/servers/dashboard/ui/src/components/SessionSelector.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ClientSession } from '../../../src/types';
+import { Icon } from './ui/Icon';
+import { formatDuration, formatTime, truncate } from '../../../src/lib/format';
+
+interface Props {
+  sessions: ClientSession[];
+  selectedSessionId: string | null;
+  activeSessionId: string | undefined;
+  connection: 'connecting' | 'connected' | 'disconnected';
+  onSelect: (id: string) => void;
+}
+
+export function SessionSelector({
+  sessions,
+  selectedSessionId,
+  activeSessionId,
+  connection,
+  onSelect,
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (!ref.current?.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('click', onDocClick);
+    return () => document.removeEventListener('click', onDocClick);
+  }, []);
+
+  const current = sessions.find((s) => s.id === selectedSessionId);
+  const dotColor =
+    connection === 'connected'
+      ? 'bg-success'
+      : connection === 'connecting'
+      ? 'bg-warning'
+      : 'bg-error';
+
+  const label = current
+    ? (current.id === activeSessionId ? '● ' : '') + (current.skill?.toUpperCase() || truncate(current.id, 12))
+    : 'No session';
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className="flex items-center gap-2 px-3 py-1.5 rounded-full border border-border-default bg-elevated text-text-secondary text-xs hover:border-accent transition-colors min-h-[36px]"
+      >
+        <span className={`w-2 h-2 rounded-full ${dotColor}`} />
+        <span>{label}</span>
+        <Icon name="CaretDown" className="w-4 h-4" />
+      </button>
+      {open && (
+        <ul
+          role="listbox"
+          className="absolute top-[calc(100%+8px)] right-0 min-w-[260px] max-h-[320px] overflow-y-auto bg-surface border border-border-default rounded z-50 shadow-lg p-1.5"
+        >
+          {sessions.map((s) => {
+            const duration = s.endedAt
+              ? `ended after ${formatDuration(s.endedAt - s.startTime)}`
+              : formatDuration(Date.now() - s.startTime);
+            const isActive = s.id === selectedSessionId;
+            return (
+              <li
+                key={s.id}
+                role="option"
+                aria-selected={isActive}
+                onClick={() => {
+                  onSelect(s.id);
+                  setOpen(false);
+                }}
+                className={`flex items-center gap-2 px-2.5 py-2 rounded cursor-pointer text-xs border-l-2 ${
+                  isActive
+                    ? 'bg-elevated border-accent text-text-primary'
+                    : 'border-transparent text-text-secondary hover:bg-elevated'
+                }`}
+              >
+                <div className="flex flex-col min-w-0">
+                  <span className="font-mono truncate">{truncate(s.id, 18)}</span>
+                  <span className="text-text-muted text-[11px]">
+                    {formatTime(s.startTime)} · {duration}
+                  </span>
+                </div>
+                <span className="ml-auto text-text-muted uppercase">{s.source}</span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}