@gokulvenkatareddy/cortex 0.1.7

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

@@ -0,0 +1,185 @@
+import { useMemo } from "react";
+
+import type { GraphNode } from "../../app/canvas/types";
+
+const LINE_MAX = 24;
+const PILL_HEIGHT = 16;
+const PILL_RX = 8;
+const PILL_CHAR_WIDTH = 5.5;
+const PILL_PADDING = 14;
+const PILL_MAX_CHARS = 14;
+
+const splitLabel = (label: string): [string] | [string, string] => {
+  if (label.length <= LINE_MAX) return [label];
+  // Try to break at a space near the midpoint
+  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 truncateToolName = (name: string): string => {
+  if (name.length <= PILL_MAX_CHARS) return name;
+  return `${name.slice(0, PILL_MAX_CHARS - 1)}…`;
+};
+
+type SessionNodeProps = {
+  node: GraphNode;
+  isSelected: boolean;
+  onPointerDown: (e: React.PointerEvent, nodeId: string) => void;
+  onClick: (nodeId: string) => void;
+};
+
+export const SessionNode = ({ node, isSelected, onPointerDown, onClick }: SessionNodeProps) => {
+  const isActive = node.type === "active-session" && node.hasUserPrompt !== false;
+  const isLive = isActive && node.agentState === "live";
+  const isWaiting =
+    node.agentRuntimeState === "waiting_for_permission" ||
+    node.agentRuntimeState === "waiting_for_user";
+  const color = isActive ? node.color : "#9ca3af";
+  const isWorktree = node.workspaceMode === "worktree" && !node.parentTerminalId;
+  const isSwarmWorker = !!node.parentTerminalId;
+  const lines = useMemo(() => splitLabel(node.label), [node.label]);
+
+  const pillLabel = useMemo(() => {
+    if (node.agentRuntimeState === "waiting_for_permission") {
+      return node.waitingToolName ? truncateToolName(node.waitingToolName) : "PERMISSION";
+    }
+    if (node.agentRuntimeState === "waiting_for_user") {
+      return "WAITING";
+    }
+    return "";
+  }, [node.agentRuntimeState, node.waitingToolName]);
+
+  const pillWidth = pillLabel.length * PILL_CHAR_WIDTH + PILL_PADDING;
+  const pillY = node.radius + 4;
+  const labelYOffset = isWaiting ? PILL_HEIGHT + 6 : 0;
+
+  return (
+    <g
+      className={`canvas-node canvas-node--session${isSelected ? " canvas-node--selected" : ""}${isActive ? " canvas-node--active" : " canvas-node--inactive"}`}
+      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: "pointer" }}
+    >
+      {/* Worktree ring — dashed stroke */}
+      {isWorktree && (
+        <circle
+          className="canvas-node-ring canvas-node-ring--worktree"
+          r={node.radius + 6}
+          fill="none"
+          stroke={color}
+        />
+      )}
+
+      {/* Swarm worker ring — double concentric circles */}
+      {isSwarmWorker && (
+        <>
+          <circle
+            className="canvas-node-ring canvas-node-ring--swarm"
+            r={node.radius + 5}
+            fill="none"
+            stroke={color}
+          />
+          <circle
+            className="canvas-node-ring canvas-node-ring--swarm-outer"
+            r={node.radius + 9}
+            fill="none"
+            stroke={color}
+          />
+        </>
+      )}
+
+      {/* Focused shine — accent glow when waiting, white otherwise */}
+      {isSelected && (
+        <circle
+          className="canvas-node-focus-glow"
+          r={node.radius + 12}
+          fill={isWaiting ? "#f59e0b" : "#ffffff"}
+        />
+      )}
+
+      {/* Subtle glow halo — accent when waiting */}
+      <circle
+        className={`canvas-node-bloom${isLive || isWaiting ? " canvas-node-bloom--pulse" : ""}`}
+        r={node.radius + 3}
+        fill={isWaiting ? "#f59e0b" : color}
+        opacity={isWaiting ? 0.45 : isActive ? 0.25 : 0.1}
+      />
+
+      {/* Bright core dot — accent when waiting */}
+      <circle
+        className="canvas-node-core"
+        r={node.radius}
+        fill={isWaiting ? "#f59e0b" : color}
+        opacity={isActive ? 1 : 0.4}
+      />
+
+      {/* Waiting indicator pill */}
+      {isWaiting && (
+        <g className="canvas-node-waiting-indicator">
+          <rect
+            className="canvas-node-waiting-pill"
+            x={-pillWidth / 2}
+            y={pillY}
+            width={pillWidth}
+            height={PILL_HEIGHT}
+            rx={PILL_RX}
+          />
+          <text
+            className="canvas-node-waiting-label"
+            y={pillY + PILL_HEIGHT / 2 + 3.5}
+            textAnchor="middle"
+          >
+            {pillLabel}
+          </text>
+        </g>
+      )}
+
+      {/* Label — always visible, up to two lines */}
+      <text
+        y={node.radius + 16 + labelYOffset}
+        textAnchor="middle"
+        className="canvas-node-label canvas-node-label--session canvas-node-label--always"
+        fill="var(--accent-primary)"
+      >
+        <tspan x="0" dy="0">
+          {lines[0]}
+        </tspan>
+        {lines[1] && (
+          <tspan x="0" dy="1.2em">
+            {lines[1]}
+          </tspan>
+        )}
+      </text>
+    </g>
+  );
+};

