@gokulvenkatareddy/cortex 0.1.7

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

@@ -0,0 +1,124 @@
+import type { PendingDeleteTerminal } from "../app/hooks/useTerminalMutations";
+import type {
+  TentacleGitStatusSnapshot,
+  TentaclePullRequestSnapshot,
+  TerminalView,
+} from "../app/types";
+import { DeleteTentacleDialog } from "./DeleteTentacleDialog";
+import { TentacleGitActionsDialog } from "./TentacleGitActionsDialog";
+
+type SidebarActionPanelProps = {
+  pendingDeleteTerminal: PendingDeleteTerminal | null;
+  isDeletingTerminalId: string | null;
+  clearPendingDeleteTerminal: () => void;
+  confirmDeleteTerminal: () => Promise<void>;
+  openGitTentacleId: string | null;
+  columns: TerminalView;
+  openGitTentacleStatus: TentacleGitStatusSnapshot | null;
+  openGitTentaclePullRequest: TentaclePullRequestSnapshot | null;
+  gitCommitMessageDraft: string;
+  gitDialogError: string | null;
+  isGitDialogLoading: boolean;
+  isGitDialogMutating: boolean;
+  setGitCommitMessageDraft: (value: string) => void;
+  closeTentacleGitActions: () => void;
+  commitTentacleChanges: () => Promise<void>;
+  commitAndPushTentacleBranch: () => Promise<void>;
+  pushTentacleBranch: () => Promise<void>;
+  syncTentacleBranch: () => Promise<void>;
+  mergeTentaclePullRequest: () => Promise<void>;
+  requestDeleteTerminal: (
+    tentacleId: string,
+    tentacleName: string,
+    options: {
+      workspaceMode: "shared" | "worktree";
+      intent: "delete-terminal" | "cleanup-worktree";
+    },
+  ) => void;
+};
+
+export const SidebarActionPanel = ({
+  pendingDeleteTerminal,
+  isDeletingTerminalId,
+  clearPendingDeleteTerminal,
+  confirmDeleteTerminal,
+  openGitTentacleId,
+  columns,
+  openGitTentacleStatus,
+  openGitTentaclePullRequest,
+  gitCommitMessageDraft,
+  gitDialogError,
+  isGitDialogLoading,
+  isGitDialogMutating,
+  setGitCommitMessageDraft,
+  closeTentacleGitActions,
+  commitTentacleChanges,
+  commitAndPushTentacleBranch,
+  pushTentacleBranch,
+  syncTentacleBranch,
+  mergeTentaclePullRequest,
+  requestDeleteTerminal,
+}: SidebarActionPanelProps) => {
+  const openGitTentacleTerminal =
+    openGitTentacleId !== null
+      ? columns.find((terminal) => terminal.tentacleId === openGitTentacleId)
+      : null;
+
+  if (pendingDeleteTerminal) {
+    return (
+      <DeleteTentacleDialog
+        isDeletingTerminalId={isDeletingTerminalId}
+        onCancel={clearPendingDeleteTerminal}
+        onConfirmDelete={() => {
+          void confirmDeleteTerminal();
+        }}
+        pendingDeleteTerminal={pendingDeleteTerminal}
+      />
+    );
+  }
+
+  if (openGitTentacleTerminal && openGitTentacleTerminal.workspaceMode === "worktree") {
+    return (
+      <TentacleGitActionsDialog
+        errorMessage={gitDialogError}
+        gitCommitMessage={gitCommitMessageDraft}
+        gitPullRequest={openGitTentaclePullRequest}
+        gitStatus={openGitTentacleStatus}
+        isLoading={isGitDialogLoading}
+        isMutating={isGitDialogMutating}
+        onClose={closeTentacleGitActions}
+        onCommit={() => {
+          void commitTentacleChanges();
+        }}
+        onCommitAndPush={() => {
+          void commitAndPushTentacleBranch();
+        }}
+        onCommitMessageChange={setGitCommitMessageDraft}
+        onMergePullRequest={() => {
+          void mergeTentaclePullRequest();
+        }}
+        onPush={() => {
+          void pushTentacleBranch();
+        }}
+        onSync={() => {
+          void syncTentacleBranch();
+        }}
+        onCleanupWorktree={() => {
+          requestDeleteTerminal(
+            openGitTentacleTerminal.terminalId,
+            openGitTentacleTerminal.tentacleName ?? openGitTentacleTerminal.tentacleId,
+            {
+              workspaceMode: openGitTentacleTerminal.workspaceMode ?? "shared",
+              intent: "cleanup-worktree",
+            },
+          );
+          closeTentacleGitActions();
+        }}
+        tentacleId={openGitTentacleTerminal.tentacleId}
+        tentacleName={openGitTentacleTerminal.tentacleName ?? openGitTentacleTerminal.tentacleId}
+      />
+    );
+  }
+
+  return null;
+};

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

