@gokulvenkatareddy/cortex 0.1.7

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

@@ -0,0 +1,334 @@
+import { useEffect, useRef, useState } from "react";
+
+import type { DeckAvailableSkill, DeckTentacleSummary } from "@octogent/core";
+import { OctopusGlyph } from "../EmptyOctopus";
+import type { OctopusVisuals } from "./octopusVisuals";
+
+// ─── Status styling ──────────────────────────────────────────────────────────
+
+export const STATUS_LABELS: Record<DeckTentacleSummary["status"], string> = {
+  idle: "idle",
+  active: "active",
+  blocked: "blocked",
+  "needs-review": "review",
+};
+
+// ─── TodoList ────────────────────────────────────────────────────────────────
+
+export const TodoList = ({
+  items,
+  tentacleId,
+  onToggle,
+}: {
+  items: { text: string; done: boolean }[];
+  tentacleId: string;
+  onToggle?: ((tentacleId: string, itemIndex: number, done: boolean) => void) | undefined;
+}) => {
+  let lastDoneIndex = -1;
+  for (let idx = items.length - 1; idx >= 0; idx--) {
+    if (items[idx]?.done) {
+      lastDoneIndex = idx;
+      break;
+    }
+  }
+  const scrollRef = useRef<HTMLLIElement | null>(null);
+
+  useEffect(() => {
+    scrollRef.current?.scrollIntoView({ block: "start" });
+  }, []);
+
+  return (
+    <ul className="deck-pod-todos">
+      {items.map((item, i) => (
+        <li
+          key={item.text}
+          ref={i === lastDoneIndex ? scrollRef : undefined}
+          className={`deck-pod-todo-item${item.done ? " deck-pod-todo-item--done" : ""}`}
+        >
+          <input
+            type="checkbox"
+            checked={item.done}
+            className="deck-pod-todo-checkbox"
+            onChange={() => onToggle?.(tentacleId, i, !item.done)}
+          />
+          <span className="deck-pod-todo-text">{item.text}</span>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+// ─── TentaclePod ─────────────────────────────────────────────────────────────
+
+export type TentaclePodProps = {
+  tentacle: DeckTentacleSummary;
+  visuals: OctopusVisuals;
+  isFocused: boolean;
+  activeFileName?: string | undefined;
+  onVaultFileClick?: (fileName: string) => void;
+  onVaultBrowse?: () => void;
+  onClose?: () => void;
+  onDelete?: () => void;
+  isDeleting?: boolean | undefined;
+  onTodoToggle?: (tentacleId: string, itemIndex: number, done: boolean) => void;
+  availableSkills: DeckAvailableSkill[];
+  isSavingSkills?: boolean | undefined;
+  onSaveSuggestedSkills?:
+    | ((tentacleId: string, suggestedSkills: string[]) => Promise<boolean>)
+    | undefined;
+};
+
+export const TentaclePod = ({
+  tentacle,
+  visuals,
+  isFocused,
+  activeFileName,
+  onVaultFileClick,
+  onVaultBrowse,
+  onClose,
+  onDelete,
+  isDeleting,
+  onTodoToggle,
+  availableSkills,
+  isSavingSkills,
+  onSaveSuggestedSkills,
+}: TentaclePodProps) => {
+  const progressPct =
+    tentacle.todoTotal > 0 ? Math.round((tentacle.todoDone / tentacle.todoTotal) * 100) : 0;
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
+  const [isEditingSkills, setIsEditingSkills] = useState(false);
+  const [draftSkills, setDraftSkills] = useState<string[]>(tentacle.suggestedSkills);
+
+  useEffect(() => {
+    setDraftSkills(tentacle.suggestedSkills);
+  }, [tentacle.suggestedSkills]);
+
+  const availableSkillNames = availableSkills.map((skill) => skill.name);
+  const skillNames = [...new Set([...availableSkillNames, ...draftSkills])].sort((a, b) =>
+    a.localeCompare(b),
+  );
+
+  const toggleSkill = (skillName: string) => {
+    setDraftSkills((current) =>
+      current.includes(skillName)
+        ? current.filter((skill) => skill !== skillName)
+        : [...current, skillName].sort((a, b) => a.localeCompare(b)),
+    );
+  };
+
+  const handleSaveSkills = async () => {
+    const saved = await onSaveSuggestedSkills?.(tentacle.tentacleId, draftSkills);
+    if (saved) {
+      setIsEditingSkills(false);
+    }
+  };
+
+  return (
+    <article
+      className={`deck-pod${isFocused ? " deck-pod--focused" : ""}`}
+      data-status={tentacle.status}
+      style={{ borderColor: "var(--accent-primary)" }}
+    >
+      <header className="deck-pod-header">
+        {isFocused && (
+          <button type="button" className="deck-pod-btn deck-pod-btn--secondary" onClick={onClose}>
+            ← Back
+          </button>
+        )}
+        <button type="button" className="deck-pod-btn">
+          Spawn
+        </button>
+        <button
+          type="button"
+          className="deck-pod-btn"
+          onClick={() => {
+            setDraftSkills(tentacle.suggestedSkills);
+            setIsEditingSkills((current) => !current);
+          }}
+        >
+          Skills
+        </button>
+        <button type="button" className="deck-pod-btn" onClick={() => onVaultBrowse?.()}>
+          Vault
+        </button>
+        {confirmingDelete ? (
+          <>
+            <button
+              type="button"
+              className="deck-pod-btn deck-pod-btn--danger"
+              disabled={isDeleting}
+              onClick={() => onDelete?.()}
+            >
+              {isDeleting ? "..." : "Confirm Delete"}
+            </button>
+            <button
+              type="button"
+              className="deck-pod-btn deck-pod-btn--secondary"
+              onClick={() => setConfirmingDelete(false)}
+            >
+              Cancel
+            </button>
+          </>
+        ) : (
+          <button
+            type="button"
+            className="deck-pod-btn deck-pod-btn--delete"
+            onClick={() => setConfirmingDelete(true)}
+            aria-label="Delete tentacle"
+          >
+            <svg className="deck-pod-btn-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>
+          </button>
+        )}
+      </header>
+
+      <div className="deck-pod-body">
+        <span className={`deck-pod-status deck-pod-status--${tentacle.status}`}>
+          {STATUS_LABELS[tentacle.status]}
+        </span>
+        <div className="deck-pod-identity">
+          <div className="deck-pod-octopus-col">
+            <div className="deck-pod-octopus">
+              <OctopusGlyph
+                color={visuals.color}
+                animation={visuals.animation}
+                expression={visuals.expression}
+                accessory={visuals.accessory}
+                {...(visuals.hairColor ? { hairColor: visuals.hairColor } : {})}
+                scale={5}
+              />
+            </div>
+          </div>
+          <div className="deck-pod-identity-text">
+            <span className="deck-pod-name">{tentacle.displayName}</span>
+            <span className="deck-pod-description">{tentacle.description}</span>
+          </div>
+        </div>
+
+        <div className="deck-pod-details">
+          {isEditingSkills && (
+            <div className="deck-pod-skills-editor">
+              {skillNames.length === 0 ? (
+                <span className="deck-pod-skills-empty">No Cortex skills found.</span>
+              ) : (
+                <div className="deck-pod-skills-options">
+                  {skillNames.map((skillName) => {
+                    const skill = availableSkills.find((entry) => entry.name === skillName);
+                    return (
+                      <label key={skillName} className="deck-pod-skill-option">
+                        <input
+                          type="checkbox"
+                          checked={draftSkills.includes(skillName)}
+                          onChange={() => toggleSkill(skillName)}
+                        />
+                        <span className="deck-pod-skill-copy">
+                          <span className="deck-pod-skill-name">{skillName}</span>
+                          {skill?.description && (
+                            <span className="deck-pod-skill-desc">{skill.description}</span>
+                          )}
+                          {!skill && (
+                            <span className="deck-pod-skill-desc">
+                              Stored on this tentacle, but not available right now.
+                            </span>
+                          )}
+                        </span>
+                      </label>
+                    );
+                  })}
+                </div>
+              )}
+              <div className="deck-pod-skills-actions">
+                <button
+                  type="button"
+                  className="deck-pod-btn deck-pod-btn--secondary"
+                  onClick={() => {
+                    setDraftSkills(tentacle.suggestedSkills);
+                    setIsEditingSkills(false);
+                  }}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  className="deck-pod-btn"
+                  disabled={Boolean(isSavingSkills)}
+                  onClick={() => void handleSaveSkills()}
+                >
+                  {isSavingSkills ? "Saving..." : "Save Skills"}
+                </button>
+              </div>
+            </div>
+          )}
+
+          {tentacle.todoTotal > 0 && (
+            <div className="deck-pod-progress">
+              <div className="deck-pod-progress-bar">
+                <div
+                  className="deck-pod-progress-fill"
+                  style={{ width: `${progressPct}%`, backgroundColor: visuals.color }}
+                />
+              </div>
+              <span
+                className="deck-pod-progress-label"
+                style={{ backgroundColor: `${visuals.color}22`, color: visuals.color }}
+              >
+                {tentacle.todoDone}/{tentacle.todoTotal} done
+              </span>
+            </div>
+          )}
+
+          {tentacle.todoItems.length > 0 && (
+            <TodoList
+              items={tentacle.todoItems}
+              tentacleId={tentacle.tentacleId}
+              onToggle={onTodoToggle}
+            />
+          )}
+
+          {tentacle.suggestedSkills.length > 0 && (
+            <div className="deck-pod-vault">
+              <span className="deck-pod-vault-label">skills</span>
+              <div className="deck-pod-vault-files">
+                {tentacle.suggestedSkills.map((skill) => (
+                  <span key={skill} className="deck-pod-vault-file">
+                    {skill}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {tentacle.vaultFiles.length > 0 && (
+            <div className="deck-pod-vault">
+              <span className="deck-pod-vault-label">vault</span>
+              <div className="deck-pod-vault-files">
+                {tentacle.vaultFiles.map((file) => (
+                  <button
+                    key={file}
+                    type="button"
+                    className="deck-pod-vault-file"
+                    aria-current={activeFileName === file ? "true" : undefined}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onVaultFileClick?.(file);
+                    }}
+                  >
+                    {file}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </article>
+  );
+};

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

@@ -0,0 +1,105 @@
+import type { WorkspaceSetupSnapshot, WorkspaceSetupStepId } from "@octogent/core";
+import { OctopusGlyph } from "../EmptyOctopus";
+
+type WorkspaceSetupCardProps = {
+  compact?: boolean;
+  workspaceSetup: WorkspaceSetupSnapshot | null;
+  isLoading: boolean;
+  error: string | null;
+  onRunStep: (stepId: WorkspaceSetupStepId) => void;
+  onLaunchClaudeCode: () => void;
+  isLaunchingAgent?: boolean;
+  isRunningStepId?: WorkspaceSetupStepId | null;
+};
+
+const buildStepSummary = (stepId: WorkspaceSetupStepId, description: string) => {
+  if (stepId === "create-tentacles") {
+    return "Launch Cortex so it can plan and create the first tentacles.";
+  }
+
+  return description;
+};
+
+export const WorkspaceSetupCard = ({
+  compact,
+  workspaceSetup,
+  isLoading,
+  error,
+  onRunStep,
+  onLaunchClaudeCode,
+  isLaunchingAgent,
+  isRunningStepId,
+}: WorkspaceSetupCardProps) => (
+  <section
+    className={`workspace-setup-card${compact ? " workspace-setup-card--compact" : ""}`}
+    aria-label="Workspace setup"
+  >
+    <header className="workspace-setup-card-header">
+      <div className="workspace-setup-card-glyph">
+        <OctopusGlyph
+          color="#d4a017"
+          animation={compact ? "idle" : "walk"}
+          expression="happy"
+          accessory="none"
+          scale={compact ? 4 : 7}
+        />
+      </div>
+      <div className="workspace-setup-card-copy">
+        <h2 className="workspace-setup-card-title">Workspace Setup</h2>
+        <p className="workspace-setup-card-desc">
+          Run each step explicitly. Cortex only marks it done after the workspace is checked
+          again.
+        </p>
+      </div>
+    </header>
+
+    {error ? <p className="workspace-setup-card-error">{error}</p> : null}
+
+    <div className="workspace-setup-step-list">
+      {(workspaceSetup?.steps ?? []).map((step) => {
+        const isCreateTentaclesStep = step.id === "create-tentacles";
+        const buttonLabel = isCreateTentaclesStep ? "Launch Cortex" : step.actionLabel;
+        const isButtonDisabled = isCreateTentaclesStep ? isLaunchingAgent : isLoading;
+        const isButtonRunning = isCreateTentaclesStep
+          ? isLaunchingAgent
+          : isRunningStepId === step.id;
+
+        return (
+          <article key={step.id} className="workspace-setup-step" data-complete={step.complete}>
+            <div className="workspace-setup-step-main">
+              <div className="workspace-setup-step-title-row">
+                <span className="workspace-setup-step-title">{step.title}</span>
+                <span className="workspace-setup-step-state">
+                  {step.complete ? "Done" : step.required ? "Required" : "Optional"}
+                </span>
+              </div>
+              <p className="workspace-setup-step-desc">
+                {buildStepSummary(step.id, step.description)}
+              </p>
+            </div>
+            {buttonLabel ? (
+              <button
+                type="button"
+                className="workspace-setup-step-action"
+                disabled={Boolean(isButtonDisabled)}
+                onClick={() => {
+                  if (isCreateTentaclesStep) {
+                    onLaunchClaudeCode();
+                    return;
+                  }
+
+                  onRunStep(step.id);
+                }}
+              >
+                {isButtonRunning ? "..." : buttonLabel}
+              </button>
+            ) : null}
+          </article>
+        );
+      })}
+      {isLoading && workspaceSetup === null ? (
+        <p className="workspace-setup-card-loading">Loading workspace setup…</p>
+      ) : null}
+    </div>
+  </section>
+);

package/apps/octogent/apps/web/src/components/deck/octopusVisuals.ts

@@ -0,0 +1,72 @@
+import type { DeckTentacleSummary } from "@octogent/core";
+import type { OctopusAccessory, OctopusAnimation, OctopusExpression } from "../EmptyOctopus";
+
+// ─── Octopus visual derivation (seeded from tentacle id) ────────────────────
+
+export const OCTOPUS_COLORS = [
+  "#ff6b2b",
+  "#ff2d6b",
+  "#00ffaa",
+  "#bf5fff",
+  "#00c8ff",
+  "#ffee00",
+  "#39ff14",
+  "#ff4df0",
+  "#00fff7",
+  "#ff9500",
+];
+
+export const ANIMATIONS: OctopusAnimation[] = ["sway", "walk", "jog", "bounce", "float", "swim-up"];
+export const EXPRESSIONS: OctopusExpression[] = ["normal", "happy", "angry", "surprised"];
+export const ACCESSORIES: OctopusAccessory[] = [
+  "none",
+  "none",
+  "long",
+  "mohawk",
+  "side-sweep",
+  "curly",
+];
+
+export 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);
+}
+
+export function seededRandom(seed: number): () => number {
+  let s = seed;
+  return () => {
+    s = (s * 16807 + 0) % 2147483647;
+    return (s - 1) / 2147483646;
+  };
+}
+
+export type OctopusVisuals = {
+  color: string;
+  animation: OctopusAnimation;
+  expression: OctopusExpression;
+  accessory: OctopusAccessory;
+  hairColor?: string | undefined;
+};
+
+export function deriveOctopusVisuals(tentacle: DeckTentacleSummary): OctopusVisuals {
+  const rng = seededRandom(hashString(tentacle.tentacleId));
+  const stored = tentacle.octopus;
+  return {
+    color:
+      tentacle.color ??
+      (OCTOPUS_COLORS[hashString(tentacle.tentacleId) % OCTOPUS_COLORS.length] as string),
+    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,
+  };
+}

package/apps/octogent/apps/web/src/components/terminalReplay.ts

@@ -0,0 +1,62 @@
+type ReplayViewport = Pick<HTMLElement, "clientHeight" | "scrollHeight" | "scrollTop">;
+
+type ReplayTerminal = {
+  reset: () => void;
+  write: (value: string, callback?: () => void) => void;
+  clearSelection?: () => void;
+  refresh?: (start: number, end: number) => void;
+  rows?: number;
+};
+
+const NEAR_BOTTOM_THRESHOLD_PX = 8;
+
+const restoreViewportScroll = (
+  viewport: ReplayViewport,
+  previousScrollTop: number,
+  wasNearBottom: boolean,
+) => {
+  if (wasNearBottom) {
+    viewport.scrollTop = viewport.scrollHeight;
+    return;
+  }
+
+  viewport.scrollTop = Math.max(
+    0,
+    Math.min(previousScrollTop, viewport.scrollHeight - viewport.clientHeight),
+  );
+};
+
+export const replayTerminalHistory = (
+  terminal: ReplayTerminal,
+  history: string,
+  viewport: ReplayViewport | null,
+) => {
+  const previousScrollTop = viewport?.scrollTop ?? 0;
+  const wasNearBottom =
+    viewport !== null
+      ? viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop <=
+        NEAR_BOTTOM_THRESHOLD_PX
+      : false;
+
+  terminal.clearSelection?.();
+  terminal.reset();
+  terminal.write(history, () => {
+    terminal.clearSelection?.();
+
+    if (
+      typeof terminal.refresh === "function" &&
+      typeof terminal.rows === "number" &&
+      terminal.rows > 0
+    ) {
+      terminal.refresh(0, terminal.rows - 1);
+    }
+
+    if (!viewport) {
+      return;
+    }
+
+    window.requestAnimationFrame(() => {
+      restoreViewportScroll(viewport, previousScrollTop, wasNearBottom);
+    });
+  });
+};

package/apps/octogent/apps/web/src/components/terminalWheel.ts

@@ -0,0 +1,54 @@
+const PIXELS_PER_LINE = 36;
+const PIXELS_PER_DOM_LINE = 16;
+const PIXELS_PER_DOM_PAGE = 160;
+
+type TerminalActiveBufferLike = {
+  baseY?: number;
+  type?: string;
+  viewportY?: number;
+};
+
+export const wheelDeltaToScrollLines = (deltaY: number, deltaMode: number): number => {
+  if (!Number.isFinite(deltaY) || deltaY === 0) {
+    return 0;
+  }
+
+  const absoluteDelta = Math.abs(deltaY);
+  let pixelDelta = absoluteDelta;
+  if (deltaMode === WheelEvent.DOM_DELTA_LINE) {
+    pixelDelta = absoluteDelta * PIXELS_PER_DOM_LINE;
+  } else if (deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+    pixelDelta = absoluteDelta * PIXELS_PER_DOM_PAGE;
+  }
+
+  const lines = Math.max(1, Math.round(pixelDelta / PIXELS_PER_LINE));
+  return deltaY > 0 ? lines : -lines;
+};
+
+export const shouldUseManualWheelScroll = (
+  activeBuffer: TerminalActiveBufferLike | null | undefined,
+): boolean => {
+  if (!activeBuffer) {
+    return false;
+  }
+
+  if (activeBuffer.type === "alternate") {
+    return false;
+  }
+
+  return (activeBuffer.baseY ?? 0) > 0;
+};
+
+export const readViewportY = (
+  activeBuffer: TerminalActiveBufferLike | null | undefined,
+): number | null => {
+  if (
+    !activeBuffer ||
+    typeof activeBuffer.viewportY !== "number" ||
+    !Number.isFinite(activeBuffer.viewportY)
+  ) {
+    return null;
+  }
+
+  return activeBuffer.viewportY;
+};

package/apps/octogent/apps/web/src/components/ui/ActionButton.tsx

@@ -0,0 +1,34 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+type ActionButtonVariant = "primary" | "accent" | "info" | "danger";
+type ActionButtonSize = "compact" | "dense";
+
+type ActionButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  children: ReactNode;
+  variant?: ActionButtonVariant;
+  size?: ActionButtonSize;
+};
+
+export const ActionButton = ({
+  children,
+  className,
+  variant = "accent",
+  size = "dense",
+  type = "button",
+  ...buttonProps
+}: ActionButtonProps) => {
+  const classes = [
+    "action-button",
+    `action-button--${variant}`,
+    `action-button--${size}`,
+    className,
+  ]
+    .filter((value) => Boolean(value))
+    .join(" ");
+
+  return (
+    <button className={classes} type={type} {...buttonProps}>
+      {children}
+    </button>
+  );
+};