package/apps/octogent/apps/web/src/components/deck/ActionCards.tsx

@@ -0,0 +1,118 @@
+import { Check } from "lucide-react";
+
+import type { TerminalAgentProvider } from "../../app/types";
+import { OctopusGlyph } from "../EmptyOctopus";
+
+export const AGENT_PROVIDER_OPTIONS: { value: TerminalAgentProvider; label: string }[] = [
+  { value: "claude-code", label: "Cortex" },
+];
+
+export type ActionCardsProps = {
+  compact?: boolean;
+  selectedAgent: TerminalAgentProvider;
+  setSelectedAgent: (agent: TerminalAgentProvider) => void;
+  agentMenuOpen: boolean;
+  setAgentMenuOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
+  agentMenuRef: React.RefObject<HTMLDivElement | null>;
+  onAddManually: () => void;
+  onLaunchAgent: () => void;
+  isLaunchingAgent?: boolean;
+};
+
+export const ActionCards = ({
+  compact,
+  selectedAgent,
+  setSelectedAgent,
+  agentMenuOpen,
+  setAgentMenuOpen,
+  agentMenuRef,
+  onAddManually,
+  onLaunchAgent,
+  isLaunchingAgent,
+}: ActionCardsProps) => (
+  <div className={`deck-empty-actions${compact ? " deck-empty-actions--compact" : ""}`}>
+    <button type="button" className="deck-empty-card" onClick={onAddManually}>
+      <div className="deck-empty-card-icon">
+        <OctopusGlyph
+          color="#d4a017"
+          animation="idle"
+          expression="normal"
+          accessory="none"
+          scale={compact ? 3 : 4}
+        />
+      </div>
+      <div className="deck-empty-card-text">
+        <span className="deck-empty-card-title">Create First Tentacle</span>
+        <span className="deck-empty-card-desc">
+          Start the deck by creating a tentacle for your codebase
+        </span>
+      </div>
+    </button>
+    <div className="deck-empty-card">
+      <span className="deck-empty-card-icon deck-empty-card-icon--terminal">&gt;_</span>
+      <div className="deck-empty-card-text">
+        <span className="deck-empty-card-title">Open Agent</span>
+        <span className="deck-empty-card-desc">
+          Launch your coding agent to create tentacles based on your codebase
+        </span>
+        <div className="deck-empty-agent-select-row">
+          <div className="deck-empty-agent-picker" ref={agentMenuRef}>
+            <button
+              type="button"
+              className="deck-empty-agent-trigger"
+              aria-expanded={agentMenuOpen}
+              aria-haspopup="menu"
+              onClick={() => setAgentMenuOpen((p: boolean) => !p)}
+            >
+              {AGENT_PROVIDER_OPTIONS.find((o) => o.value === selectedAgent)?.label}
+              <svg className="deck-empty-agent-chevron" viewBox="0 0 10 6" aria-hidden="true">
+                <path d="M1 1l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.5" />
+              </svg>
+            </button>
+            {agentMenuOpen && (
+              <div className="deck-empty-agent-menu" role="menu">
+                {AGENT_PROVIDER_OPTIONS.map((opt) => (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    className="deck-empty-agent-menu-item"
+                    role="menuitem"
+                    data-active={opt.value === selectedAgent ? "true" : "false"}
+                    onClick={() => {
+                      setSelectedAgent(opt.value);
+                      setAgentMenuOpen(false);
+                    }}
+                  >
+                    {opt.label}
+                    {opt.value === selectedAgent && (
+                      <span className="deck-empty-agent-menu-check">
+                        <Check size={12} />
+                      </span>
+                    )}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <button
+            type="button"
+            className="deck-empty-agent-launch"
+            disabled={isLaunchingAgent}
+            onClick={onLaunchAgent}
+          >
+            {isLaunchingAgent ? "..." : "Launch"}
+          </button>
+        </div>
+      </div>
+    </div>
+    <button type="button" className="deck-empty-card" onClick={onAddManually}>
+      <span className="deck-empty-card-icon deck-empty-card-icon--terminal">+</span>
+      <div className="deck-empty-card-text">
+        <span className="deck-empty-card-title">Add Tentacle Manually</span>
+        <span className="deck-empty-card-desc">
+          Create a custom tentacle with your own configuration
+        </span>
+      </div>
+    </button>
+  </div>
+);

package/apps/octogent/apps/web/src/components/deck/AddTentacleForm.tsx

@@ -0,0 +1,269 @@
+import { useEffect, useRef, useState } from "react";
+
+import type { DeckAvailableSkill } from "@octogent/core";
+import type { OctopusAccessory, OctopusAnimation, OctopusExpression } from "../EmptyOctopus";
+import { OctopusGlyph } from "../EmptyOctopus";
+import { ACCESSORIES, ANIMATIONS, EXPRESSIONS, OCTOPUS_COLORS } from "./octopusVisuals";
+
+// ─── Add tentacle form ───────────────────────────────────────────────────────
+
+export type OctopusAppearancePayload = {
+  animation: string;
+  expression: string;
+  accessory: string;
+  hairColor: string;
+};
+
+export type AddTentacleFormProps = {
+  onSubmit: (
+    name: string,
+    description: string,
+    color: string,
+    octopus: OctopusAppearancePayload,
+    suggestedSkills: string[],
+  ) => void;
+  onCancel: () => void;
+  isSubmitting: boolean;
+  error: string | null;
+  availableSkills: DeckAvailableSkill[];
+};
+
+export const EXPRESSION_OPTIONS: { value: OctopusExpression; label: string }[] = [
+  { value: "normal", label: "Normal" },
+  { value: "happy", label: "Happy" },
+  { value: "angry", label: "Angry" },
+  { value: "surprised", label: "Surprised" },
+];
+
+export const ACCESSORY_OPTIONS: { value: OctopusAccessory; label: string }[] = [
+  { value: "none", label: "None" },
+  { value: "long", label: "Long" },
+  { value: "mohawk", label: "Mohawk" },
+  { value: "side-sweep", label: "Side Sweep" },
+  { value: "curly", label: "Curly" },
+];
+
+export const HAIR_COLORS = [
+  "#4a2c0a",
+  "#1a1a1a",
+  "#c8a04a",
+  "#e04020",
+  "#f5f5f5",
+  "#6b3fa0",
+  "#2a6e3f",
+  "#1e90ff",
+];
+
+export const AddTentacleForm = ({
+  onSubmit,
+  onCancel,
+  isSubmitting,
+  error,
+  availableSkills,
+}: AddTentacleFormProps) => {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [selectedColor, setSelectedColor] = useState(
+    () => OCTOPUS_COLORS[Math.floor(Math.random() * OCTOPUS_COLORS.length)] as string,
+  );
+  const [selectedExpression, setSelectedExpression] = useState<OctopusExpression>(() => {
+    const pick = EXPRESSIONS[Math.floor(Math.random() * EXPRESSIONS.length)] as OctopusExpression;
+    return pick;
+  });
+  const [selectedAccessory, setSelectedAccessory] = useState<OctopusAccessory>(() => {
+    const pick = ACCESSORIES[Math.floor(Math.random() * ACCESSORIES.length)] as OctopusAccessory;
+    return pick;
+  });
+  const [selectedAnimation] = useState<OctopusAnimation>(() => {
+    const pick = ANIMATIONS[Math.floor(Math.random() * ANIMATIONS.length)] as OctopusAnimation;
+    return pick;
+  });
+  const [selectedHairColor, setSelectedHairColor] = useState(
+    () => HAIR_COLORS[Math.floor(Math.random() * HAIR_COLORS.length)] as string,
+  );
+  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    nameRef.current?.focus();
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (name.trim().length === 0) return;
+    onSubmit(
+      name.trim(),
+      description.trim(),
+      selectedColor,
+      {
+        animation: selectedAnimation,
+        expression: selectedExpression,
+        accessory: selectedAccessory,
+        hairColor: selectedHairColor,
+      },
+      selectedSkills,
+    );
+  };
+
+  const toggleSkill = (skillName: string) => {
+    setSelectedSkills((current) =>
+      current.includes(skillName)
+        ? current.filter((skill) => skill !== skillName)
+        : [...current, skillName].sort((a, b) => a.localeCompare(b)),
+    );
+  };
+
+  return (
+    <form className="deck-add-form" onSubmit={handleSubmit}>
+      <div className="deck-add-form-header">
+        <button type="button" className="deck-add-form-back" onClick={onCancel}>
+          ← Back
+        </button>
+        <span className="deck-add-form-title">New Tentacle</span>
+      </div>
+
+      <div className="deck-add-form-body">
+        <div className="deck-add-form-preview">
+          <OctopusGlyph
+            color={selectedColor}
+            animation={selectedAnimation}
+            expression={selectedExpression}
+            accessory={selectedAccessory}
+            hairColor={selectedHairColor}
+            scale={8}
+          />
+        </div>
+
+        <label className="deck-add-form-label">
+          Name
+          <input
+            ref={nameRef}
+            type="text"
+            className="deck-add-form-input"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="e.g. Database Layer"
+          />
+        </label>
+
+        <label className="deck-add-form-label">
+          Description
+          <textarea
+            className="deck-add-form-textarea"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="What this tentacle is responsible for..."
+            rows={3}
+          />
+        </label>
+
+        {availableSkills.length > 0 && (
+          <div className="deck-add-form-label">
+            Suggested Skills
+            <div className="deck-add-form-skills">
+              {availableSkills.map((skill) => {
+                const checked = selectedSkills.includes(skill.name);
+                return (
+                  <label
+                    key={`${skill.source}:${skill.name}`}
+                    className="deck-add-form-skill-option"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={checked}
+                      onChange={() => toggleSkill(skill.name)}
+                    />
+                    <span className="deck-add-form-skill-copy">
+                      <span className="deck-add-form-skill-name">{skill.name}</span>
+                      {skill.description && (
+                        <span className="deck-add-form-skill-desc">{skill.description}</span>
+                      )}
+                    </span>
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        <div className="deck-add-form-label">
+          Color
+          <div className="deck-add-form-colors">
+            {OCTOPUS_COLORS.map((c) => (
+              <button
+                key={c}
+                type="button"
+                className="deck-add-form-color-swatch"
+                data-selected={c === selectedColor ? "true" : "false"}
+                style={{ backgroundColor: c }}
+                onClick={() => setSelectedColor(c)}
+                aria-label={`Select color ${c}`}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="deck-add-form-row">
+          <div className="deck-add-form-label">
+            Expression
+            <div className="deck-add-form-chips">
+              {EXPRESSION_OPTIONS.map((opt) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  className="deck-add-form-chip"
+                  data-selected={opt.value === selectedExpression ? "true" : "false"}
+                  onClick={() => setSelectedExpression(opt.value)}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="deck-add-form-label">
+            Hair Style
+            <div className="deck-add-form-chips">
+              {ACCESSORY_OPTIONS.map((opt) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  className="deck-add-form-chip"
+                  data-selected={opt.value === selectedAccessory ? "true" : "false"}
+                  onClick={() => setSelectedAccessory(opt.value)}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="deck-add-form-label">
+            Hair Color
+            <div className="deck-add-form-colors">
+              {HAIR_COLORS.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  className="deck-add-form-color-swatch deck-add-form-color-swatch--small"
+                  data-selected={c === selectedHairColor ? "true" : "false"}
+                  style={{ backgroundColor: c }}
+                  onClick={() => setSelectedHairColor(c)}
+                  aria-label={`Select hair color ${c}`}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {error && <div className="deck-add-form-error">{error}</div>}
+
+        <button
+          type="submit"
+          className="deck-add-form-submit"
+          disabled={isSubmitting || name.trim().length === 0}
+        >
+          {isSubmitting ? "Creating..." : "Create Tentacle"}
+        </button>
+      </div>
+    </form>
+  );
+};

package/apps/octogent/apps/web/src/components/deck/DeckBottomActions.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+
+// ─── Bottom actions (compact cards + clear all for populated state) ──────────
+
+export type DeckBottomActionsProps = {
+  onClearAll: () => void;
+};
+
+export const DeckBottomActions = ({ onClearAll }: DeckBottomActionsProps) => {
+  const [confirmingClear, setConfirmingClear] = useState(false);
+
+  return (
+    <div className="deck-sidebar-clear">
+      {confirmingClear ? (
+        <div className="deck-bottom-clear-confirm">
+          <span className="deck-bottom-clear-label">Clear all tentacles?</span>
+          <button
+            type="button"
+            className="deck-bottom-clear-btn deck-bottom-clear-btn--danger"
+            onClick={() => {
+              onClearAll();
+              setConfirmingClear(false);
+            }}
+          >
+            Confirm
+          </button>
+          <button
+            type="button"
+            className="deck-bottom-clear-btn"
+            onClick={() => setConfirmingClear(false)}
+          >
+            Cancel
+          </button>
+        </div>
+      ) : (
+        <button
+          type="button"
+          className="deck-bottom-clear-link"
+          onClick={() => setConfirmingClear(true)}
+        >
+          <svg className="deck-bottom-clear-icon" viewBox="0 0 16 16" aria-hidden="true">
+            <path
+              d="M5.5 1.5h5M2 4h12M6 7v5M10 7v5M3.5 4l.75 9.5a1 1 0 001 .9h5.5a1 1 0 001-.9L12.5 4"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.3"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          Clear All
+        </button>
+      )}
+    </div>
+  );
+};