Please wait while the workspace is loading...
-
+ const codeElement = container.querySelector('code');
+ expect(codeElement?.textContent).toBe(content);
+ });
+
+ it('renders file path and language badge', () => {
+ mockUseWorkspaceFile.mockReturnValue({
+ data: 'const x = 1;',
+ isLoading: false,
+ error: null,
+ } as ReturnType);
+
+ render();
+
+ render([] } | null; isLoading: boolean } => ({
+ data: { items: [] },
+ isLoading: false,
+}));
+vi.mock('@/services/queries/use-sessions', () => ({
+ useSessionsPaginated: () => mockUseSessionsPaginated(),
+}));
+
+vi.mock('@/services/queries/use-version', () => ({
+ useVersion: () => ({ data: '1.0.0' }),
+}));
+
+vi.mock('@/components/session-status-dot', () => ({
+ SessionStatusDot: ({ phase }: { phase: string }) => (
+ {phase}
+ ),
+ sessionPhaseLabel: (phase: string) => phase || 'Unknown',
+}));
+
+vi.mock('date-fns', () => ({
+ formatDistanceToNow: () => '2 hours',
+}));
+
+function makeSessions(count: number) {
+ return Array.from({ length: count }, (_, i) => ({
+ metadata: {
+ name: `session-${i}`,
+ namespace: 'default',
+ uid: `uid-${i}`,
+ creationTimestamp: '2026-01-01T00:00:00Z',
+ },
+ spec: {
+ displayName: `Session ${i}`,
+ initialPrompt: 'test',
+ llmSettings: { model: 'test', temperature: 0, maxTokens: 100 },
+ timeout: 3600,
+ },
+ status: { phase: 'Running' as const },
+ })) as unknown as AgenticSession[];
+}
+
+describe('SessionsSidebar', () => {
+ const defaultProps = {
+ projectName: 'test-project',
+ currentSessionName: 'session-0',
+ collapsed: false,
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockUseSessionsPaginated.mockReturnValue({
+ data: { items: [] },
+ isLoading: false,
+ });
+ });
+
+ it('returns null when collapsed is true', () => {
+ const { container } = render(
+ > = {}) {
+ mockUseWorkflowSelection.mockReturnValue({
+ search: '',
+ setSearch: vi.fn(),
+ popoverOpen: false,
+ searchInputRef: { current: null },
+ filteredWorkflows: sampleWorkflows,
+ showGeneralChat: true,
+ showCustomWorkflow: true,
+ selectedLabel: 'No workflow',
+ isActivating: false,
+ handleSelect: vi.fn(),
+ handleOpenChange: vi.fn(),
+ ...overrides,
+ });
+}
+
+const defaultProps = {
+ sessionPhase: 'Running',
+ activeWorkflow: null,
+ selectedWorkflow: 'none',
+ workflowActivating: false,
+ ootbWorkflows: sampleWorkflows,
+ onWorkflowChange: vi.fn(),
+};
+
+describe('WorkflowSelector', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it('renders button with workflow label', () => {
+ setupMock({ selectedLabel: 'No workflow' });
+ render((null);
+ const [removingFile, setRemovingFile] = useState(null);
+ const [expandedRepos, setExpandedRepos] = useState>(new Set());
+
+ const handleRemoveRepo = async (repoName: string) => {
+ if (confirm(`Remove repository ${repoName}?`)) {
+ setRemovingRepo(repoName);
+ try {
+ await onRemoveRepository(repoName);
+ } finally {
+ setRemovingRepo(null);
+ }
+ }
+ };
+
+ const handleRemoveFile = async (fileName: string) => {
+ if (!onRemoveFile) return;
+ if (confirm(`Remove file ${fileName}?`)) {
+ setRemovingFile(fileName);
+ try {
+ await onRemoveFile(fileName);
+ } finally {
+ setRemovingFile(null);
+ }
+ }
+ };
+
+ return (
+
+ {/* Repositories section */}
+
+
+
+ Repositories
+
+ Git repositories cloned into this session.
+
+
+
+
+
+
+ {repositories.length === 0 ? (
+
+
+
+ No repositories added
+
+
+
+ ) : (
+
+ {repositories.map((repo, idx) => {
+ const repoName =
+ repo.name ||
+ repo.url.split("/").pop()?.replace(".git", "") ||
+ `repo-${idx}`;
+ const isRemoving = removingRepo === repoName;
+ const isExpanded = expandedRepos.has(repoName);
+ const currentBranch =
+ repo.currentActiveBranch || repo.branch;
+ const hasBranches =
+ repo.branches && repo.branches.length > 0;
+
+ const toggleExpanded = () => {
+ setExpandedRepos((prev) => {
+ const next = new Set(prev);
+ if (next.has(repoName)) {
+ next.delete(repoName);
+ } else {
+ next.add(repoName);
+ }
+ return next;
+ });
+ };
+
+ return (
+
+
+ {hasBranches ? (
+
+ ) : (
+
+ )}
+
+
+ ) : repo.status === "Removing" ? (
+
+
+ ) : repo.status === "Failed" ? (
+
+
+ ) : currentBranch ? (
+
+ {currentBranch}
+
+ ) : null}
+
+
+
+
+
+ {isExpanded && hasBranches && (
+
+
+ Available branches:
+
+ {repo.branches!.map((branch, branchIdx) => (
+
+
+ active
+
+ )}
+
+ ))}
+
+ )}
+
+ );
+ })}
+
+ )}
+
+
+
+ {/* Uploads section */}
+
+
+
+ Uploads
+
+ Files uploaded to the workspace.
+
+
+
+
+
+
+ {uploadedFiles.length === 0 ? (
+
+
+
+ No files uploaded
+
+
+
+ ) : (
+
+ {uploadedFiles.map((file) => {
+ const isRemoving = removingFile === file.name;
+ const fileSizeKB = file.size
+ ? (file.size / 1024).toFixed(1)
+ : null;
+
+ return (
+
+ ;
+ // Context tab props
+ repositories?: Repository[];
+ uploadedFiles?: UploadedFile[];
+ onAddRepository: () => void;
+ onRemoveRepository: (repoName: string) => void;
+ onRemoveFile?: (fileName: string) => void;
+};
+
+export function ExplorerPanel({
+ activeTab,
+ onTabChange,
+ onClose,
+ // Files tab
+ directoryOptions,
+ selectedDirectory,
+ onDirectoryChange,
+ files,
+ currentSubPath,
+ viewingFile,
+ isLoadingFile,
+ onFileOrFolderSelect,
+ onNavigateBack,
+ onRefresh,
+ onDownloadFile,
+ onUploadFile,
+ onFileOpen,
+ gitStatus,
+ repoBranches,
+ // Context tab
+ repositories,
+ uploadedFiles,
+ onAddRepository,
+ onRemoveRepository,
+ onRemoveFile,
+}: ExplorerPanelProps) {
+ return (
+
+ {/* Tab header */}
+
+
+
+
+
+
+
+
+ {/* Tab content */}
+
+ {activeTab === "files" ? (
+ ;
+};
+
+export function FilesTab({
+ directoryOptions,
+ selectedDirectory,
+ onDirectoryChange,
+ files,
+ currentSubPath,
+ viewingFile,
+ isLoadingFile,
+ onFileOrFolderSelect,
+ onNavigateBack,
+ onRefresh,
+ onDownloadFile,
+ onUploadFile,
+ onFileOpen,
+ gitStatus,
+ repoBranches,
+}: FilesTabProps) {
+ const fileNodes = useMemo(
+ () =>
+ files.map(
+ (item): FileTreeNode => ({
+ name: item.name,
+ path: item.path,
+ type: item.isDir ? "folder" : "file",
+ sizeKb: item.size ? item.size / 1024 : undefined,
+ }),
+ ),
+ [files],
+ );
+
+ const handleSelect = (node: FileTreeNode) => {
+ if (node.type === "file" && onFileOpen) {
+ const fullPath = currentSubPath
+ ? `${selectedDirectory.path}/${currentSubPath}/${node.path}`
+ : `${selectedDirectory.path}/${node.path}`;
+ onFileOpen(fullPath);
+ } else {
+ onFileOrFolderSelect(node);
+ }
+ };
+
+ return (
+
+ {/* Directory selector */}
+
+
+
+
+ {/* Action bar */}
+
+
+ {(currentSubPath || viewingFile) && (
+
+ )}
+
+ {selectedDirectory.path}
+ {currentSubPath && `/${currentSubPath}`}
+ {viewingFile && `/${viewingFile.path}`}
+
+
+
+
+ {viewingFile ? (
+
+ ) : (
+ <>
+
+
+
+ )}
+
+
+
+ {/* Git status badges */}
+ {gitStatus?.hasChanges && (
+
+ {gitStatus.totalAdded > 0 && (
+
+ +{gitStatus.totalAdded}
+
+ )}
+ {gitStatus.totalRemoved > 0 && (
+
+ -{gitStatus.totalRemoved}
+
+ )}
+
+ )}
+
+ {/* File tree */}
+
+ {isLoadingFile ? (
+
+
+ {viewingFile.content}
+
+
+ ) : files.length === 0 ? (
+
+ No files yet
+ Files will appear here
+
+ ) : (
+ = {
+ ts: "typescript",
+ tsx: "typescript",
+ js: "javascript",
+ jsx: "javascript",
+ py: "python",
+ go: "go",
+ rs: "rust",
+ rb: "ruby",
+ java: "java",
+ kt: "kotlin",
+ sql: "sql",
+ sh: "bash",
+ bash: "bash",
+ zsh: "bash",
+ yml: "yaml",
+ yaml: "yaml",
+ json: "json",
+ md: "markdown",
+ css: "css",
+ scss: "scss",
+ html: "html",
+ xml: "xml",
+ toml: "toml",
+ dockerfile: "dockerfile",
+ makefile: "makefile",
+ tf: "hcl",
+ proto: "protobuf",
+};
+
+function getLanguage(filePath: string): string {
+ const fileName = filePath.split("/").pop() ?? "";
+ const lowerName = fileName.toLowerCase();
+
+ // Handle special filenames
+ if (lowerName === "dockerfile") return "dockerfile";
+ if (lowerName === "makefile" || lowerName === "gnumakefile") return "makefile";
+
+ const ext = fileName.split(".").pop()?.toLowerCase() ?? "";
+ return EXTENSION_TO_LANGUAGE[ext] ?? "";
+}
+
+export function FileViewer({
+ projectName,
+ sessionName,
+ filePath,
+}: FileViewerProps) {
+ const codeRef = useRef(null);
+ const {
+ data: content,
+ isLoading,
+ error,
+ } = useWorkspaceFile(projectName, sessionName, filePath);
+
+ const { language, languageLabel } = useMemo(() => {
+ const lang = getLanguage(filePath);
+ const label = lang || (filePath.split(".").pop()?.toLowerCase() ?? "text");
+ return { language: lang, languageLabel: label };
+ }, [filePath]);
+
+ useEffect(() => {
+ if (codeRef.current && content !== undefined) {
+ // Reset previous highlighting
+ codeRef.current.removeAttribute("data-highlighted");
+ if (language) {
+ codeRef.current.className = `language-${language}`;
+ } else {
+ codeRef.current.className = "";
+ }
+ hljs.highlightElement(codeRef.current);
+ }
+ }, [content, language]);
+
+ const handleDownload = () => {
+ if (!content) return;
+ const fileName = filePath.split("/").pop() ?? "file";
+ triggerDownload(content, fileName, "text/plain");
+ };
+
+ if (isLoading) {
+ return (
+
+ Failed to load file
+
+ {error instanceof Error ? error.message : "Unknown error"}
+
+
+ );
+ }
+
+ const lines = content?.split("\n") ?? [];
+
+ return (
+
+ {/* File header */}
+
+
+
+ {filePath}
+
+
+ {languageLabel}
+
+
+
+
+
+ {/* Code content */}
+
+
+ {/* Line numbers */}
+
+ {lines.map((_, i) => (
+
+ {i + 1}
+
+ ))}
+
+
+ {/* Code */}
+
+
+ {content}
+
+
+
+
+
+ );
+}
diff --git a/components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/modals/add-context-modal.tsx b/components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/modals/add-context-modal.tsx
index 202b0289a..da4982cda 100644
--- a/components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/modals/add-context-modal.tsx
+++ b/components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/modals/add-context-modal.tsx
@@ -1,14 +1,12 @@
"use client";
import { useState } from "react";
-import { Loader2, Info, Upload } from "lucide-react";
+import { Loader2 } from "lucide-react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Separator } from "@/components/ui/separator";
import { InputWithHistory } from "@/components/input-with-history";
import { useInputHistory } from "@/hooks/use-input-history";
@@ -16,7 +14,6 @@ type AddContextModalProps = {
open: boolean;
onOpenChange: (open: boolean) => void;
onAddRepository: (url: string, branch: string, autoPush?: boolean) => Promise;
- onUploadFile?: () => void;
isLoading?: boolean;
autoBranch?: string; // Auto-generated branch from backend (single source of truth)
};
@@ -25,7 +22,6 @@ export function AddContextModal({
open,
onOpenChange,
onAddRepository,
- onUploadFile,
isLoading = false,
autoBranch,
}: AddContextModalProps) {
@@ -64,20 +60,13 @@ export function AddContextModal({