@gokulvenkatareddy/cortex 0.1.7

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

@@ -0,0 +1,243 @@
+import { type ReactNode, useCallback, useEffect, useState } from "react";
+
+import { usePromptLibrary } from "../app/hooks/usePromptLibrary";
+import { SidebarPromptsList } from "./SidebarPromptsList";
+import { Terminal } from "./Terminal";
+import { ActionButton } from "./ui/ActionButton";
+import { MarkdownContent } from "./ui/MarkdownContent";
+
+type PromptsPrimaryViewProps = {
+  enabled: boolean;
+  onSidebarContent?: (content: ReactNode) => void;
+};
+
+type NewPromptMode = {
+  terminalId: string;
+} | null;
+
+export const PromptsPrimaryView = ({ enabled, onSidebarContent }: PromptsPrimaryViewProps) => {
+  const {
+    prompts,
+    selectedPromptName,
+    selectedPromptDetail: selectedPrompt,
+    isLoadingPrompts,
+    isLoadingDetail,
+    isEditing,
+    editDraft,
+    errorMessage,
+    refreshPrompts,
+    selectPrompt: selectPromptLibraryItem,
+    deletePrompt: deletePromptLibraryItem,
+    startEditing: onStartEditing,
+    cancelEditing: onCancelEditing,
+    setEditDraft: onSetEditDraft,
+    submitEdit: onSubmitEdit,
+  } = usePromptLibrary({ enabled });
+
+  const [promptEngineerTerminalId, setPromptEngineerTerminalId] = useState<string | null>(null);
+  const [newPromptRequestCount, setNewPromptRequestCount] = useState(0);
+  const [restoreTerminalCount, setRestoreTerminalCount] = useState(0);
+  const [closeTerminalCount, setCloseTerminalCount] = useState(0);
+
+  const onDelete = useCallback(() => {
+    if (selectedPromptName) {
+      return deletePromptLibraryItem(selectedPromptName);
+    }
+    return Promise.resolve(false);
+  }, [selectedPromptName, deletePromptLibraryItem]);
+
+  const onRefresh = refreshPrompts;
+  const onTerminalIdChange = setPromptEngineerTerminalId;
+
+  // Push sidebar content
+  const sidebarContent = (
+    <SidebarPromptsList
+      prompts={prompts}
+      selectedPromptName={selectedPromptName}
+      isLoadingPrompts={isLoadingPrompts}
+      onSelectPrompt={selectPromptLibraryItem}
+      onRefresh={() => {
+        void refreshPrompts();
+      }}
+      onNewPrompt={() => {
+        setNewPromptRequestCount((c) => c + 1);
+      }}
+      activeTerminalId={promptEngineerTerminalId}
+      onRestoreTerminal={() => {
+        setRestoreTerminalCount((c) => c + 1);
+      }}
+      onCloseTerminal={() => {
+        setCloseTerminalCount((c) => c + 1);
+      }}
+    />
+  );
+
+  useEffect(() => {
+    onSidebarContent?.(sidebarContent);
+    return () => onSidebarContent?.(null);
+  });
+  const [newPromptMode, setNewPromptMode] = useState<NewPromptMode>(null);
+  const [isCreatingTerminal, setIsCreatingTerminal] = useState(false);
+  const [showTerminal, setShowTerminal] = useState(false);
+
+  const handleNewPrompt = useCallback(async () => {
+    setIsCreatingTerminal(true);
+    try {
+      const res = await fetch("/api/terminals", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          workspaceMode: "shared",
+          agentProvider: "claude-code",
+          promptTemplate: "meta-prompt-generator",
+        }),
+      });
+      if (!res.ok) throw new Error("Failed to create terminal");
+      const data = (await res.json()) as { terminalId?: string; tentacleId?: string };
+      const agentId = (data.terminalId ?? data.tentacleId) as string;
+      setNewPromptMode({ terminalId: agentId });
+      setShowTerminal(true);
+      onTerminalIdChange(agentId);
+    } catch {
+      // Silently fail — the user can retry
+    } finally {
+      setIsCreatingTerminal(false);
+    }
+  }, [onTerminalIdChange]);
+
+  useEffect(() => {
+    if (newPromptRequestCount > 0) {
+      void handleNewPrompt();
+    }
+  }, [newPromptRequestCount, handleNewPrompt]);
+
+  // When a prompt is selected from the sidebar, switch away from terminal view
+  useEffect(() => {
+    if (selectedPrompt) {
+      setShowTerminal(false);
+    }
+  }, [selectedPrompt]);
+
+  // When the sidebar's minimized bar is clicked, restore terminal view
+  useEffect(() => {
+    if (restoreTerminalCount > 0) {
+      setShowTerminal(true);
+    }
+  }, [restoreTerminalCount]);
+
+  // When the sidebar's close button is clicked, destroy the terminal
+  useEffect(() => {
+    if (closeTerminalCount > 0) {
+      setNewPromptMode(null);
+      setShowTerminal(false);
+      onTerminalIdChange(null);
+      void onRefresh();
+    }
+  }, [closeTerminalCount, onRefresh, onTerminalIdChange]);
+
+  const handleBackToLibrary = useCallback(() => {
+    setNewPromptMode(null);
+    setShowTerminal(false);
+    onTerminalIdChange(null);
+    void onRefresh();
+  }, [onRefresh, onTerminalIdChange]);
+
+  const showPromptDetail = !showTerminal || !newPromptMode;
+
+  return (
+    <section className="prompts-view" aria-label="Prompts primary view">
+      {/* Terminal — kept mounted when active, hidden via CSS when viewing a prompt */}
+      {newPromptMode && (
+        <div
+          className="prompts-terminal"
+          key={newPromptMode.terminalId}
+          style={showTerminal ? undefined : { display: "none" }}
+        >
+          <header className="prompts-terminal-header">
+            <button type="button" className="prompts-terminal-back" onClick={handleBackToLibrary}>
+              ← Back
+            </button>
+            <span className="prompts-terminal-label">
+              <strong>Prompt Engineer</strong>
+            </span>
+          </header>
+          <Terminal
+            terminalId={newPromptMode.terminalId}
+            terminalLabel="Prompt Engineer"
+            hidePromptPicker
+          />
+        </div>
+      )}
+
+      {/* Prompt detail / empty state — shown when terminal is hidden or doesn't exist */}
+      {showPromptDetail && (
+        <>
+          {errorMessage ? <p className="prompts-error">{errorMessage}</p> : null}
+
+          {isLoadingDetail ? (
+            <p className="prompts-empty">Loading prompt...</p>
+          ) : selectedPrompt ? (
+            <div className="prompts-detail">
+              <header className="prompts-detail-header">
+                <div className="prompts-detail-header-left">
+                  <h3 className="prompts-detail-name">{selectedPrompt.name}</h3>
+                  <span className="prompts-detail-source-badge" data-source={selectedPrompt.source}>
+                    {selectedPrompt.source === "user" ? "User" : "Built-in"}
+                  </span>
+                </div>
+                {selectedPrompt.source === "user" && (
+                  <div className="prompts-detail-header-actions">
+                    {isEditing ? (
+                      <>
+                        <ActionButton
+                          onClick={() => {
+                            void onSubmitEdit();
+                          }}
+                        >
+                          Save
+                        </ActionButton>
+                        <ActionButton onClick={onCancelEditing}>Cancel</ActionButton>
+                      </>
+                    ) : (
+                      <>
+                        <ActionButton onClick={onStartEditing}>Edit</ActionButton>
+                        <ActionButton
+                          onClick={() => {
+                            void onDelete();
+                          }}
+                        >
+                          Delete
+                        </ActionButton>
+                      </>
+                    )}
+                  </div>
+                )}
+              </header>
+
+              {isEditing ? (
+                <textarea
+                  className="prompts-edit-area"
+                  value={editDraft}
+                  onChange={(e) => {
+                    onSetEditDraft(e.target.value);
+                  }}
+                  spellCheck={false}
+                />
+              ) : (
+                <div className="prompts-content">
+                  <MarkdownContent content={selectedPrompt.content} />
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="prompts-empty-state">
+              <p className="prompts-empty">
+                Select a prompt from the sidebar, or create a new one.
+              </p>
+            </div>
+          )}
+        </>
+      )}
+    </section>
+  );
+};

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

@@ -0,0 +1,273 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { GITHUB_SPARKLINE_HEIGHT, GITHUB_SPARKLINE_WIDTH } from "../app/constants";
+import type { UsageChartData } from "../app/hooks/useUsageHeatmapPolling";
+import type { ClaudeUsageSnapshot } from "../app/types";
+import { OctopusGlyph } from "./EmptyOctopus";
+
+type RuntimeStatusStripProps = {
+  sparklinePoints: string;
+  usageData: UsageChartData | null;
+  claudeUsage: ClaudeUsageSnapshot | null;
+  isRefreshingClaudeUsage?: boolean;
+  onRefreshClaudeUsage?: () => void;
+};
+
+const MINI_USAGE_WIDTH = 160;
+const MINI_USAGE_HEIGHT = 28;
+const MINI_BAR_GAP = 1;
+
+type MiniBar = { x: number; y: number; width: number; height: number };
+
+const buildUsageBars = (data: UsageChartData): MiniBar[] => {
+  const days = Array.isArray(data.days) ? data.days.slice(-30) : [];
+  if (days.length === 0) return [];
+
+  const totals = days.map((day) => (typeof day.totalTokens === "number" ? day.totalTokens : 0));
+  const max = Math.max(...totals, 1);
+  const barSlot = MINI_USAGE_WIDTH / days.length;
+  const barWidth = Math.max(1, barSlot - MINI_BAR_GAP);
+
+  return days.map((day, index) => {
+    const totalTokens = typeof day.totalTokens === "number" ? day.totalTokens : 0;
+    const h = Math.max(0.5, (totalTokens / max) * (MINI_USAGE_HEIGHT - 2));
+    return {
+      x: index * barSlot,
+      y: MINI_USAGE_HEIGHT - h,
+      width: barWidth,
+      height: h,
+    };
+  });
+};
+
+const pct = (value: number | null | undefined, loading?: boolean): string => {
+  if (loading) return "···";
+  return value == null ? "NA" : `${Math.round(value)}%`;
+};
+
+const usageState = (
+  claudeUsage: ClaudeUsageSnapshot | null,
+): {
+  label: string;
+  loading: boolean;
+  sessionPercent: number | null | undefined;
+  weekPercent: number | null | undefined;
+  message?: string;
+} => {
+  if (claudeUsage === null) {
+    return {
+      label: "Session",
+      loading: true,
+      sessionPercent: 0,
+      weekPercent: 0,
+    };
+  }
+
+  const label = claudeUsage.source === "oauth-api" ? "5h" : "Session";
+  if (claudeUsage.status === "ok") {
+    return {
+      label,
+      loading: false,
+      sessionPercent: claudeUsage.primaryUsedPercent,
+      weekPercent: claudeUsage.secondaryUsedPercent,
+    };
+  }
+
+  return {
+    label,
+    loading: false,
+    sessionPercent: null,
+    weekPercent: null,
+    message: claudeUsage.message ?? "Claude usage unavailable",
+  };
+};
+
+const UsageRail = ({
+  label,
+  percent,
+  loading,
+  title,
+}: {
+  label: string;
+  percent: number | null | undefined;
+  loading?: boolean;
+  title?: string;
+}) => {
+  const [tooltip, setTooltip] = useState<{ x: number; y: number } | null>(null);
+
+  const showTooltip = (clientX: number, clientY: number) => {
+    if (!title) return;
+    setTooltip({ x: clientX, y: clientY });
+  };
+
+  return (
+    <div
+      className="console-status-usage-row"
+      data-has-tooltip={title ? "true" : undefined}
+      tabIndex={title ? 0 : -1}
+      onMouseEnter={(event) => showTooltip(event.clientX, event.clientY)}
+      onMouseMove={(event) => showTooltip(event.clientX, event.clientY)}
+      onMouseLeave={() => setTooltip(null)}
+      onBlur={() => setTooltip(null)}
+      onFocus={(event) => {
+        if (!title) return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        setTooltip({ x: rect.left + 24, y: rect.bottom + 8 });
+      }}
+    >
+      <span className="console-status-usage-row-meta">
+        <span className="console-status-usage-row-label">{label}</span>
+        <span className="console-status-usage-row-value">{pct(percent, loading)}</span>
+      </span>
+      <span className="console-status-usage-rail">
+        <span
+          className="console-status-usage-rail-fill"
+          style={{ width: `${Math.min(100, percent ?? 0)}%` }}
+        />
+      </span>
+      {title && tooltip ? (
+        <span
+          className="console-status-usage-tooltip"
+          style={{
+            left: `${Math.max(8, tooltip.x - 260)}px`,
+            top: `${Math.min(window.innerHeight - 80, tooltip.y + 14)}px`,
+          }}
+        >
+          {title}
+        </span>
+      ) : null}
+    </div>
+  );
+};
+
+export const RuntimeStatusStrip = ({
+  sparklinePoints,
+  usageData,
+  claudeUsage,
+  isRefreshingClaudeUsage = false,
+  onRefreshClaudeUsage,
+}: RuntimeStatusStripProps) => {
+  const usageBars = useMemo(() => (usageData ? buildUsageBars(usageData) : []), [usageData]);
+  const claudeUsageState = usageState(claudeUsage);
+  const [showRefreshSpin, setShowRefreshSpin] = useState(false);
+  const refreshStartedAtRef = useRef<number | null>(null);
+  const refreshHideTimerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (refreshHideTimerRef.current !== null) {
+        window.clearTimeout(refreshHideTimerRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isRefreshingClaudeUsage) {
+      if (refreshHideTimerRef.current !== null) {
+        window.clearTimeout(refreshHideTimerRef.current);
+        refreshHideTimerRef.current = null;
+      }
+      refreshStartedAtRef.current = Date.now();
+      setShowRefreshSpin(true);
+      return;
+    }
+
+    if (refreshStartedAtRef.current === null) {
+      setShowRefreshSpin(false);
+      return;
+    }
+
+    const elapsedMs = Date.now() - refreshStartedAtRef.current;
+    const remainingMs = Math.max(0, 450 - elapsedMs);
+    refreshHideTimerRef.current = window.setTimeout(() => {
+      setShowRefreshSpin(false);
+      refreshStartedAtRef.current = null;
+      refreshHideTimerRef.current = null;
+    }, remainingMs);
+  }, [isRefreshingClaudeUsage]);
+
+  return (
+    <section className="console-status-strip" aria-label="Runtime status strip">
+      <div className="console-status-main">
+        <OctopusGlyph
+          className="console-status-octopus-icon"
+          animation="sway"
+          expression="normal"
+          scale={2}
+        />
+        <span className="console-status-brand">OCTOGENT</span>
+      </div>
+      <div className="console-status-charts">
+        <div className="console-status-sparkline" aria-label="Commits per day over last 30 days">
+          <div className="console-status-sparkline-chart">
+            <svg
+              viewBox={`0 0 ${GITHUB_SPARKLINE_WIDTH} ${GITHUB_SPARKLINE_HEIGHT}`}
+              role="presentation"
+            >
+              <polyline points={sparklinePoints} />
+            </svg>
+          </div>
+          <span className="console-status-sparkline-label">COMMITS/DAY · LAST 30 DAYS</span>
+        </div>
+        <div className="console-status-usage-mini" aria-label="Claude token usage last 30 days">
+          {usageBars.length > 0 ? (
+            <>
+              <div className="console-status-usage-mini-chart">
+                <svg viewBox={`0 0 ${MINI_USAGE_WIDTH} ${MINI_USAGE_HEIGHT}`} role="presentation">
+                  {usageBars.map((bar, index) => (
+                    <rect
+                      key={`${index}-${bar.x}-${bar.height}`}
+                      x={bar.x}
+                      y={bar.y}
+                      width={bar.width}
+                      height={bar.height}
+                      rx={0.5}
+                    />
+                  ))}
+                </svg>
+              </div>
+              <span className="console-status-sparkline-label">
+                CLAUDE TOKENS/DAY · LAST 30 DAYS
+              </span>
+            </>
+          ) : (
+            <span className="console-status-sparkline-label">CLAUDE USAGE —</span>
+          )}
+        </div>
+      </div>
+      <div className="console-status-claude-usage" aria-label="Claude usage limits">
+        {onRefreshClaudeUsage && (
+          <button
+            type="button"
+            className="console-status-claude-usage-refresh"
+            onClick={onRefreshClaudeUsage}
+            aria-label="Refresh Claude usage"
+            title="Refresh Claude usage"
+            data-refreshing={showRefreshSpin ? "true" : "false"}
+          >
+            ↻
+          </button>
+        )}
+        <span className="console-status-claude-usage-title">
+          CLAUDE
+          <br />
+          USAGE
+        </span>
+        <div className="console-status-claude-usage-bars">
+          <UsageRail
+            label={claudeUsageState.label}
+            percent={claudeUsageState.sessionPercent}
+            loading={claudeUsageState.loading}
+            {...(claudeUsageState.message ? { title: claudeUsageState.message } : {})}
+          />
+          <UsageRail
+            label="Week (all)"
+            percent={claudeUsageState.weekPercent}
+            loading={claudeUsageState.loading}
+            {...(claudeUsageState.message ? { title: claudeUsageState.message } : {})}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};

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

@@ -0,0 +1,92 @@
+import {
+  TERMINAL_COMPLETION_SOUND_OPTIONS,
+  type TerminalCompletionSoundId,
+} from "../app/notificationSounds";
+import { ActionButton } from "./ui/ActionButton";
+import { SettingsToggle } from "./ui/SettingsToggle";
+
+type SettingsPrimaryViewProps = {
+  terminalCompletionSound: TerminalCompletionSoundId;
+  isRuntimeStatusStripVisible: boolean;
+  isMonitorVisible: boolean;
+  onTerminalCompletionSoundChange: (soundId: TerminalCompletionSoundId) => void;
+  onPreviewTerminalCompletionSound: (soundId: TerminalCompletionSoundId) => void;
+  onRuntimeStatusStripVisibilityChange: (visible: boolean) => void;
+  onMonitorVisibilityChange: (visible: boolean) => void;
+};
+
+export const SettingsPrimaryView = ({
+  terminalCompletionSound,
+  isRuntimeStatusStripVisible,
+  isMonitorVisible,
+  onTerminalCompletionSoundChange,
+  onPreviewTerminalCompletionSound,
+  onRuntimeStatusStripVisibilityChange,
+  onMonitorVisibilityChange,
+}: SettingsPrimaryViewProps) => (
+  <section className="settings-view" aria-label="Settings primary view">
+    <section className="settings-panel" aria-label="Completion notification settings">
+      <header className="settings-panel-header">
+        <h2>Tentacle completion sound</h2>
+        <p>Play a notification when a tentacle moves from processing to idle.</p>
+      </header>
+
+      <div className="settings-sound-picker">
+        {TERMINAL_COMPLETION_SOUND_OPTIONS.map((option) => (
+          <button
+            aria-pressed={terminalCompletionSound === option.id}
+            className="settings-sound-option"
+            data-active={terminalCompletionSound === option.id ? "true" : "false"}
+            key={option.id}
+            onClick={() => {
+              onTerminalCompletionSoundChange(option.id);
+              onPreviewTerminalCompletionSound(option.id);
+            }}
+            type="button"
+          >
+            <span className="settings-sound-option-label">{option.label}</span>
+            <span className="settings-sound-option-description">{option.description}</span>
+          </button>
+        ))}
+      </div>
+
+      <div className="settings-panel-actions">
+        <ActionButton
+          aria-label="Preview selected completion sound"
+          className="settings-sound-preview"
+          onClick={() => {
+            onPreviewTerminalCompletionSound(terminalCompletionSound);
+          }}
+          size="dense"
+          variant="accent"
+        >
+          Preview
+        </ActionButton>
+        <span className="settings-saved-pill">Saved to workspace</span>
+      </div>
+    </section>
+    <section className="settings-panel" aria-label="Workspace surface visibility settings">
+      <header className="settings-panel-header">
+        <h2>Workspace surface visibility</h2>
+        <p>Enable or disable monitor surfaces in the main workspace shell.</p>
+      </header>
+
+      <div className="settings-toggle-grid">
+        <SettingsToggle
+          label="X Monitor"
+          description="Auto-fetch X feed and show monitor tab"
+          ariaLabel="Enable X Monitor"
+          checked={isMonitorVisible}
+          onChange={onMonitorVisibilityChange}
+        />
+        <SettingsToggle
+          label="Runtime status strip"
+          description="Top console status strip metrics"
+          ariaLabel="Show runtime status strip"
+          checked={isRuntimeStatusStripVisible}
+          onChange={onRuntimeStatusStripVisibilityChange}
+        />
+      </div>
+    </section>
+  </section>
+);