-
-
{info.icon}
+ {/* Event Header */}
+
setExpandedEvent(isExpanded ? null : index)}
+ >
+
+
+ {info.icon}
+
+
+
{info.name}
+
{info.description}
+
-
-
{info.name}
-
{info.description}
-
-
-
- {/* Platform badges */}
-
- {eventConfig.platforms.map((platform) => (
-
- {PLATFORM_INFO[platform].name}
-
- ))}
- {eventConfig.platforms.length === 0 && (
-
- {formatMessage({ id: 'settings.remoteNotifications.noPlatforms' })}
-
- )}
-
- {/* Toggle */}
-
updateEventConfig(index, { enabled: !eventConfig.enabled })}
- >
- {eventConfig.enabled ? (
-
+ {/* Platform badges */}
+
+ {eventConfig.platforms.slice(0, 3).map((platform) => (
+
+ {PLATFORM_INFO[platform].name}
+
+ ))}
+ {eventConfig.platforms.length > 3 && (
+
+ +{eventConfig.platforms.length - 3}
+
+ )}
+ {eventConfig.platforms.length === 0 && (
+
+ {formatMessage({ id: 'settings.remoteNotifications.noPlatforms' })}
+
+ )}
+
+ {/* Toggle */}
+
{
+ e.stopPropagation();
+ updateEventConfig(index, { enabled: !eventConfig.enabled });
+ }}
+ >
+ {eventConfig.enabled ? (
+
+ {/* Expand icon */}
+ {isExpanded ? (
+
) : (
-
+
)}
-
+
+
+ {/* Expanded Content - Platform Selection */}
+ {isExpanded && (
+
+
+ {formatMessage({ id: 'settings.remoteNotifications.selectPlatforms' })}
+
+
+ {allPlatforms.map((platform) => {
+ const isSelected = eventConfig.platforms.includes(platform);
+ const platformInfo = PLATFORM_INFO[platform];
+ const platformConfig = config.platforms[platform];
+ const isConfigured = platformConfig?.enabled;
+ return (
+
toggleEventPlatform(index, platform)}
+ >
+ {isSelected &&
+ );
+ })}
+
+
+ )}
);
})}
diff --git a/ccw/frontend/src/components/terminal-dashboard/ArtifactTag.tsx b/ccw/frontend/src/components/terminal-dashboard/ArtifactTag.tsx
new file mode 100644
index 00000000..c43e6dd1
--- /dev/null
+++ b/ccw/frontend/src/components/terminal-dashboard/ArtifactTag.tsx
@@ -0,0 +1,78 @@
+// ========================================
+// ArtifactTag Component
+// ========================================
+// Colored, clickable tag for detected CCW artifacts in terminal output.
+
+import { useIntl } from 'react-intl';
+import { cn } from '@/lib/utils';
+import { badgeVariants } from '@/components/ui/Badge';
+import type { ArtifactType } from '@/lib/ccw-artifacts';
+
+export interface ArtifactTagProps {
+ type: ArtifactType;
+ path: string;
+ onClick?: (path: string) => void;
+ className?: string;
+}
+
+function getVariant(type: ArtifactType) {
+ switch (type) {
+ case 'workflow-session':
+ return 'info';
+ case 'lite-session':
+ return 'success';
+ case 'claude-md':
+ return 'review';
+ case 'ccw-config':
+ return 'warning';
+ case 'issue':
+ return 'destructive';
+ default:
+ return 'secondary';
+ }
+}
+
+function getLabelId(type: ArtifactType): string {
+ switch (type) {
+ case 'workflow-session':
+ return 'terminalDashboard.artifacts.types.workflowSession';
+ case 'lite-session':
+ return 'terminalDashboard.artifacts.types.liteSession';
+ case 'claude-md':
+ return 'terminalDashboard.artifacts.types.claudeMd';
+ case 'ccw-config':
+ return 'terminalDashboard.artifacts.types.ccwConfig';
+ case 'issue':
+ return 'terminalDashboard.artifacts.types.issue';
+ }
+}
+
+function basename(p: string): string {
+ const parts = p.split(/[\\/]/g);
+ return parts[parts.length - 1] || p;
+}
+
+export function ArtifactTag({ type, path, onClick, className }: ArtifactTagProps) {
+ const { formatMessage } = useIntl();
+ const label = formatMessage({ id: getLabelId(type) });
+ const display = basename(path);
+
+ return (
+
onClick?.(path)}
+ title={path}
+ >
+ {label}
+ {display}
+
+ );
+}
+
+export default ArtifactTag;
diff --git a/ccw/frontend/src/components/terminal-dashboard/FloatingFileBrowser.tsx b/ccw/frontend/src/components/terminal-dashboard/FloatingFileBrowser.tsx
new file mode 100644
index 00000000..58158ff1
--- /dev/null
+++ b/ccw/frontend/src/components/terminal-dashboard/FloatingFileBrowser.tsx
@@ -0,0 +1,191 @@
+// ========================================
+// FloatingFileBrowser Component
+// ========================================
+// Floating file browser panel for Terminal Dashboard.
+
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { Copy, ArrowRightToLine, Loader2, RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { FloatingPanel } from './FloatingPanel';
+import { Button } from '@/components/ui/Button';
+import { TreeView } from '@/components/shared/TreeView';
+import { FilePreview } from '@/components/shared/FilePreview';
+import { useFileExplorer, useFileContent } from '@/hooks/useFileExplorer';
+import type { FileSystemNode } from '@/types/file-explorer';
+
+export interface FloatingFileBrowserProps {
+ isOpen: boolean;
+ onClose: () => void;
+ rootPath: string;
+ onInsertPath?: (path: string) => void;
+ initialSelectedPath?: string | null;
+}
+
+export function FloatingFileBrowser({
+ isOpen,
+ onClose,
+ rootPath,
+ onInsertPath,
+ initialSelectedPath = null,
+}: FloatingFileBrowserProps) {
+ const { formatMessage } = useIntl();
+
+ const {
+ state,
+ rootNodes,
+ isLoading,
+ isFetching,
+ error,
+ refetch,
+ setSelectedFile,
+ toggleExpanded,
+ } = useFileExplorer({
+ rootPath,
+ maxDepth: 6,
+ enabled: isOpen,
+ });
+
+ const selectedPath = state.selectedFile;
+ const { content, isLoading: isContentLoading, error: contentError } = useFileContent(selectedPath, {
+ enabled: isOpen && !!selectedPath,
+ });
+
+ const [copied, setCopied] = React.useState(false);
+
+ React.useEffect(() => {
+ if (!isOpen) return;
+ if (initialSelectedPath) {
+ setSelectedFile(initialSelectedPath);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isOpen, initialSelectedPath]);
+
+ const handleNodeClick = (node: FileSystemNode) => {
+ if (node.type === 'file') {
+ setSelectedFile(node.path);
+ }
+ };
+
+ const handleCopyPath = async () => {
+ if (!selectedPath) return;
+ try {
+ await navigator.clipboard.writeText(selectedPath);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 1200);
+ } catch (err) {
+ console.error('[FloatingFileBrowser] copy path failed:', err);
+ }
+ };
+
+ const handleInsert = () => {
+ if (!selectedPath) return;
+ onInsertPath?.(selectedPath);
+ };
+
+ return (
+
+
+ {/* Toolbar */}
+
+
+
+ {selectedPath
+ ? formatMessage({ id: 'terminalDashboard.fileBrowser.selected' })
+ : formatMessage({ id: 'terminalDashboard.fileBrowser.noSelection' })}
+
+
+ {selectedPath ?? rootPath}
+
+
+
+
void refetch()}
+ disabled={!isOpen || isFetching}
+ title={formatMessage({ id: 'common.actions.refresh' })}
+ >
+
+
+
+
+
+
+
+
+
+
+ {/* Body */}
+
+ {/* Tree */}
+
+ {isLoading ? (
+
+
+ {formatMessage({ id: 'terminalDashboard.fileBrowser.loading' })}
+
+
+ ) : error ? (
+
+ {formatMessage({ id: 'terminalDashboard.fileBrowser.loadFailed' })}
+
+ ) : (
+
+ )}
+
+
+ {/* Preview */}
+
+
+
+
+ );
+}
+
+export default FloatingFileBrowser;
diff --git a/ccw/frontend/src/components/terminal-dashboard/TerminalInstance.tsx b/ccw/frontend/src/components/terminal-dashboard/TerminalInstance.tsx
index 11d1cc85..7f1c4bc5 100644
--- a/ccw/frontend/src/components/terminal-dashboard/TerminalInstance.tsx
+++ b/ccw/frontend/src/components/terminal-dashboard/TerminalInstance.tsx
@@ -6,7 +6,7 @@
// XTerm instance in ref, FitAddon, ResizeObserver, batched PTY input (30ms),
// output chunk streaming from cliSessionStore.
-import { useEffect, useRef, useCallback } from 'react';
+import { useEffect, useRef, useCallback, useState } from 'react';
import { Terminal as XTerm } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { useCliSessionStore } from '@/stores/cliSessionStore';
@@ -18,6 +18,8 @@ import {
resizeCliSession,
} from '@/lib/api';
import { cn } from '@/lib/utils';
+import { detectCcArtifacts, type CcArtifact } from '@/lib/ccw-artifacts';
+import { ArtifactTag } from './ArtifactTag';
// ========== Types ==========
@@ -26,11 +28,54 @@ interface TerminalInstanceProps {
sessionId: string;
/** Additional CSS classes */
className?: string;
+ /** Optional callback to reveal a detected artifact path (e.g. open file browser) */
+ onRevealPath?: (path: string) => void;
}
// ========== Component ==========
-export function TerminalInstance({ sessionId, className }: TerminalInstanceProps) {
+const ARTIFACT_DEBOUNCE_MS = 250;
+const MAX_ARTIFACT_TAGS = 12;
+
+function isAbsolutePath(p: string): boolean {
+ if (!p) return false;
+ if (p.startsWith('/') || p.startsWith('\\')) return true;
+ if (/^[A-Za-z]:[\\/]/.test(p)) return true;
+ if (p.startsWith('~')) return true;
+ return false;
+}
+
+function joinPath(base: string, relative: string): string {
+ const sep = base.includes('\\') ? '\\' : '/';
+ const b = base.replace(/[\\/]+$/, '');
+ const r = relative.replace(/^[\\/]+/, '');
+ return `${b}${sep}${r}`;
+}
+
+function resolveArtifactPath(path: string, projectPath: string | null): string {
+ if (!path) return path;
+ if (isAbsolutePath(path)) return path;
+ if (!projectPath) return path;
+ return joinPath(projectPath, path);
+}
+
+function mergeArtifacts(prev: CcArtifact[], next: CcArtifact[]): CcArtifact[] {
+ if (next.length === 0) return prev;
+ const map = new Map
();
+ for (const a of prev) map.set(`${a.type}:${a.path}`, a);
+ let changed = false;
+ for (const a of next) {
+ const key = `${a.type}:${a.path}`;
+ if (map.has(key)) continue;
+ map.set(key, a);
+ changed = true;
+ }
+ if (!changed) return prev;
+ const merged = Array.from(map.values());
+ return merged.length > MAX_ARTIFACT_TAGS ? merged.slice(merged.length - MAX_ARTIFACT_TAGS) : merged;
+}
+
+export function TerminalInstance({ sessionId, className, onRevealPath }: TerminalInstanceProps) {
const projectPath = useWorkflowStore(selectProjectPath);
// cliSessionStore selectors
@@ -38,6 +83,8 @@ export function TerminalInstance({ sessionId, className }: TerminalInstanceProps
const setBuffer = useCliSessionStore((s) => s.setBuffer);
const clearOutput = useCliSessionStore((s) => s.clearOutput);
+ const [artifacts, setArtifacts] = useState([]);
+
// ========== xterm Refs ==========
const terminalHostRef = useRef(null);
@@ -45,6 +92,10 @@ export function TerminalInstance({ sessionId, className }: TerminalInstanceProps
const fitAddonRef = useRef(null);
const lastChunkIndexRef = useRef(0);
+ // Debounced artifact detection
+ const pendingArtifactTextRef = useRef('');
+ const artifactTimerRef = useRef(null);
+
// PTY input batching (30ms, matching TerminalMainArea)
const pendingInputRef = useRef('');
const flushTimerRef = useRef(null);
@@ -56,6 +107,37 @@ export function TerminalInstance({ sessionId, className }: TerminalInstanceProps
const projectPathRef = useRef(projectPath);
projectPathRef.current = projectPath;
+ const handleArtifactClick = useCallback((path: string) => {
+ const resolved = resolveArtifactPath(path, projectPathRef.current);
+ navigator.clipboard.writeText(resolved).catch((err) => {
+ console.error('[TerminalInstance] copy artifact path failed:', err);
+ });
+ onRevealPath?.(resolved);
+ }, [onRevealPath]);
+
+ const scheduleArtifactParse = useCallback((text: string) => {
+ if (!text) return;
+ pendingArtifactTextRef.current += text;
+ if (artifactTimerRef.current !== null) return;
+ artifactTimerRef.current = window.setTimeout(() => {
+ artifactTimerRef.current = null;
+ const pending = pendingArtifactTextRef.current;
+ pendingArtifactTextRef.current = '';
+ const detected = detectCcArtifacts(pending);
+ if (detected.length === 0) return;
+ setArtifacts((prev) => mergeArtifacts(prev, detected));
+ }, ARTIFACT_DEBOUNCE_MS);
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ if (artifactTimerRef.current !== null) {
+ window.clearTimeout(artifactTimerRef.current);
+ artifactTimerRef.current = null;
+ }
+ };
+ }, []);
+
// ========== PTY Input Batching ==========
const flushInput = useCallback(async () => {
@@ -139,6 +221,14 @@ export function TerminalInstance({ sessionId, className }: TerminalInstanceProps
term.reset();
term.clear();
+ // Reset artifact detection state per session
+ setArtifacts([]);
+ pendingArtifactTextRef.current = '';
+ if (artifactTimerRef.current !== null) {
+ window.clearTimeout(artifactTimerRef.current);
+ artifactTimerRef.current = null;
+ }
+
if (!sessionId) return;
clearOutput(sessionId);
@@ -164,12 +254,18 @@ export function TerminalInstance({ sessionId, className }: TerminalInstanceProps
if (start >= chunks.length) return;
const { feedMonitor } = useSessionManagerStore.getState();
+ const newTextParts: string[] = [];
for (let i = start; i < chunks.length; i++) {
term.write(chunks[i].data);
feedMonitor(sessionId, chunks[i].data);
+ newTextParts.push(chunks[i].data);
}
lastChunkIndexRef.current = chunks.length;
- }, [outputChunks, sessionId]);
+
+ if (newTextParts.length > 0) {
+ scheduleArtifactParse(newTextParts.join(''));
+ }
+ }, [outputChunks, sessionId, scheduleArtifactParse]);
// ResizeObserver -> fit + resize backend
useEffect(() => {
@@ -203,9 +299,21 @@ export function TerminalInstance({ sessionId, className }: TerminalInstanceProps
// ========== Render ==========
return (
-
+
+ {artifacts.length > 0 && (
+
+ {artifacts.map((a) => (
+
+ ))}
+
+ )}
+
+
(null);
+
// Session data
const groups = useSessionManagerStore(selectGroups);
const terminalMetas = useSessionManagerStore(selectTerminalMetas);
@@ -146,6 +154,25 @@ export function TerminalPane({ paneId }: TerminalPaneProps) {
}
}, [paneId, sessionId, assignSession]);
+ const handleOpenFileBrowser = useCallback(() => {
+ setInitialFileBrowserPath(null);
+ setIsFileBrowserOpen(true);
+ }, []);
+
+ const handleRevealPath = useCallback((path: string) => {
+ setInitialFileBrowserPath(path);
+ setIsFileBrowserOpen(true);
+ }, []);
+
+ const handleInsertPath = useCallback((path: string) => {
+ if (!sessionId) return;
+ sendCliSessionText(
+ sessionId,
+ { text: path, appendNewline: false },
+ projectPath ?? undefined
+ ).catch((err) => console.error('[TerminalPane] insert path failed:', err));
+ }, [sessionId, projectPath]);
+
const handleRestart = useCallback(async () => {
if (!sessionId || isRestarting) return;
setIsRestarting(true);
@@ -291,6 +318,19 @@ export function TerminalPane({ paneId }: TerminalPaneProps) {
)}
+
+
{alertCount > 0 && (
-
) : (
@@ -329,6 +369,17 @@ export function TerminalPane({ paneId }: TerminalPaneProps) {