@gokulvenkatareddy/cortex 0.1.7

package/apps/octogent/apps/web/src/components/ClearAllConversationsDialog.tsx

@@ -0,0 +1,33 @@
+import { ConfirmationDialog } from "./ui/ConfirmationDialog";
+
+type ClearAllConversationsDialogProps = {
+  sessionCount: number;
+  isClearing: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+};
+
+export const ClearAllConversationsDialog = ({
+  sessionCount,
+  isClearing,
+  onCancel,
+  onConfirm,
+}: ClearAllConversationsDialogProps) => (
+  <ConfirmationDialog
+    title="Clear All Conversations"
+    ariaLabel="Clear all conversations confirmation"
+    message={
+      <>
+        Delete all <strong>{sessionCount}</strong> conversation
+        {sessionCount === 1 ? "" : "s"} and their transcript data.
+      </>
+    }
+    warning="This action cannot be undone."
+    confirmLabel={isClearing ? "Clearing..." : "Clear All"}
+    isConfirmDisabled={isClearing}
+    isBusy={isClearing}
+    cancelAriaLabel="Cancel clear all"
+    onCancel={onCancel}
+    onConfirm={onConfirm}
+  />
+);

package/apps/octogent/apps/web/src/components/CodeIntelArcDiagram.tsx

