@gokulvenkatareddy/cortex 0.1.7

package/apps/octogent/apps/web/src/components/canvas/DeleteAllTerminalsDialog.tsx

@@ -0,0 +1,221 @@
+import { useCallback, useMemo, useState } from "react";
+
+import type { GraphNode } from "../../app/canvas/types";
+import type { TerminalView } from "../../app/types";
+import { ActionButton } from "../ui/ActionButton";
+
+type DeleteAllTerminalsDialogProps = {
+  columns: TerminalView;
+  nodes: GraphNode[];
+  onCancel: () => void;
+  onDeleted: (result: { hadFailures: boolean }) => void;
+};
+
+const readDeleteFailureMessage = async (response: Response, fallback: string) => {
+  try {
+    const payload = (await response.json()) as { error?: unknown };
+    if (typeof payload.error === "string" && payload.error.trim().length > 0) {
+      return payload.error;
+    }
+  } catch {
+    // Ignore malformed error payloads and fall back to the status line.
+  }
+
+  return fallback;
+};
+
+export const DeleteAllTerminalsDialog = ({
+  columns,
+  nodes,
+  onCancel,
+  onDeleted,
+}: DeleteAllTerminalsDialogProps) => {
+  const [inactiveOnly, setInactiveOnly] = useState(true);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [progress, setProgress] = useState<{ done: number; total: number } | null>(null);
+  const [failureMessages, setFailureMessages] = useState<string[]>([]);
+
+  const inactiveTerminals = useMemo(() => columns.filter((t) => !t.hasUserPrompt), [columns]);
+
+  const inactiveSessionIds = useMemo(
+    () =>
+      nodes.flatMap((node) =>
+        node.type === "inactive-session" && node.sessionId ? [node.sessionId] : [],
+      ),
+    [nodes],
+  );
+
+  const activeTargets = inactiveOnly ? inactiveTerminals : columns;
+  const totalTargetCount = activeTargets.length + inactiveSessionIds.length;
+
+  const handleConfirm = useCallback(async () => {
+    if (totalTargetCount === 0) return;
+    setFailureMessages([]);
+    setIsDeleting(true);
+    setProgress({ done: 0, total: totalTargetCount });
+
+    let done = 0;
+    const failures: string[] = [];
+
+    for (const terminal of activeTargets) {
+      try {
+        const response = await fetch(`/api/terminals/${encodeURIComponent(terminal.terminalId)}`, {
+          method: "DELETE",
+          headers: { Accept: "application/json" },
+        });
+        if (!response.ok) {
+          failures.push(
+            `${terminal.tentacleName || terminal.label || terminal.terminalId}: ${await readDeleteFailureMessage(
+              response,
+              `Delete failed (${response.status})`,
+            )}`,
+          );
+        }
+      } catch (error) {
+        failures.push(
+          `${terminal.tentacleName || terminal.label || terminal.terminalId}: ${
+            error instanceof Error ? error.message : "Delete failed."
+          }`,
+        );
+      }
+      done += 1;
+      setProgress({ done, total: totalTargetCount });
+    }
+
+    for (const sessionId of inactiveSessionIds) {
+      try {
+        const response = await fetch(`/api/conversations/${encodeURIComponent(sessionId)}`, {
+          method: "DELETE",
+          headers: { Accept: "application/json" },
+        });
+        if (!response.ok) {
+          failures.push(
+            `Conversation ${sessionId}: ${await readDeleteFailureMessage(
+              response,
+              `Delete failed (${response.status})`,
+            )}`,
+          );
+        }
+      } catch (error) {
+        failures.push(
+          `Conversation ${sessionId}: ${error instanceof Error ? error.message : "Delete failed."}`,
+        );
+      }
+      done += 1;
+      setProgress({ done, total: totalTargetCount });
+    }
+
+    setIsDeleting(false);
+    setProgress(null);
+    setFailureMessages(failures);
+    onDeleted({ hadFailures: failures.length > 0 });
+  }, [activeTargets, inactiveSessionIds, totalTargetCount, onDeleted]);
+
+  return (
+    <section
+      aria-label="Delete all terminals"
+      className="delete-confirm-dialog"
+      onKeyDown={(event) => {
+        if (event.key !== "Escape" || isDeleting) return;
+        event.preventDefault();
+        onCancel();
+      }}
+      tabIndex={-1}
+    >
+      <header className="delete-confirm-header">
+        <h2>Delete Terminals</h2>
+        <div className="delete-confirm-header-actions">
+          <span className="pill blocked">DESTRUCTIVE</span>
+          <ActionButton
+            aria-label="Close confirmation"
+            className="delete-confirm-close"
+            disabled={isDeleting}
+            onClick={onCancel}
+            size="dense"
+            variant="accent"
+          >
+            Close
+          </ActionButton>
+        </div>
+      </header>
+      <div className="delete-confirm-body">
+        <p className="delete-confirm-message">
+          Delete{" "}
+          <strong>
+            {totalTargetCount} {totalTargetCount === 1 ? "session" : "sessions"}
+          </strong>
+          {inactiveOnly ? " (inactive terminals + past sessions)" : " (all)"}.
+        </p>
+        <p className="delete-confirm-message">
+          Worktree-backed terminals also remove their local worktree directories and branches.
+        </p>
+        {failureMessages.length > 0 && (
+          <p className="delete-confirm-message" role="alert">
+            Failed to delete {failureMessages.length}{" "}
+            {failureMessages.length === 1 ? "item" : "items"}:{" "}
+            {failureMessages.slice(0, 3).join("; ")}
+          </p>
+        )}
+        <div className="delete-all-mode-row">
+          <span className="delete-all-mode-label">
+            {inactiveOnly ? "Inactive only" : "All terminals"}
+          </span>
+          <button
+            type="button"
+            className="delete-all-toggle-switch"
+            role="switch"
+            aria-checked={!inactiveOnly}
+            aria-label="Toggle between inactive only and all terminals"
+            disabled={isDeleting}
+            onClick={() => setInactiveOnly((prev) => !prev)}
+          >
+            <span className="delete-all-toggle-thumb" />
+          </button>
+        </div>
+        <dl className="delete-confirm-details delete-all-details">
+          <div>
+            <dt>Inactive</dt>
+            <dd>{inactiveTerminals.length}</dd>
+          </div>
+          <div>
+            <dt>Past sessions</dt>
+            <dd>{inactiveSessionIds.length}</dd>
+          </div>
+          <div>
+            <dt>Total</dt>
+            <dd>{columns.length}</dd>
+          </div>
+        </dl>
+        {progress && (
+          <div className="delete-all-progress">
+            Deleting... {progress.done}/{progress.total}
+          </div>
+        )}
+      </div>
+      <div className="delete-confirm-actions">
+        <ActionButton
+          aria-label="Cancel delete all"
+          className="delete-confirm-cancel"
+          disabled={isDeleting}
+          onClick={onCancel}
+          size="dense"
+          variant="accent"
+        >
+          Cancel
+        </ActionButton>
+        <ActionButton
+          aria-label="Confirm delete all terminals"
+          className="delete-confirm-submit"
+          disabled={isDeleting || totalTargetCount === 0}
+          onClick={() => void handleConfirm()}
+          size="dense"
+          variant="danger"
+        >
+          {isDeleting
+            ? `Deleting ${progress?.done ?? 0}/${progress?.total ?? 0}`
+            : `Delete ${totalTargetCount}`}
+        </ActionButton>
+      </div>
+    </section>
+  );
+};