@@ -0,0 +1,279 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import type { ConversationSearchHit, ConversationSessionSummary } from "../app/types";
+
+const getSessionTitle = (session: ConversationSessionSummary): string => {
+  const preview = session.firstUserTurnPreview;
+  if (!preview) return session.sessionId;
+  const words = preview.split(/\s+/).slice(0, 8);
+  const title = words.join(" ");
+  return title.length < preview.length ? `${title}...` : title;
+};
+
+const getSessionSortTimestamp = (session: ConversationSessionSummary): number => {
+  const raw = session.lastEventAt ?? session.endedAt ?? session.startedAt;
+  if (!raw) return 0;
+  const parsed = Date.parse(raw);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
+type SidebarConversationsListProps = {
+  sessions: ConversationSessionSummary[];
+  selectedSessionId: string | null;
+  isLoadingSessions: boolean;
+  isSearching: boolean;
+  searchQuery: string;
+  searchHits: ConversationSearchHit[];
+  onSelectSession: (sessionId: string) => void;
+  onRefresh: () => void;
+  onClearAll: () => void;
+  onSearch: (query: string) => void;
+  onClearSearch: () => void;
+  onNavigateToHit: (hit: ConversationSearchHit) => void;
+};
+
+export const SidebarConversationsList = ({
+  sessions,
+  selectedSessionId,
+  isLoadingSessions,
+  isSearching,
+  searchQuery,
+  searchHits,
+  onSelectSession,
+  onRefresh,
+  onClearAll,
+  onSearch,
+  onClearSearch,
+  onNavigateToHit,
+}: SidebarConversationsListProps) => {
+  const [inputValue, setInputValue] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const onSearchRef = useRef(onSearch);
+  const onClearSearchRef = useRef(onClearSearch);
+  onSearchRef.current = onSearch;
+  onClearSearchRef.current = onClearSearch;
+
+  const sortedSessions = useMemo(
+    () => [...sessions].sort((a, b) => getSessionSortTimestamp(b) - getSessionSortTimestamp(a)),
+    [sessions],
+  );
+
+  // Live search: debounce input changes and trigger search after 2+ chars
+  useEffect(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    const trimmed = inputValue.trim();
+    if (trimmed.length === 0) {
+      onClearSearchRef.current();
+      return;
+    }
+
+    if (trimmed.length >= 2) {
+      debounceRef.current = setTimeout(() => {
+        onSearchRef.current(trimmed);
+      }, 280);
+    }
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [inputValue]);
+
+  const handleSearchSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      const trimmed = inputValue.trim();
+      if (trimmed.length > 0) {
+        if (debounceRef.current) {
+          clearTimeout(debounceRef.current);
+        }
+        onSearch(trimmed);
+      }
+    },
+    [inputValue, onSearch],
+  );
+
+  const handleClearSearch = useCallback(() => {
+    setInputValue("");
+    onClearSearch();
+    inputRef.current?.focus();
+  }, [onClearSearch]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        handleClearSearch();
+      }
+    },
+    [handleClearSearch],
+  );
+
+  const isShowingResults = searchQuery.length > 0;
+
+  return (
+    <section className="active-agents-section" aria-label="Sidebar section Conversations">
+      <div className="sidebar-conversations-toolbar">
+        <button
+          aria-label="Refresh conversations"
+          className="sidebar-conversations-icon-btn"
+          disabled={isLoadingSessions}
+          onClick={onRefresh}
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.6"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M2.5 8a5.5 5.5 0 0 1 9.3-3.95L13.5 5.5" />
+            <path d="M13.5 2.5v3h-3" />
+            <path d="M13.5 8a5.5 5.5 0 0 1-9.3 3.95L2.5 10.5" />
+            <path d="M2.5 13.5v-3h3" />
+          </svg>
+        </button>
+        <button
+          aria-label="Clear all conversations"
+          className="sidebar-conversations-icon-btn sidebar-conversations-icon-btn--danger"
+          disabled={sessions.length === 0}
+          onClick={onClearAll}
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.6"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M3 4h10" />
+            <path d="M6 4V3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1" />
+            <path d="M4.5 4l.5 9a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1l.5-9" />
+            <path d="M6.5 7v4" />
+            <path d="M9.5 7v4" />
+          </svg>
+        </button>
+      </div>
+
+      <form className="sidebar-conversations-search" onSubmit={handleSearchSubmit}>
+        <div className="sidebar-conversations-search-input-wrap">
+          <svg
+            aria-hidden="true"
+            className="sidebar-conversations-search-icon"
+            focusable="false"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.6"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <circle cx="7" cy="7" r="4.5" />
+            <path d="M10.5 10.5L14 14" />
+          </svg>
+          <input
+            ref={inputRef}
+            type="text"
+            className="sidebar-conversations-search-input"
+            placeholder="Search conversations..."
+            value={inputValue}
+            onChange={(e) => {
+              setInputValue(e.target.value);
+            }}
+            onKeyDown={handleKeyDown}
+            aria-label="Search conversations"
+          />
+          {(inputValue.length > 0 || isShowingResults) && (
+            <button
+              type="button"
+              className="sidebar-conversations-search-clear"
+              onClick={handleClearSearch}
+              aria-label="Clear search"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M4 4l8 8" />
+                <path d="M12 4l-8 8" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </form>
+
+      <div className="active-agents-section-panel">
+        {isSearching ? (
+          <p className="active-agents-status">Searching...</p>
+        ) : isShowingResults ? (
+          searchHits.length === 0 ? (
+            <p className="active-agents-status">No results for "{searchQuery}"</p>
+          ) : (
+            <div className="sidebar-search-results">
+              <p className="sidebar-search-results-count">
+                {searchHits.length} result{searchHits.length !== 1 ? "s" : ""}
+              </p>
+              <ol className="sidebar-conversations-list">
+                {searchHits.map((hit) => (
+                  <li key={`${hit.sessionId}-${hit.turnId}`}>
+                    <button
+                      className="sidebar-conversation-item sidebar-search-hit"
+                      onClick={() => {
+                        onNavigateToHit(hit);
+                      }}
+                      type="button"
+                    >
+                      <span className="sidebar-search-hit-session">{hit.sessionId}</span>
+                      <span className="sidebar-search-hit-role">{hit.role}</span>
+                      <span className="sidebar-search-hit-snippet">{hit.snippet}</span>
+                    </button>
+                  </li>
+                ))}
+              </ol>
+            </div>
+          )
+        ) : sessions.length === 0 ? (
+          <p className="active-agents-status">No conversations yet.</p>
+        ) : (
+          <ol className="sidebar-conversations-list">
+            {sortedSessions.map((session) => (
+              <li key={session.sessionId}>
+                <button
+                  aria-current={session.sessionId === selectedSessionId ? "page" : undefined}
+                  className="sidebar-conversation-item"
+                  data-active={session.sessionId === selectedSessionId ? "true" : "false"}
+                  onClick={() => {
+                    onSelectSession(session.sessionId);
+                  }}
+                  type="button"
+                >
+                  <strong>{getSessionTitle(session)}</strong>
+                  <span>{`Tentacle ${session.tentacleId ?? "--"}`}</span>
+                  <span>{`${session.turnCount} turns`}</span>
+                </button>
+              </li>
+            ))}
+          </ol>
+        )}
+      </div>
+    </section>
+  );
+};

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

@@ -0,0 +1,116 @@
+import { useMemo } from "react";
+
+import type { PromptLibraryEntry } from "../app/types";
+
+type SidebarPromptsListProps = {
+  prompts: PromptLibraryEntry[];
+  selectedPromptName: string | null;
+  isLoadingPrompts: boolean;
+  onSelectPrompt: (name: string) => void;
+  onRefresh: () => void;
+  onNewPrompt: () => void;
+  activeTerminalId: string | null;
+  onRestoreTerminal: () => void;
+  onCloseTerminal: () => void;
+};
+
+export const SidebarPromptsList = ({
+  prompts,
+  selectedPromptName,
+  isLoadingPrompts,
+  onSelectPrompt,
+  onRefresh,
+  onNewPrompt,
+  activeTerminalId,
+  onRestoreTerminal,
+  onCloseTerminal,
+}: SidebarPromptsListProps) => {
+  const userPrompts = useMemo(() => prompts.filter((p) => p.source === "user"), [prompts]);
+  const builtinPrompts = useMemo(() => prompts.filter((p) => p.source === "builtin"), [prompts]);
+
+  return (
+    <div className="sidebar-prompts">
+      <div className="sidebar-prompts-toolbar">
+        <button type="button" className="sidebar-prompts-new-btn" onClick={onNewPrompt}>
+          + New Prompt
+        </button>
+        <button
+          type="button"
+          className="sidebar-prompts-refresh-btn"
+          onClick={onRefresh}
+          disabled={isLoadingPrompts}
+          aria-label="Refresh prompts"
+        >
+          ↻
+        </button>
+      </div>
+
+      {isLoadingPrompts && prompts.length === 0 ? (
+        <p className="sidebar-prompts-empty">Loading...</p>
+      ) : prompts.length === 0 ? (
+        <p className="sidebar-prompts-empty">No prompts yet</p>
+      ) : (
+        <div className="sidebar-prompts-list">
+          {userPrompts.length > 0 && (
+            <div className="sidebar-prompts-group">
+              <h4 className="sidebar-prompts-group-label">My Prompts</h4>
+              {userPrompts.map((p) => (
+                <button
+                  key={p.name}
+                  type="button"
+                  className="sidebar-prompts-item"
+                  data-active={selectedPromptName === p.name ? "true" : undefined}
+                  onClick={() => {
+                    onSelectPrompt(p.name);
+                  }}
+                >
+                  {p.name}.md
+                </button>
+              ))}
+            </div>
+          )}
+
+          {builtinPrompts.length > 0 && (
+            <div className="sidebar-prompts-group">
+              <h4 className="sidebar-prompts-group-label">Built-in</h4>
+              {builtinPrompts.map((p) => (
+                <button
+                  key={p.name}
+                  type="button"
+                  className="sidebar-prompts-item"
+                  data-active={selectedPromptName === p.name ? "true" : undefined}
+                  onClick={() => {
+                    onSelectPrompt(p.name);
+                  }}
+                >
+                  {p.name}.md
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {activeTerminalId && (
+        <div className="sidebar-prompts-minimized-terminal">
+          <button
+            type="button"
+            className="sidebar-prompts-minimized-terminal-restore"
+            onClick={onRestoreTerminal}
+          >
+            <span className="sidebar-prompts-minimized-terminal-icon">{">_"}</span>
+            <span className="sidebar-prompts-minimized-terminal-label">Prompt Engineer</span>
+          </button>
+          <button
+            type="button"
+            className="sidebar-prompts-minimized-terminal-close"
+            onClick={onCloseTerminal}
+            aria-label="Close terminal"
+          >
+            ✕
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,106 @@
+import { useMemo } from "react";
+
+import type { MonitorFeedSnapshot } from "../app/types";
+
+type TelemetryTapeProps = {
+  monitorFeed: MonitorFeedSnapshot | null;
+};
+
+type TelemetryItem = {
+  key: string;
+  sourceIcon: string;
+  authorLabel: string;
+  snippet: string;
+  fullText: string;
+  likesLabel: string;
+  permalink: string | null;
+};
+
+const MAX_SNIPPET_LENGTH = 54;
+
+const normalizePostSnippet = (value: string): string => value.replace(/\s+/g, " ").trim();
+
+const truncateSnippet = (value: string): string => {
+  if (value.length <= MAX_SNIPPET_LENGTH) {
+    return value;
+  }
+
+  return `${value.slice(0, MAX_SNIPPET_LENGTH - 1).trimEnd()}…`;
+};
+
+const buildTelemetryItems = (monitorFeed: MonitorFeedSnapshot | null): TelemetryItem[] => {
+  const posts = monitorFeed?.posts ?? [];
+  if (posts.length === 0) {
+    return [
+      {
+        key: "monitor-waiting",
+        sourceIcon: "𝕏",
+        authorLabel: "@monitor",
+        snippet: "Waiting for X resources...",
+        fullText: "Waiting for X resources...",
+        likesLabel: "♥ --",
+        permalink: null,
+      },
+    ];
+  }
+
+  return posts.map((post) => {
+    const normalizedSnippet = normalizePostSnippet(post.text);
+    return {
+      key: `${post.source}:${post.id}`,
+      sourceIcon: "𝕏",
+      authorLabel: `@${post.author}`,
+      snippet: truncateSnippet(normalizedSnippet),
+      fullText: normalizedSnippet,
+      likesLabel: `♥ ${Math.round(post.likeCount).toLocaleString("en-US")}`,
+      permalink: post.permalink,
+    };
+  });
+};
+
+export const TelemetryTape = ({ monitorFeed }: TelemetryTapeProps) => {
+  const telemetryItems = useMemo(() => buildTelemetryItems(monitorFeed), [monitorFeed]);
+  const scrollDurationSeconds = Math.max(72, telemetryItems.length * 9);
+
+  return (
+    <section className="console-telemetry-tape" aria-label="Telemetry ticker tape">
+      <div
+        className="console-telemetry-track"
+        style={{ animationDuration: `${scrollDurationSeconds}s` }}
+      >
+        {[...telemetryItems, ...telemetryItems].map((item, index) =>
+          item.permalink ? (
+            <a
+              className="console-telemetry-item"
+              href={item.permalink}
+              key={`${item.key}-${index}`}
+              rel="noreferrer"
+              target="_blank"
+              title={item.fullText}
+            >
+              <span aria-hidden="true" className="console-telemetry-source">
+                {item.sourceIcon}
+              </span>
+              <strong>{item.authorLabel}</strong>
+              <span className="console-telemetry-snippet">{item.snippet}</span>
+              <span className="console-telemetry-likes">{item.likesLabel}</span>
+            </a>
+          ) : (
+            <span
+              className="console-telemetry-item"
+              key={`${item.key}-${index}`}
+              title={item.fullText}
+            >
+              <span aria-hidden="true" className="console-telemetry-source">
+                {item.sourceIcon}
+              </span>
+              <strong>{item.authorLabel}</strong>
+              <span className="console-telemetry-snippet">{item.snippet}</span>
+              <span className="console-telemetry-likes">{item.likesLabel}</span>
+            </span>
+          ),
+        )}
+      </div>
+    </section>
+  );
+};