@@ -0,0 +1,245 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import type { CouplingData } from "../app/codeIntelAggregation";
+import { heatColor } from "../app/codeIntelAggregation";
+
+type CodeIntelArcDiagramProps = {
+  data: CouplingData;
+};
+
+const ROW_HEIGHT = 22;
+const LABEL_WIDTH = 100;
+const PADDING_Y = 8;
+const MAX_ARCS = 40;
+
+const ACCENT = "#d4a017";
+
+export const CodeIntelArcDiagram = ({ data }: CodeIntelArcDiagramProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState({ width: 300, height: 400 });
+  const [hoveredPair, setHoveredPair] = useState<string | null>(null);
+  const [hoveredFile, setHoveredFile] = useState<string | null>(null);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+
+  const measure = useCallback(() => {
+    if (containerRef.current) {
+      setSize({
+        width: containerRef.current.clientWidth,
+        height: containerRef.current.clientHeight,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    measure();
+    const observer = new ResizeObserver(measure);
+    if (containerRef.current) observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [measure]);
+
+  const files = useMemo(() => data.files, [data.files]);
+  const pairs = useMemo(() => data.pairs.slice(0, MAX_ARCS), [data.pairs]);
+
+  const fileIndexMap = useMemo(() => {
+    const map = new Map<string, number>();
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      if (!file) continue;
+      map.set(file.file, i);
+    }
+    return map;
+  }, [files]);
+
+  const fileCouplingMap = useMemo(() => {
+    const map = new Map<string, { partner: string; coSessions: number }[]>();
+    for (const p of pairs) {
+      if (!map.has(p.fileA)) map.set(p.fileA, []);
+      if (!map.has(p.fileB)) map.set(p.fileB, []);
+      map.get(p.fileA)?.push({ partner: p.fileB, coSessions: p.coSessions });
+      map.get(p.fileB)?.push({ partner: p.fileA, coSessions: p.coSessions });
+    }
+    for (const entries of map.values()) {
+      entries.sort((a, b) => b.coSessions - a.coSessions);
+    }
+    return map;
+  }, [pairs]);
+
+  const dotX = LABEL_WIDTH;
+  const arcAreaWidth = size.width - LABEL_WIDTH - 8;
+  const minSvgHeight = PADDING_Y + files.length * ROW_HEIGHT + PADDING_Y;
+  const svgHeight = Math.max(minSvgHeight, size.height);
+  const dynamicRowHeight =
+    files.length > 0 ? (svgHeight - PADDING_Y * 2) / files.length : ROW_HEIGHT;
+
+  const maxCoSessions = useMemo(() => {
+    let max = 0;
+    for (const p of pairs) {
+      if (p.coSessions > max) max = p.coSessions;
+    }
+    return max;
+  }, [pairs]);
+
+  const fileY = (index: number) => PADDING_Y + index * dynamicRowHeight + dynamicRowHeight / 2;
+
+  const hoveredPairData = useMemo(() => {
+    if (!hoveredPair) return null;
+    return pairs.find((p) => pairKey(p.fileA, p.fileB) === hoveredPair) ?? null;
+  }, [hoveredPair, pairs]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  }, []);
+
+  return (
+    <div className="code-intel-arc-diagram" ref={containerRef} onMouseMove={handleMouseMove}>
+      <svg
+        className="code-intel-arc-svg"
+        width={size.width}
+        height={Math.max(svgHeight, size.height)}
+        viewBox={`0 0 ${size.width} ${Math.max(svgHeight, size.height)}`}
+        role="img"
+        aria-label="File coupling arc diagram"
+      >
+        {/* Arcs — curve to the right */}
+        {pairs.map((pair) => {
+          const idxA = fileIndexMap.get(pair.fileA);
+          const idxB = fileIndexMap.get(pair.fileB);
+          if (idxA === undefined || idxB === undefined) return null;
+
+          const y1 = fileY(idxA);
+          const y2 = fileY(idxB);
+          const span = Math.abs(idxB - idxA);
+          const curveX = dotX + Math.min(span * 16, arcAreaWidth);
+          const key = pairKey(pair.fileA, pair.fileB);
+          const isHovered =
+            hoveredPair === key || hoveredFile === pair.fileA || hoveredFile === pair.fileB;
+
+          const d = `M ${dotX} ${y1} C ${curveX} ${y1}, ${curveX} ${y2}, ${dotX} ${y2}`;
+
+          return (
+            <g key={key}>
+              <path
+                d={d}
+                fill="none"
+                stroke="transparent"
+                strokeWidth={12}
+                onMouseEnter={() => setHoveredPair(key)}
+                onMouseLeave={() => setHoveredPair(null)}
+                style={{ cursor: "crosshair" }}
+              />
+              <path
+                d={d}
+                fill="none"
+                stroke={heatColor(pair.coSessions, maxCoSessions)}
+                strokeWidth={isHovered ? 1.5 : 0.75}
+                strokeOpacity={isHovered ? 1 : 0.4}
+                className="code-intel-arc-path"
+                pointerEvents="none"
+              />
+            </g>
+          );
+        })}
+
+        {/* File dots and labels — vertical list on the left */}
+        {files.map((f, i) => {
+          const y = fileY(i);
+          const isHighlighted =
+            hoveredFile === f.file ||
+            (hoveredPair !== null &&
+              pairs.some(
+                (p) =>
+                  pairKey(p.fileA, p.fileB) === hoveredPair &&
+                  (p.fileA === f.file || p.fileB === f.file),
+              ));
+
+          const shortName = f.file.split("/").pop() ?? f.file;
+
+          return (
+            <g
+              key={f.file}
+              onMouseEnter={() => setHoveredFile(f.file)}
+              onMouseLeave={() => setHoveredFile(null)}
+              className="code-intel-arc-file-group"
+            >
+              <circle
+                cx={dotX}
+                cy={y}
+                r={3.5}
+                fill={ACCENT}
+                fillOpacity={isHighlighted ? 1 : 0.7}
+                stroke={isHighlighted ? "#fff" : "none"}
+                strokeWidth={isHighlighted ? 1.5 : 0}
+              />
+              <text
+                x={dotX - 8}
+                y={y + 3.5}
+                textAnchor="end"
+                className={`code-intel-arc-label${isHighlighted ? " code-intel-arc-label--active" : ""}`}
+              >
+                {truncateLabel(shortName, LABEL_WIDTH - 12)}
+              </text>
+            </g>
+          );
+        })}
+      </svg>
+
+      {/* Edge hover tooltip */}
+      {hoveredPairData && !hoveredFile && (
+        <div
+          className="code-intel-tooltip"
+          style={{
+            left: Math.min(mousePos.x + 12, size.width - 200),
+            top: Math.max(mousePos.y - 40, 4),
+          }}
+        >
+          <div className="code-intel-tooltip-path">
+            {shortFileName(hoveredPairData.fileA)} ↔ {shortFileName(hoveredPairData.fileB)}
+          </div>
+          <div className="code-intel-tooltip-value">
+            {hoveredPairData.coSessions} co-edit{hoveredPairData.coSessions !== 1 ? "s" : ""}
+          </div>
+        </div>
+      )}
+
+      {/* Node hover tooltip — to the right of the dot */}
+      {hoveredFile && (
+        <div
+          className="code-intel-tooltip code-intel-tooltip--node"
+          style={{
+            left: dotX + 12,
+            top: Math.max(fileY(fileIndexMap.get(hoveredFile) ?? 0) - 20, 4),
+          }}
+        >
+          <div className="code-intel-tooltip-path">{hoveredFile}</div>
+          {fileCouplingMap.has(hoveredFile) ? (
+            <div className="code-intel-tooltip-coupling-list">
+              {fileCouplingMap.get(hoveredFile)?.map((c) => (
+                <div key={c.partner} className="code-intel-tooltip-coupling-row">
+                  <span className="code-intel-tooltip-coupling-partner">
+                    {shortFileName(c.partner)}
+                  </span>
+                  <span className="code-intel-tooltip-coupling-count">{c.coSessions}×</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="code-intel-tooltip-value">No coupling detected</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const pairKey = (a: string, b: string) => (a < b ? `${a}\0${b}` : `${b}\0${a}`);
+
+const shortFileName = (path: string): string => path.split("/").pop() ?? path;
+
+const truncateLabel = (label: string, maxWidth: number): string => {
+  const charWidth = 6.5;
+  const maxChars = Math.floor(maxWidth / charWidth);
+  if (label.length <= maxChars) return label;
+  if (maxChars <= 3) return "";
+  return `${label.slice(0, maxChars - 1)}\u2026`;
+};

package/apps/octogent/apps/web/src/components/CodeIntelPrimaryView.tsx

@@ -0,0 +1,104 @@
+import { FileCode2, GitFork, PenLine, Terminal } from "lucide-react";
+
+import { useCodeIntelRuntime } from "../app/hooks/useCodeIntelRuntime";
+import { CodeIntelArcDiagram } from "./CodeIntelArcDiagram";
+import { CodeIntelTreemap } from "./CodeIntelTreemap";
+import { ActionButton } from "./ui/ActionButton";
+
+type CodeIntelPrimaryViewProps = {
+  enabled: boolean;
+};
+
+export const CodeIntelPrimaryView = ({ enabled }: CodeIntelPrimaryViewProps) => {
+  const { events, treemapRoot, couplingData, isLoading, error, refresh } =
+    useCodeIntelRuntime(enabled);
+
+  if (isLoading && events.length === 0) {
+    return (
+      <section className="code-intel-view" aria-label="Code Intel primary view">
+        <section className="code-intel-panel">
+          <header className="code-intel-panel-header">
+            <h2>Code Intel</h2>
+            <p>Loading edit events...</p>
+          </header>
+        </section>
+      </section>
+    );
+  }
+
+  if (error) {
+    return (
+      <section className="code-intel-view" aria-label="Code Intel primary view">
+        <section className="code-intel-panel">
+          <header className="code-intel-panel-header">
+            <h2>Code Intel</h2>
+            <p className="code-intel-error">{error}</p>
+          </header>
+        </section>
+      </section>
+    );
+  }
+
+  if (events.length === 0) {
+    return (
+      <section className="code-intel-view" aria-label="Code Intel primary view">
+        <section className="code-intel-panel">
+          <header className="code-intel-panel-header">
+            <h2>Code Intel</h2>
+            <p>No edit events recorded yet. Events are tracked as agents edit files.</p>
+          </header>
+        </section>
+      </section>
+    );
+  }
+
+  return (
+    <section className="code-intel-view" aria-label="Code Intel primary view">
+      <header className="code-intel-view-header">
+        <span className="code-intel-stat">
+          <PenLine size={13} className="code-intel-stat-icon code-intel-stat-icon--edits" />
+          <span className="code-intel-stat-value">{events.length}</span>
+          <span className="code-intel-stat-label">edits</span>
+        </span>
+        <span className="code-intel-stat">
+          <FileCode2 size={13} className="code-intel-stat-icon code-intel-stat-icon--files" />
+          <span className="code-intel-stat-value">{couplingData?.files.length ?? 0}</span>
+          <span className="code-intel-stat-label">files</span>
+        </span>
+        <span className="code-intel-stat">
+          <Terminal size={13} className="code-intel-stat-icon code-intel-stat-icon--sessions" />
+          <span className="code-intel-stat-value">
+            {new Set(events.map((e) => e.sessionId)).size}
+          </span>
+          <span className="code-intel-stat-label">sessions</span>
+        </span>
+        <span className="code-intel-stat">
+          <GitFork size={13} className="code-intel-stat-icon code-intel-stat-icon--pairs" />
+          <span className="code-intel-stat-value">{couplingData?.pairs.length ?? 0}</span>
+          <span className="code-intel-stat-label">pairs</span>
+        </span>
+        <ActionButton size="dense" variant="accent" onClick={refresh}>
+          Refresh
+        </ActionButton>
+      </header>
+
+      <div className="code-intel-panels">
+        <section className="code-intel-panel code-intel-panel--treemap">
+          <header className="code-intel-panel-header">
+            <h2>Edit Frequency</h2>
+            <p>File size = number of edits.</p>
+          </header>
+          {treemapRoot && <CodeIntelTreemap root={treemapRoot} />}
+        </section>
+
+        <section className="code-intel-panel code-intel-panel--coupling">
+          <header className="code-intel-panel-header">
+            <h2>Change Coupling</h2>
+            <p>Files that change together in the same session.</p>
+          </header>
+          {couplingData && <CodeIntelArcDiagram data={couplingData} />}
+        </section>
+      </div>
+    </section>
+  );
+};

package/apps/octogent/apps/web/src/components/CodeIntelTreemap.tsx

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import {
+  type TreemapNode,
+  type TreemapRect,
+  heatColor,
+  layoutTreemap,
+} from "../app/codeIntelAggregation";
+
+type CodeIntelTreemapProps = {
+  root: TreemapNode;
+};
+
+const GAP = 2;
+const MIN_LABEL_WIDTH = 48;
+const MIN_LABEL_HEIGHT = 18;
+
+export const CodeIntelTreemap = ({ root }: CodeIntelTreemapProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState({ width: 600, height: 400 });
+  const [hoveredRect, setHoveredRect] = useState<TreemapRect | null>(null);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+
+  const measure = useCallback(() => {
+    if (containerRef.current) {
+      setSize({
+        width: containerRef.current.clientWidth,
+        height: containerRef.current.clientHeight,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    measure();
+    const observer = new ResizeObserver(measure);
+    if (containerRef.current) observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [measure]);
+
+  const rects = useMemo(
+    () => layoutTreemap(root, size.width, size.height),
+    [root, size.width, size.height],
+  );
+
+  const maxValue = useMemo(() => {
+    let max = 0;
+    for (const r of rects) {
+      if (r.value > max) max = r.value;
+    }
+    return max;
+  }, [rects]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  }, []);
+
+  return (
+    <div className="code-intel-treemap" ref={containerRef} onMouseMove={handleMouseMove}>
+      <svg
+        className="code-intel-treemap-svg"
+        viewBox={`0 0 ${size.width} ${size.height}`}
+        width={size.width}
+        height={size.height}
+        role="img"
+        aria-label="File edit frequency treemap"
+      >
+        {rects.map((r) => {
+          const gapX = GAP;
+          const gapY = GAP;
+          const rx = r.x + gapX / 2;
+          const ry = r.y + gapY / 2;
+          const rw = Math.max(r.width - gapX, 0);
+          const rh = Math.max(r.height - gapY, 0);
+          if (rw <= 0 || rh <= 0) return null;
+
+          const isHovered = hoveredRect?.path === r.path;
+          const showLabel = rw >= MIN_LABEL_WIDTH && rh >= MIN_LABEL_HEIGHT;
+
+          return (
+            <g
+              key={r.path}
+              onMouseEnter={() => setHoveredRect(r)}
+              onMouseLeave={() => setHoveredRect(null)}
+            >
+              <rect
+                x={rx}
+                y={ry}
+                width={rw}
+                height={rh}
+                rx={2}
+                fill={heatColor(r.value, maxValue)}
+                className="code-intel-treemap-cell"
+                style={{
+                  filter: isHovered ? "brightness(1.35)" : undefined,
+                  stroke: isHovered ? "#d4a017" : "#0b0d10",
+                  strokeWidth: isHovered ? 1.5 : 0.5,
+                }}
+              />
+              {showLabel && (
+                <text
+                  x={rx + 4}
+                  y={ry + 13}
+                  className="code-intel-treemap-label"
+                  clipPath={"inset(0 0 0 0)"}
+                >
+                  <tspan className="code-intel-treemap-count">{r.value}:</tspan>
+                  <tspan>{truncateLabel(r.name, rw - 8 - `${r.value}:`.length * 6.5)}</tspan>
+                </text>
+              )}
+            </g>
+          );
+        })}
+      </svg>
+
+      {hoveredRect && (
+        <div
+          className="code-intel-tooltip"
+          style={{
+            left: mousePos.x > size.width / 2 ? mousePos.x - 200 : mousePos.x + 12,
+            top: mousePos.y > size.height / 2 ? mousePos.y - 52 : mousePos.y + 12,
+          }}
+        >
+          <div className="code-intel-tooltip-path">{hoveredRect.path}</div>
+          <div className="code-intel-tooltip-value">{hoveredRect.value} edits</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const truncateLabel = (label: string, maxWidth: number): string => {
+  const charWidth = 6.5;
+  const maxChars = Math.floor(maxWidth / charWidth);
+  if (label.length <= maxChars) return label;
+  if (maxChars <= 3) return "";
+  return `${label.slice(0, maxChars - 1)}\u2026`;
+};

package/apps/octogent/apps/web/src/components/ConsolePrimaryNav.tsx

@@ -0,0 +1,31 @@
+import { PRIMARY_NAV_ITEMS, type PrimaryNavIndex } from "../app/constants";
+
+type ConsolePrimaryNavProps = {
+  activePrimaryNav: PrimaryNavIndex;
+  onPrimaryNavChange: (index: PrimaryNavIndex) => void;
+};
+
+export const ConsolePrimaryNav = ({
+  activePrimaryNav,
+  onPrimaryNavChange,
+}: ConsolePrimaryNavProps) => (
+  <nav className="console-primary-nav" aria-label="Primary navigation">
+    <div className="console-primary-nav-tabs">
+      {PRIMARY_NAV_ITEMS.map((item) => (
+        <button
+          aria-current={item.index === activePrimaryNav ? "page" : undefined}
+          className="console-primary-nav-tab"
+          data-active={item.index === activePrimaryNav ? "true" : "false"}
+          key={item.index}
+          onClick={() => {
+            onPrimaryNavChange(item.index);
+          }}
+          type="button"
+        >
+          [{item.index}] {item.label}
+        </button>
+      ))}
+    </div>
+    <p className="console-primary-nav-hint">Press 1-{PRIMARY_NAV_ITEMS.length} to navigate</p>
+  </nav>
+);