package/apps/octogent/apps/web/src/components/canvas/OctopusNode.tsx

@@ -0,0 +1,307 @@
+import { useMemo } from "react";
+
+import type { GraphNode } from "../../app/canvas/types";
+import {
+  type OctopusAccessory,
+  type OctopusAnimation,
+  type OctopusExpression,
+  OctopusGlyph,
+} from "../EmptyOctopus";
+
+const LINE_MAX = 22;
+
+const splitLabel = (label: string): [string] | [string, string] => {
+  if (label.length <= LINE_MAX) return [label];
+  const mid = Math.floor(label.length / 2);
+  let best = -1;
+  for (let i = 0; i < label.length; i++) {
+    if (label[i] === " " && (best === -1 || Math.abs(i - mid) < Math.abs(best - mid))) {
+      best = i;
+    }
+  }
+  if (best > 0 && best < label.length - 1) {
+    const line1 = label.slice(0, best);
+    let line2 = label.slice(best + 1);
+    if (line2.length > LINE_MAX) line2 = `${line2.slice(0, LINE_MAX - 1)}…`;
+    return [line1.length > LINE_MAX ? `${line1.slice(0, LINE_MAX - 1)}…` : line1, line2];
+  }
+  return [
+    `${label.slice(0, LINE_MAX - 1)}…`,
+    label.slice(LINE_MAX - 1, LINE_MAX * 2 - 2) + (label.length > LINE_MAX * 2 - 2 ? "…" : ""),
+  ];
+};
+
+const ANIMATIONS: OctopusAnimation[] = ["sway", "walk", "jog", "bounce", "float", "swim-up"];
+const EXPRESSIONS: OctopusExpression[] = ["normal", "happy", "angry", "surprised"];
+const ACCESSORIES: OctopusAccessory[] = ["none", "none", "long", "mohawk", "side-sweep", "curly"];
+
+function hashString(str: string): number {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) {
+    h = ((h << 5) - h + str.charCodeAt(i)) | 0;
+  }
+  return Math.abs(h);
+}
+
+function seededRandom(seed: number): () => number {
+  let s = seed;
+  return () => {
+    s = (s * 16807 + 0) % 2147483647;
+    return (s - 1) / 2147483646;
+  };
+}
+
+type OctopusVisuals = {
+  animation: OctopusAnimation;
+  expression: OctopusExpression;
+  accessory: OctopusAccessory;
+  hairColor?: string | undefined;
+};
+
+function deriveOctopusVisuals(node: GraphNode): OctopusVisuals {
+  const rng = seededRandom(hashString(node.tentacleId));
+  const stored = node.octopus;
+  return {
+    animation:
+      (stored?.animation as OctopusAnimation | null) ??
+      (ANIMATIONS[Math.floor(rng() * ANIMATIONS.length)] as OctopusAnimation),
+    expression:
+      (stored?.expression as OctopusExpression | null) ??
+      (EXPRESSIONS[Math.floor(rng() * EXPRESSIONS.length)] as OctopusExpression),
+    accessory:
+      (stored?.accessory as OctopusAccessory | null) ??
+      (ACCESSORIES[Math.floor(rng() * ACCESSORIES.length)] as OctopusAccessory),
+    hairColor: stored?.hairColor ?? undefined,
+  };
+}
+
+type OctopusNodeProps = {
+  node: GraphNode;
+  connectedNodes: GraphNode[];
+  isSelected: boolean;
+  selectedNodeId: string | null;
+  selectedNodeColor: string | null;
+  onPointerDown: (e: React.PointerEvent, nodeId: string) => void;
+  onClick: (nodeId: string) => void;
+};
+
+const buildEdgePath = (
+  cx: number,
+  cy: number,
+  tx: number,
+  ty: number,
+  targetRadius: number,
+  edgeIndex: number,
+  edgeCount: number,
+): string => {
+  const dx = tx - cx;
+  const dy = ty - cy;
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  if (dist < 1) return "";
+
+  // Shorten the endpoint so the edge stops at the target node's border
+  const shortenBy = targetRadius + 2;
+  const endRatio = Math.max(0, (dist - shortenBy) / dist);
+  const etx = cx + dx * endRatio;
+  const ety = cy + dy * endRatio;
+
+  // Curvature — perpendicular offset for quadratic Bézier control point
+  // Single edges get a default curve; multi-edges fan out
+  const curvature = edgeCount <= 1 ? 0.3 : (edgeIndex / (edgeCount - 1) - 0.5) * 2;
+  const offsetRatio = 0.25 + edgeCount * 0.05;
+  const baseOffset = Math.max(35, dist * offsetRatio);
+
+  // Perpendicular to source→target direction (unit normal: -dy/dist, dx/dist)
+  const offsetX = (-dy / dist) * curvature * baseOffset;
+  const offsetY = (dx / dist) * curvature * baseOffset;
+  const cpx = (cx + etx) / 2 + offsetX;
+  const cpy = (cy + ety) / 2 + offsetY;
+
+  return `M ${cx} ${cy} Q ${cpx} ${cpy} ${etx} ${ety}`;
+};
+
+const GLYPH_SCALE = 4;
+const GLYPH_W = 112;
+const GLYPH_H = 120;
+
+const isEdgeActivityVisible = (target: GraphNode): boolean =>
+  target.type === "active-session" &&
+  target.hasUserPrompt !== false &&
+  target.agentRuntimeState !== undefined &&
+  target.agentRuntimeState !== "idle";
+
+const renderEdgeActivityDots = (path: string, color: string, keyPrefix: string) =>
+  [0, 1, 2].flatMap((index) => [
+    <circle
+      key={`${keyPrefix}-trail-${index}`}
+      className="canvas-edge-activity-dot canvas-edge-activity-dot--trail"
+      r={4.6}
+      fill={color}
+      opacity={Math.max(0.14, 0.28 - index * 0.04)}
+    >
+      <animateMotion
+        path={path}
+        begin={`${index * 0.62}s`}
+        dur="1.9s"
+        repeatCount="indefinite"
+        rotate="auto"
+      />
+      <animate
+        attributeName="r"
+        values="3.8;5.2;3.8"
+        dur="1.9s"
+        begin={`${index * 0.62}s`}
+        repeatCount="indefinite"
+      />
+    </circle>,
+    <circle
+      key={`${keyPrefix}-dot-${index}`}
+      className="canvas-edge-activity-dot"
+      r={3.2}
+      fill="#fff4cc"
+      stroke={color}
+      strokeWidth={1.2}
+      opacity={Math.max(0.7, 1 - index * 0.08)}
+    >
+      <animateMotion
+        path={path}
+        begin={`${index * 0.62}s`}
+        dur="1.9s"
+        repeatCount="indefinite"
+        rotate="auto"
+      />
+      <animate
+        attributeName="r"
+        values="2.8;3.8;2.8"
+        dur="1.9s"
+        begin={`${index * 0.62}s`}
+        repeatCount="indefinite"
+      />
+    </circle>,
+  ]);
+
+export const OctopusNode = ({
+  node,
+  connectedNodes,
+  isSelected,
+  selectedNodeId,
+  selectedNodeColor,
+  onPointerDown,
+  onClick,
+}: OctopusNodeProps) => {
+  const showFocus = isSelected;
+  const isOctoboss = node.type === "octoboss";
+  const lines = useMemo(() => splitLabel(node.label), [node.label]);
+  const visuals = useMemo(
+    () =>
+      isOctoboss
+        ? ({ animation: "sway", expression: "normal", accessory: "none" } as OctopusVisuals)
+        : deriveOctopusVisuals(node),
+    [node, isOctoboss],
+  );
+  const glyphScale = isOctoboss ? 6 : GLYPH_SCALE;
+  const glyphW = Math.round(GLYPH_W * (glyphScale / GLYPH_SCALE));
+  const glyphH = Math.round(GLYPH_H * (glyphScale / GLYPH_SCALE));
+  const color = node.color;
+
+  return (
+    <g
+      className={`canvas-node canvas-node--tentacle${showFocus ? " canvas-node--selected" : ""}`}
+      data-node-id={node.id}
+      transform={`translate(${node.x}, ${node.y})`}
+      onPointerDown={(e) => {
+        if (e.button !== 0) return;
+        e.stopPropagation();
+        onPointerDown(e, node.id);
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick(node.id);
+      }}
+      onKeyDown={(e) => {
+        if (e.key !== "Enter" && e.key !== " ") return;
+        e.preventDefault();
+        e.stopPropagation();
+        onClick(node.id);
+      }}
+      style={{ cursor: "grab" }}
+    >
+      {/* Invisible hit area for pointer events */}
+      <rect x={-glyphW / 2} y={-glyphH / 2} width={glyphW} height={glyphH} fill="transparent" />
+
+      {/* Edges — highlight when either endpoint is selected */}
+      {connectedNodes.map((target) => {
+        const active = isSelected || target.id === selectedNodeId;
+        const path = buildEdgePath(0, 0, target.x - node.x, target.y - node.y, target.radius, 0, 1);
+        return (
+          <g key={target.id}>
+            <path
+              className="canvas-edge"
+              d={path}
+              fill="none"
+              stroke={active ? (selectedNodeColor ?? color) : "#C0C0C0"}
+              strokeWidth={active ? 2 : 1.5}
+              strokeOpacity={1}
+            />
+            {isEdgeActivityVisible(target)
+              ? renderEdgeActivityDots(
+                  path,
+                  active ? (selectedNodeColor ?? color) : color,
+                  target.id,
+                )
+              : null}
+          </g>
+        );
+      })}
+
+      {/* Focused glow — same style as session nodes */}
+      {showFocus && <circle className="canvas-node-focus-glow" r={node.radius - 4} fill={color} />}
+
+      {/* Octopus glyph via foreignObject */}
+      <foreignObject
+        x={-glyphW / 2}
+        y={-glyphH / 2}
+        width={glyphW}
+        height={glyphH}
+        style={{ overflow: "visible", pointerEvents: "none" }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+          }}
+        >
+          <OctopusGlyph
+            {...(isOctoboss ? {} : { color })}
+            animation={visuals.animation}
+            expression={visuals.expression}
+            accessory={visuals.accessory}
+            {...(visuals.hairColor ? { hairColor: visuals.hairColor } : {})}
+            scale={glyphScale}
+          />
+        </div>
+      </foreignObject>
+
+      {/* Label — always visible, up to two lines */}
+      <text
+        y={glyphH / 2 - 12}
+        textAnchor="middle"
+        className="canvas-node-label canvas-node-label--tentacle canvas-node-label--always"
+        fill={isOctoboss ? "var(--accent-primary, #d4a017)" : "#faa32c"}
+      >
+        <tspan x="0" dy="0">
+          {lines[0]}
+        </tspan>
+        {lines[1] && (
+          <tspan x="0" dy="1.2em">
+            {lines[1]}
+          </tspan>
+        )}
+      </text>
+    </g>
+  );
+};