From 17af615fe20fef87ba2c9ef787ea637a4f7b1f4f Mon Sep 17 00:00:00 2001 From: catlog22 Date: Thu, 18 Dec 2025 18:29:45 +0800 Subject: [PATCH] Add help view and core memory styles - Introduced styles for the help view including tab transitions, accordion animations, search highlighting, and responsive design. - Implemented core memory styles with modal base styles, memory card designs, and knowledge graph visualization. - Enhanced dark mode support across various components. - Added loading states and empty state designs for better user experience. --- .claude/CLAUDE.md | 2 +- .claude/workflows/coding-philosophy.md | 7 + ...ntext-requirements.md => context-tools.md} | 7 - ccw/src/core/dashboard-generator.ts | 32 +- ccw/src/core/server.ts | 32 +- .../templates/dashboard-css/10-cli-status.css | 337 ++ ccw/src/templates/dashboard-css/10-cli.css | 3984 ----------------- .../dashboard-css/11-cli-history.css | 271 ++ .../templates/dashboard-css/12-cli-legacy.css | 796 ++++ .../templates/dashboard-css/13-cli-ccw.css | 199 + .../templates/dashboard-css/14-cli-modals.css | 258 ++ .../dashboard-css/15-cli-endpoints.css | 305 ++ .../dashboard-css/16-cli-session.css | 241 + .../dashboard-css/17-cli-conversation.css | 283 ++ .../dashboard-css/18-cli-settings.css | 160 + .../dashboard-css/19-cli-native-session.css | 496 ++ .../dashboard-css/20-cli-taskqueue.css | 188 + .../dashboard-css/21-cli-toolmgmt.css | 310 ++ .../dashboard-css/22-cli-semantic.css | 240 + .../{11-memory.css => 23-memory.css} | 0 ...ompt-history.css => 24-prompt-history.css} | 0 ...2-skills-rules.css => 25-skills-rules.css} | 0 ...aude-manager.css => 26-claude-manager.css} | 0 ...aph-explorer.css => 27-graph-explorer.css} | 0 ...{15-mcp-manager.css => 28-mcp-manager.css} | 0 .../{16-help.css => 29-help.css} | 0 ...{17-core-memory.css => 30-core-memory.css} | 331 +- .../dashboard-js/components/cli-status.js | 9 + .../dashboard-js/components/index-manager.js | 256 +- .../dashboard-js/components/modals.js | 24 +- .../dashboard-js/views/codexlens-manager.js | 47 +- ccw/src/tools/cli-executor.ts | 7 +- ccw/src/tools/codex-lens.ts | 53 +- ccw/src/tools/smart-search.ts | 10 +- codex-lens/src/codexlens/storage/dir_index.py | 19 +- .../src/codexlens/storage/index_tree.py | 28 + .../codexlens/storage/migration_manager.py | 27 +- .../migration_001_normalize_keywords.py | 8 + .../migration_005_cleanup_unused_fields.py | 96 +- codex-lens/src/codexlens/storage/registry.py | 62 +- .../src/codexlens/storage/sqlite_store.py | 21 +- codex-lens/tests/test_encoding.py | 5 +- codex-lens/tests/test_entities.py | 1 + .../tests/test_performance_optimizations.py | 38 +- codex-lens/tests/test_token_storage.py | 75 +- codex-lens/tests/test_vector_search_full.py | 2 +- 46 files changed, 4941 insertions(+), 4326 deletions(-) rename .claude/workflows/{context-requirements.md => context-tools.md} (89%) create mode 100644 ccw/src/templates/dashboard-css/10-cli-status.css delete mode 100644 ccw/src/templates/dashboard-css/10-cli.css create mode 100644 ccw/src/templates/dashboard-css/11-cli-history.css create mode 100644 ccw/src/templates/dashboard-css/12-cli-legacy.css create mode 100644 ccw/src/templates/dashboard-css/13-cli-ccw.css create mode 100644 ccw/src/templates/dashboard-css/14-cli-modals.css create mode 100644 ccw/src/templates/dashboard-css/15-cli-endpoints.css create mode 100644 ccw/src/templates/dashboard-css/16-cli-session.css create mode 100644 ccw/src/templates/dashboard-css/17-cli-conversation.css create mode 100644 ccw/src/templates/dashboard-css/18-cli-settings.css create mode 100644 ccw/src/templates/dashboard-css/19-cli-native-session.css create mode 100644 ccw/src/templates/dashboard-css/20-cli-taskqueue.css create mode 100644 ccw/src/templates/dashboard-css/21-cli-toolmgmt.css create mode 100644 ccw/src/templates/dashboard-css/22-cli-semantic.css rename ccw/src/templates/dashboard-css/{11-memory.css => 23-memory.css} (100%) rename ccw/src/templates/dashboard-css/{11-prompt-history.css => 24-prompt-history.css} (100%) rename ccw/src/templates/dashboard-css/{12-skills-rules.css => 25-skills-rules.css} (100%) rename ccw/src/templates/dashboard-css/{13-claude-manager.css => 26-claude-manager.css} (100%) rename ccw/src/templates/dashboard-css/{14-graph-explorer.css => 27-graph-explorer.css} (100%) rename ccw/src/templates/dashboard-css/{15-mcp-manager.css => 28-mcp-manager.css} (100%) rename ccw/src/templates/dashboard-css/{16-help.css => 29-help.css} (100%) rename ccw/src/templates/dashboard-css/{17-core-memory.css => 30-core-memory.css} (57%) diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md index ce7bd625..6051dfda 100644 --- a/.claude/CLAUDE.md +++ b/.claude/CLAUDE.md @@ -2,5 +2,5 @@ - **CLI Tools Usage**: @~/.claude/workflows/cli-tools-usage.md - **Coding Philosophy**: @~/.claude/workflows/coding-philosophy.md -- **Context Requirements**: @~/.claude/workflows/context-requirements.md +- **Context Requirements**: @~/.claude/workflows/context-tools.md - **File Modification**: @~/.claude/workflows/file-modification.md \ No newline at end of file diff --git a/.claude/workflows/coding-philosophy.md b/.claude/workflows/coding-philosophy.md index 0a0f2dcf..2cbbc999 100644 --- a/.claude/workflows/coding-philosophy.md +++ b/.claude/workflows/coding-philosophy.md @@ -61,3 +61,10 @@ - **Reference, don't duplicate** - point to other layers, never copy content - **Maintain perspective** - each layer sees the system at its appropriate scale - **Avoid implementation creep** - higher layers stay architectural + +# Context Requirements + +Before implementation, always: +- Identify 3+ existing similar patterns +- Map dependencies and integration points +- Understand testing framework and coding conventions \ No newline at end of file diff --git a/.claude/workflows/context-requirements.md b/.claude/workflows/context-tools.md similarity index 89% rename from .claude/workflows/context-requirements.md rename to .claude/workflows/context-tools.md index 932a2cf1..ddcd032a 100644 --- a/.claude/workflows/context-requirements.md +++ b/.claude/workflows/context-tools.md @@ -1,10 +1,3 @@ -# Context Requirements - -Before implementation, always: -- Identify 3+ existing similar patterns -- Map dependencies and integration points -- Understand testing framework and coding conventions - ## MCP Tools Usage ### smart_search - Code Search (REQUIRED) diff --git a/ccw/src/core/dashboard-generator.ts b/ccw/src/core/dashboard-generator.ts index 4663e747..3cc13e93 100644 --- a/ccw/src/core/dashboard-generator.ts +++ b/ccw/src/core/dashboard-generator.ts @@ -24,15 +24,29 @@ const MODULE_CSS_FILES = [ '07-managers.css', '08-review.css', '09-explorer.css', - '10-cli.css', - '11-memory.css', - '11-prompt-history.css', - '12-skills-rules.css', - '13-claude-manager.css', - '14-graph-explorer.css', - '15-mcp-manager.css', - '16-help.css', - '17-core-memory.css' + // CLI modules (split from 10-cli.css) + '10-cli-status.css', + '11-cli-history.css', + '12-cli-legacy.css', + '13-cli-ccw.css', + '14-cli-modals.css', + '15-cli-endpoints.css', + '16-cli-session.css', + '17-cli-conversation.css', + '18-cli-settings.css', + '19-cli-native-session.css', + '20-cli-taskqueue.css', + '21-cli-toolmgmt.css', + '22-cli-semantic.css', + // Other modules + '23-memory.css', + '24-prompt-history.css', + '25-skills-rules.css', + '26-claude-manager.css', + '27-graph-explorer.css', + '28-mcp-manager.css', + '29-help.css', + '30-core-memory.css' ]; const MODULE_FILES = [ diff --git a/ccw/src/core/server.ts b/ccw/src/core/server.ts index 1c50fec1..3a5dce44 100644 --- a/ccw/src/core/server.ts +++ b/ccw/src/core/server.ts @@ -61,15 +61,29 @@ const MODULE_CSS_FILES = [ '07-managers.css', '08-review.css', '09-explorer.css', - '10-cli.css', - '11-memory.css', - '11-prompt-history.css', - '12-skills-rules.css', - '13-claude-manager.css', - '14-graph-explorer.css', - '15-mcp-manager.css', - '16-help.css', - '17-core-memory.css' + // CLI modules (split from 10-cli.css) + '10-cli-status.css', + '11-cli-history.css', + '12-cli-legacy.css', + '13-cli-ccw.css', + '14-cli-modals.css', + '15-cli-endpoints.css', + '16-cli-session.css', + '17-cli-conversation.css', + '18-cli-settings.css', + '19-cli-native-session.css', + '20-cli-taskqueue.css', + '21-cli-toolmgmt.css', + '22-cli-semantic.css', + // Other modules + '23-memory.css', + '24-prompt-history.css', + '25-skills-rules.css', + '26-claude-manager.css', + '27-graph-explorer.css', + '28-mcp-manager.css', + '29-help.css', + '30-core-memory.css' ]; // Modular JS files in dependency order diff --git a/ccw/src/templates/dashboard-css/10-cli-status.css b/ccw/src/templates/dashboard-css/10-cli-status.css new file mode 100644 index 00000000..46bb22c4 --- /dev/null +++ b/ccw/src/templates/dashboard-css/10-cli-status.css @@ -0,0 +1,337 @@ +/* ======================================== + * CLI Manager Styles + * Unified font: system-ui for UI, monospace for code + * ======================================== */ + +/* ======================================== + * Status Manager - Two Column Layout + * ======================================== */ +.status-manager { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +.status-two-column { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + align-items: start; +} + +@media (max-width: 1024px) { + .status-two-column { + grid-template-columns: 1fr; + } +} + +/* Section Container */ +.status-section { + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-radius: 0.75rem; + overflow: hidden; +} + +/* CLI Section - No card wrapper */ +.cli-section { + /* No background, border, or card styling */ +} + +.cli-section .section-header { + padding: 0 0 0.75rem 0; + border-bottom: none; + background: transparent; +} + +.cli-section .section-header h3 { + font-size: 0.9375rem; +} + +.cli-section .tools-list, +.cli-section .ccw-list, +.cli-section .endpoint-tools-grid { + padding: 0; +} + +/* Section Header */ +.section-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.875rem 1rem; + border-bottom: 1px solid hsl(var(--border)); + background: hsl(var(--muted) / 0.3); +} + +.section-header-left { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.section-header h3 { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + font-weight: 600; + color: hsl(var(--foreground)); + margin: 0; +} + +.section-header h3 i { + color: hsl(var(--muted-foreground)); +} + +.section-count { + font-size: 0.75rem; + color: hsl(var(--muted-foreground)); +} + +.section-header-actions { + display: flex; + align-items: center; + gap: 0.25rem; +} + +/* Tools List */ +.tools-list { + padding: 0.5rem; +} + +.tool-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem; + border-radius: 0.5rem; + margin-bottom: 0.375rem; + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + transition: all 0.15s ease; +} + +.tool-item:last-child { + margin-bottom: 0; +} + +.tool-item:hover { + background: hsl(var(--hover)); + border-color: hsl(var(--primary) / 0.3); +} + +.tool-item.available { + /* No left border - use status dot instead */ +} + +.tool-item.unavailable { + opacity: 0.7; +} + +.tool-item.endpoint { + /* No left border */ +} + +.tool-item-left { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.tool-status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + flex-shrink: 0; +} + +.tool-status-dot.status-available { + background: hsl(var(--success)); + box-shadow: 0 0 6px hsl(var(--success) / 0.5); +} + +.tool-status-dot.status-unavailable { + background: hsl(var(--muted-foreground) / 0.4); +} + +.tool-item-info { + display: flex; + flex-direction: column; + gap: 0.125rem; +} + +.tool-item-name { + font-size: 0.8125rem; + font-weight: 600; + color: hsl(var(--foreground)); + display: flex; + align-items: center; + gap: 0.5rem; +} + +.tool-item-desc { + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); +} + +.tool-default-badge { + font-size: 0.5625rem; + font-weight: 600; + padding: 0.125rem 0.375rem; + background: hsl(var(--primary)); + color: hsl(var(--primary-foreground)); + border-radius: 9999px; + text-transform: uppercase; + letter-spacing: 0.03em; +} + +.tool-type-badge { + font-size: 0.5625rem; + font-weight: 500; + padding: 0.125rem 0.375rem; + background: hsl(var(--muted)); + color: hsl(var(--muted-foreground)); + border-radius: 0.25rem; +} + +.tool-type-badge.ai { + background: hsl(var(--primary) / 0.15); + color: hsl(var(--primary)); +} + +.tool-type-badge.llm { + background: hsl(142 76% 36% / 0.15); + color: hsl(142 76% 36%); +} + +.tool-item-right { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.tool-status-text { + display: flex; + align-items: center; + gap: 0.25rem; + font-size: 0.6875rem; + font-weight: 500; +} + +.tool-status-text.success { + color: hsl(var(--success)); +} + +.tool-status-text.muted { + color: hsl(var(--muted-foreground)); +} + +/* CCW List */ +.ccw-list { + padding: 0.5rem; +} + +.ccw-item { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: 0.75rem; + border-radius: 0.5rem; + margin-bottom: 0.375rem; + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + transition: all 0.15s ease; +} + +.ccw-item:last-child { + margin-bottom: 0; +} + +.ccw-item:hover { + background: hsl(var(--hover)); + border-color: hsl(var(--primary) / 0.3); +} + +.ccw-item-left { + display: flex; + align-items: flex-start; + gap: 0.75rem; + flex: 1; + min-width: 0; +} + +.ccw-item-mode { + display: flex; + align-items: center; + justify-content: center; + width: 2.25rem; + height: 2.25rem; + border-radius: 0.5rem; + flex-shrink: 0; +} + +.ccw-item-mode.global { + background: hsl(var(--primary) / 0.1); + color: hsl(var(--primary)); +} + +.ccw-item-mode.path { + background: hsl(var(--warning) / 0.1); + color: hsl(var(--warning)); +} + +.ccw-item-info { + flex: 1; + min-width: 0; +} + +.ccw-item-header { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.25rem; +} + +.ccw-item-name { + font-size: 0.8125rem; + font-weight: 600; + color: hsl(var(--foreground)); +} + +.ccw-item-path { + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); + font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; + background: hsl(var(--muted) / 0.5); + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + margin-bottom: 0.375rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ccw-item-meta { + display: flex; + gap: 0.75rem; + font-size: 0.625rem; + color: hsl(var(--muted-foreground)); +} + +.ccw-item-meta span { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.ccw-item-actions { + display: flex; + align-items: center; + gap: 0.25rem; + opacity: 0; + transition: opacity 0.15s ease; +} + +.ccw-item:hover .ccw-item-actions { + opacity: 1; +} + diff --git a/ccw/src/templates/dashboard-css/10-cli.css b/ccw/src/templates/dashboard-css/10-cli.css deleted file mode 100644 index 4fe89602..00000000 --- a/ccw/src/templates/dashboard-css/10-cli.css +++ /dev/null @@ -1,3984 +0,0 @@ -/* ======================================== - * CLI Manager Styles - * Unified font: system-ui for UI, monospace for code - * ======================================== */ - -/* ======================================== - * Status Manager - Two Column Layout - * ======================================== */ -.status-manager { - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -} - -.status-two-column { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1.5rem; - align-items: start; -} - -@media (max-width: 1024px) { - .status-two-column { - grid-template-columns: 1fr; - } -} - -/* Section Container */ -.status-section { - background: hsl(var(--card)); - border: 1px solid hsl(var(--border)); - border-radius: 0.75rem; - overflow: hidden; -} - -/* CLI Section - No card wrapper */ -.cli-section { - /* No background, border, or card styling */ -} - -.cli-section .section-header { - padding: 0 0 0.75rem 0; - border-bottom: none; - background: transparent; -} - -.cli-section .section-header h3 { - font-size: 0.9375rem; -} - -.cli-section .tools-list, -.cli-section .ccw-list, -.cli-section .endpoint-tools-grid { - padding: 0; -} - -/* Section Header */ -.section-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.875rem 1rem; - border-bottom: 1px solid hsl(var(--border)); - background: hsl(var(--muted) / 0.3); -} - -.section-header-left { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.section-header h3 { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - color: hsl(var(--foreground)); - margin: 0; -} - -.section-header h3 i { - color: hsl(var(--muted-foreground)); -} - -.section-count { - font-size: 0.75rem; - color: hsl(var(--muted-foreground)); -} - -.section-header-actions { - display: flex; - align-items: center; - gap: 0.25rem; -} - -/* Tools List */ -.tools-list { - padding: 0.5rem; -} - -.tool-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.75rem; - border-radius: 0.5rem; - margin-bottom: 0.375rem; - background: hsl(var(--card)); - border: 1px solid hsl(var(--border)); - transition: all 0.15s ease; -} - -.tool-item:last-child { - margin-bottom: 0; -} - -.tool-item:hover { - background: hsl(var(--hover)); - border-color: hsl(var(--primary) / 0.3); -} - -.tool-item.available { - /* No left border - use status dot instead */ -} - -.tool-item.unavailable { - opacity: 0.7; -} - -.tool-item.endpoint { - /* No left border */ -} - -.tool-item-left { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.tool-status-dot { - width: 8px; - height: 8px; - border-radius: 50%; - flex-shrink: 0; -} - -.tool-status-dot.status-available { - background: hsl(var(--success)); - box-shadow: 0 0 6px hsl(var(--success) / 0.5); -} - -.tool-status-dot.status-unavailable { - background: hsl(var(--muted-foreground) / 0.4); -} - -.tool-item-info { - display: flex; - flex-direction: column; - gap: 0.125rem; -} - -.tool-item-name { - font-size: 0.8125rem; - font-weight: 600; - color: hsl(var(--foreground)); - display: flex; - align-items: center; - gap: 0.5rem; -} - -.tool-item-desc { - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); -} - -.tool-default-badge { - font-size: 0.5625rem; - font-weight: 600; - padding: 0.125rem 0.375rem; - background: hsl(var(--primary)); - color: hsl(var(--primary-foreground)); - border-radius: 9999px; - text-transform: uppercase; - letter-spacing: 0.03em; -} - -.tool-type-badge { - font-size: 0.5625rem; - font-weight: 500; - padding: 0.125rem 0.375rem; - background: hsl(var(--muted)); - color: hsl(var(--muted-foreground)); - border-radius: 0.25rem; -} - -.tool-type-badge.ai { - background: hsl(var(--primary) / 0.15); - color: hsl(var(--primary)); -} - -.tool-type-badge.llm { - background: hsl(142 76% 36% / 0.15); - color: hsl(142 76% 36%); -} - -.tool-item-right { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.tool-status-text { - display: flex; - align-items: center; - gap: 0.25rem; - font-size: 0.6875rem; - font-weight: 500; -} - -.tool-status-text.success { - color: hsl(var(--success)); -} - -.tool-status-text.muted { - color: hsl(var(--muted-foreground)); -} - -/* CCW List */ -.ccw-list { - padding: 0.5rem; -} - -.ccw-item { - display: flex; - align-items: flex-start; - justify-content: space-between; - padding: 0.75rem; - border-radius: 0.5rem; - margin-bottom: 0.375rem; - background: hsl(var(--card)); - border: 1px solid hsl(var(--border)); - transition: all 0.15s ease; -} - -.ccw-item:last-child { - margin-bottom: 0; -} - -.ccw-item:hover { - background: hsl(var(--hover)); - border-color: hsl(var(--primary) / 0.3); -} - -.ccw-item-left { - display: flex; - align-items: flex-start; - gap: 0.75rem; - flex: 1; - min-width: 0; -} - -.ccw-item-mode { - display: flex; - align-items: center; - justify-content: center; - width: 2.25rem; - height: 2.25rem; - border-radius: 0.5rem; - flex-shrink: 0; -} - -.ccw-item-mode.global { - background: hsl(var(--primary) / 0.1); - color: hsl(var(--primary)); -} - -.ccw-item-mode.path { - background: hsl(var(--warning) / 0.1); - color: hsl(var(--warning)); -} - -.ccw-item-info { - flex: 1; - min-width: 0; -} - -.ccw-item-header { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.25rem; -} - -.ccw-item-name { - font-size: 0.8125rem; - font-weight: 600; - color: hsl(var(--foreground)); -} - -.ccw-item-path { - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); - font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; - background: hsl(var(--muted) / 0.5); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - margin-bottom: 0.375rem; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.ccw-item-meta { - display: flex; - gap: 0.75rem; - font-size: 0.625rem; - color: hsl(var(--muted-foreground)); -} - -.ccw-item-meta span { - display: flex; - align-items: center; - gap: 0.25rem; -} - -.ccw-item-actions { - display: flex; - align-items: center; - gap: 0.25rem; - opacity: 0; - transition: opacity 0.15s ease; -} - -.ccw-item:hover .ccw-item-actions { - opacity: 1; -} - -/* ======================================== - * History View Styles - * ======================================== */ -.history-view { - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -} - -.history-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.75rem 0; - margin-bottom: 1rem; - border-bottom: 1px solid hsl(var(--border)); -} - -.history-header-left { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.history-count { - font-size: 0.8125rem; - color: hsl(var(--muted-foreground)); -} - -.history-header-right { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.history-search-wrapper { - position: relative; - display: flex; - align-items: center; -} - -.history-search-wrapper i { - position: absolute; - left: 0.625rem; - color: hsl(var(--muted-foreground)); - pointer-events: none; -} - -.history-search-input { - padding: 0.5rem 0.75rem 0.5rem 2rem; - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - background: hsl(var(--background)); - color: hsl(var(--foreground)); - font-size: 0.8125rem; - width: 220px; - transition: all 0.2s ease; -} - -.history-search-input:focus { - outline: none; - border-color: hsl(var(--primary)); - box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); - width: 260px; -} - -.history-search-input::placeholder { - color: hsl(var(--muted-foreground) / 0.7); -} - -.history-filter-select { - padding: 0.5rem 0.75rem; - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - background: hsl(var(--background)); - color: hsl(var(--foreground)); - font-size: 0.8125rem; - cursor: pointer; - transition: all 0.2s ease; -} - -.history-filter-select:hover { - border-color: hsl(var(--primary) / 0.5); -} - -.history-filter-select:focus { - outline: none; - border-color: hsl(var(--primary)); -} - -/* History List */ -.history-list { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.history-item { - display: flex; - align-items: flex-start; - justify-content: space-between; - padding: 1rem; - background: hsl(var(--card)); - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - cursor: pointer; - transition: all 0.15s ease; -} - -.history-item:hover { - background: hsl(var(--hover)); - border-color: hsl(var(--primary) / 0.3); - box-shadow: 0 2px 8px hsl(var(--foreground) / 0.05); -} - -.history-item:hover .history-item-actions { - opacity: 1; -} - -.history-item-main { - flex: 1; - min-width: 0; -} - -.history-item-header { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.5rem; - flex-wrap: wrap; -} - -.history-tool-tag { - font-size: 0.625rem; - font-weight: 600; - padding: 0.1875rem 0.5rem; - border-radius: 9999px; - text-transform: uppercase; - letter-spacing: 0.04em; -} - -.history-tool-tag.tool-gemini { - background: hsl(210 80% 55% / 0.12); - color: hsl(210 80% 45%); -} - -.history-tool-tag.tool-qwen { - background: hsl(280 70% 55% / 0.12); - color: hsl(280 70% 45%); -} - -.history-tool-tag.tool-codex { - background: hsl(142 71% 45% / 0.12); - color: hsl(142 71% 35%); -} - -.history-tool-tag.tool-claude { - background: hsl(25 90% 50% / 0.12); - color: hsl(25 90% 40%); -} - -.history-mode-tag { - font-size: 0.625rem; - font-weight: 500; - padding: 0.1875rem 0.5rem; - background: hsl(var(--muted)); - color: hsl(var(--muted-foreground)); - border-radius: 0.25rem; -} - -.history-source-dir { - font-size: 0.625rem; - font-weight: 500; - padding: 0.1875rem 0.5rem; - background: hsl(var(--accent)); - color: hsl(var(--accent-foreground)); - border-radius: 0.25rem; - display: inline-flex; - align-items: center; - gap: 0.25rem; - max-width: 120px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.history-status { - display: flex; - align-items: center; - gap: 0.25rem; - font-size: 0.625rem; - font-weight: 500; - padding: 0.1875rem 0.5rem; - border-radius: 9999px; -} - -.history-status.success { - background: hsl(var(--success) / 0.12); - color: hsl(var(--success)); -} - -.history-status.warning { - background: hsl(var(--warning) / 0.12); - color: hsl(var(--warning)); -} - -.history-status.error { - background: hsl(var(--destructive) / 0.12); - color: hsl(var(--destructive)); -} - -.history-item-prompt { - font-size: 0.875rem; - font-weight: 450; - color: hsl(var(--foreground)); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - line-height: 1.5; - margin-bottom: 0.5rem; -} - -.history-item-meta { - display: flex; - align-items: center; - gap: 1rem; - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); -} - -.history-item-meta span { - display: flex; - align-items: center; - gap: 0.25rem; -} - -.history-item-actions { - display: flex; - align-items: center; - gap: 0.25rem; - opacity: 0; - transition: opacity 0.15s ease; - margin-left: 0.75rem; -} - -/* History Empty State */ -.history-empty-state { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 4rem 2rem; - text-align: center; - color: hsl(var(--muted-foreground)); -} - -.history-empty-state i { - opacity: 0.3; - margin-bottom: 1rem; -} - -.history-empty-state h3 { - font-size: 1rem; - font-weight: 600; - color: hsl(var(--foreground)); - margin-bottom: 0.5rem; -} - -.history-empty-state p { - font-size: 0.8125rem; -} - -/* ======================================== - * Legacy Container Styles (kept for compatibility) - * ======================================== */ - -/* Container */ -.cli-manager-container { - display: flex; - flex-direction: column; - gap: 1.25rem; - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -} - -.cli-manager-grid { - display: grid; - grid-template-columns: 1.2fr 0.8fr; - gap: 1.25rem; - align-items: start; -} - -@media (max-width: 768px) { - .cli-manager-grid { - grid-template-columns: 1fr; - } -} - -/* Panels */ -.cli-panel { - background: hsl(var(--card)); - border: 1px solid hsl(var(--border)); - border-radius: 0.75rem; - overflow: hidden; - box-shadow: 0 1px 3px hsl(var(--foreground) / 0.04); - transition: box-shadow 0.2s ease; -} - -.cli-panel:hover { - box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08); -} - -.cli-panel-full { - grid-column: 1 / -1; -} - -/* Status Panel */ -.cli-status-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.625rem 0.75rem; - border-bottom: 1px solid hsl(var(--border)); - background: hsl(var(--muted) / 0.3); -} - -.cli-status-header h3 { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.8125rem; - font-weight: 600; - color: hsl(var(--foreground)); - margin: 0; - letter-spacing: -0.01em; -} - -.cli-status-header h3 i { - color: hsl(var(--muted-foreground)); -} - -.cli-tools-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); - gap: 0.5rem; - padding: 0.5rem 0.625rem; -} - -.cli-tool-card { - padding: 0.625rem 0.5rem; - border-radius: 0.5rem; - background: hsl(var(--background)); - text-align: center; - border: 1.5px solid hsl(var(--border)); - transition: all 0.2s ease; -} - -.cli-tool-card.available { - background: hsl(var(--background)); -} - -.cli-tool-card.available:hover { - box-shadow: 0 2px 8px hsl(var(--foreground) / 0.08); -} - -/* Tool-specific border colors */ -.cli-tool-card.tool-gemini.available { - border-color: hsl(210 80% 55% / 0.5); -} - -.cli-tool-card.tool-gemini.available:hover { - border-color: hsl(210 80% 55% / 0.7); -} - -.cli-tool-card.tool-qwen.available { - border-color: hsl(280 70% 55% / 0.5); -} - -.cli-tool-card.tool-qwen.available:hover { - border-color: hsl(280 70% 55% / 0.7); -} - -.cli-tool-card.tool-codex.available { - border-color: hsl(142 71% 45% / 0.5); -} - -.cli-tool-card.tool-codex.available:hover { - border-color: hsl(142 71% 45% / 0.7); -} - -.cli-tool-card.tool-claude.available { - border-color: hsl(25 90% 50% / 0.5); -} - -.cli-tool-card.tool-claude.available:hover { - border-color: hsl(25 90% 50% / 0.7); -} - -.cli-tool-card.unavailable { - border-color: hsl(var(--border)); - opacity: 0.6; -} - -.cli-tool-header { - display: flex; - align-items: center; - justify-content: center; - gap: 0.375rem; - margin-bottom: 0.1875rem; -} - -.cli-tool-status { - width: 8px; - height: 8px; - border-radius: 50%; - flex-shrink: 0; -} - -.cli-tool-status.status-available { - background: hsl(var(--success)); - box-shadow: 0 0 6px hsl(var(--success) / 0.5); -} - -.cli-tool-status.status-unavailable { - background: hsl(var(--muted-foreground) / 0.5); -} - -.cli-tool-name { - font-weight: 600; - font-size: 0.8125rem; - color: hsl(var(--foreground)); - letter-spacing: -0.01em; -} - -.cli-tool-badge { - font-size: 0.5625rem; - font-weight: 600; - padding: 0.125rem 0.375rem; - background: hsl(var(--primary)); - color: hsl(var(--primary-foreground)); - border-radius: 9999px; - text-transform: uppercase; - letter-spacing: 0.03em; -} - -.cli-tool-info { - font-size: 0.6875rem; - margin-bottom: 0.3125rem; - color: hsl(var(--muted-foreground)); -} - -.cli-tool-info .text-success { - color: hsl(var(--success)); - font-weight: 500; -} - -/* CLI Tool Description */ -.cli-tool-desc { - font-size: 0.625rem; - color: hsl(var(--muted-foreground) / 0.8); - line-height: 1.3; -} - -/* CLI Tool Actions */ -.cli-tool-actions { - min-height: 1.75rem; -} - -/* CodexLens specific styles */ -.cli-tool-card.tool-codexlens.available { - border-color: hsl(35 90% 50% / 0.5); -} - -.cli-tool-card.tool-codexlens.available:hover { - border-color: hsl(35 90% 50% / 0.7); -} - -/* Semantic Search specific styles */ -.cli-tool-card.tool-semantic.available { - border-color: hsl(260 80% 60% / 0.5); -} - -.cli-tool-card.tool-semantic.available:hover { - border-color: hsl(260 80% 60% / 0.7); -} - -.cli-tool-card.tool-semantic.clickable { - cursor: pointer; -} - -.cli-tool-card.tool-semantic.clickable:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px hsl(260 80% 60% / 0.15); -} - -/* Execute Panel */ -.cli-execute-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem; - border-bottom: 1px solid hsl(var(--border)); -} - -.cli-execute-header h3 { - font-size: 0.875rem; - font-weight: 600; - color: hsl(var(--foreground)); - margin: 0; -} - -.cli-execute-form { - padding: 1rem; -} - -.cli-execute-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0.75rem; - margin-bottom: 0.75rem; -} - -.cli-form-group { - display: flex; - flex-direction: column; - gap: 0.375rem; -} - -.cli-form-group label { - font-size: 0.75rem; - font-weight: 500; - color: hsl(var(--muted-foreground)); -} - -.cli-select, -.cli-textarea { - padding: 0.5rem; - border: 1px solid hsl(var(--border)); - border-radius: 0.375rem; - background: hsl(var(--background)); - color: hsl(var(--foreground)); - font-size: 0.875rem; -} - -.cli-textarea { - min-height: 80px; - resize: vertical; - font-family: monospace; -} - -.cli-select:focus, -.cli-textarea:focus { - outline: none; - border-color: hsl(var(--primary)); - box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2); -} - -.cli-execute-actions { - display: flex; - justify-content: flex-end; - margin-top: 0.75rem; -} - -/* History Panel */ -.cli-history-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.875rem 1rem; - border-bottom: 1px solid hsl(var(--border)); - background: hsl(var(--muted) / 0.3); -} - -.cli-history-header h3 { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.8125rem; - font-weight: 600; - color: hsl(var(--foreground)); - margin: 0; - letter-spacing: -0.01em; -} - -.cli-history-header h3 i { - color: hsl(var(--muted-foreground)); -} - -.cli-history-controls { - display: flex; - align-items: center; - gap: 0.5rem; -} - -/* Search Input for History */ -.cli-history-search { - padding: 0.375rem 0.625rem; - border: 1px solid hsl(var(--border)); - border-radius: 0.375rem; - background: hsl(var(--background)); - color: hsl(var(--foreground)); - font-size: 0.75rem; - width: 160px; - transition: all 0.2s ease; -} - -.cli-history-search:focus { - outline: none; - border-color: hsl(var(--primary)); - box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); - width: 200px; -} - -.cli-history-search::placeholder { - color: hsl(var(--muted-foreground) / 0.7); -} - -.cli-tool-filter { - padding: 0.375rem 0.625rem; - border: 1px solid hsl(var(--border)); - border-radius: 0.375rem; - background: hsl(var(--background)); - color: hsl(var(--foreground)); - font-size: 0.75rem; - cursor: pointer; - transition: all 0.2s ease; -} - -.cli-tool-filter:hover { - border-color: hsl(var(--primary) / 0.5); -} - -.cli-tool-filter:focus { - outline: none; - border-color: hsl(var(--primary)); -} - -.cli-history-list { - max-height: 450px; - overflow-y: auto; -} - -.cli-history-item { - display: flex; - align-items: flex-start; - justify-content: space-between; - padding: 0.75rem 1rem; - border-bottom: 1px solid hsl(var(--border) / 0.5); - cursor: pointer; - transition: all 0.15s ease; -} - -.cli-history-item:hover { - background: hsl(var(--hover)); -} - -.cli-history-item:hover .cli-history-actions { - opacity: 1; -} - -.cli-history-item:last-child { - border-bottom: none; -} - -.cli-history-item-content { - flex: 1; - min-width: 0; -} - -.cli-history-item-header { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.375rem; -} - -.cli-tool-tag { - font-size: 0.5625rem; - font-weight: 600; - padding: 0.125rem 0.5rem; - border-radius: 9999px; - text-transform: uppercase; - letter-spacing: 0.04em; -} - -.cli-tool-gemini { - background: hsl(210 80% 55% / 0.12); - color: hsl(210 80% 45%); -} - -.cli-tool-qwen { - background: hsl(280 70% 55% / 0.12); - color: hsl(280 70% 45%); -} - -.cli-tool-codex { - background: hsl(142 71% 45% / 0.12); - color: hsl(142 71% 35%); -} - -.cli-tool-claude { - background: hsl(25 90% 50% / 0.12); - color: hsl(25 90% 40%); -} - -.cli-history-time { - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); -} - -.cli-history-prompt { - font-size: 0.8125rem; - font-weight: 450; - color: hsl(var(--foreground)); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - line-height: 1.4; -} - -.cli-history-meta { - display: flex; - align-items: center; - gap: 0.75rem; - font-size: 0.6875rem; - margin-top: 0.25rem; - color: hsl(var(--muted-foreground)); -} - -/* History Item Actions */ -.cli-history-actions { - display: flex; - align-items: center; - gap: 0.25rem; - opacity: 0; - transition: opacity 0.15s ease; - margin-left: 0.5rem; -} - -.cli-history-actions .btn-icon { - padding: 0.25rem; - color: hsl(var(--muted-foreground)); -} - -.cli-history-actions .btn-icon:hover { - color: hsl(var(--foreground)); - background: hsl(var(--hover)); -} - -.cli-history-actions .btn-icon.btn-danger:hover { - color: hsl(var(--destructive)); - background: hsl(var(--destructive) / 0.1); -} - -/* Output Panel */ -.cli-output-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem; - border-bottom: 1px solid hsl(var(--border)); -} - -.cli-output-header h3 { - font-size: 0.875rem; - font-weight: 600; - color: hsl(var(--foreground)); - margin: 0; -} - -.cli-output-status { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.status-indicator { - width: 8px; - height: 8px; - border-radius: 50%; -} - -.status-indicator.running { - background: hsl(var(--warning)); - animation: pulse 1.5s infinite; -} - -.status-indicator.success { - background: hsl(var(--success)); -} - -.status-indicator.error { - background: hsl(var(--destructive)); -} - -@keyframes pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} - -.cli-output-content { - padding: 1rem; - background: hsl(var(--muted)); - font-family: monospace; - font-size: 0.75rem; - color: hsl(var(--foreground)); - max-height: 300px; - overflow-y: auto; - white-space: pre-wrap; - word-wrap: break-word; - margin: 0; -} - -/* Detail Modal */ -.cli-detail-header { - margin-bottom: 1.25rem; - padding-bottom: 1rem; - border-bottom: 1px solid hsl(var(--border)); -} - -.cli-detail-info { - display: flex; - align-items: center; - gap: 0.75rem; - margin-bottom: 0.625rem; - flex-wrap: wrap; -} - -.cli-detail-status { - font-size: 0.6875rem; - font-weight: 600; - padding: 0.25rem 0.625rem; - border-radius: 9999px; - text-transform: uppercase; - letter-spacing: 0.03em; -} - -.cli-detail-status.status-success { - background: hsl(var(--success) / 0.12); - color: hsl(var(--success)); -} - -.cli-detail-status.status-error { - background: hsl(var(--destructive) / 0.12); - color: hsl(var(--destructive)); -} - -.cli-detail-status.status-timeout { - background: hsl(var(--warning) / 0.12); - color: hsl(var(--warning)); -} - -.cli-detail-meta { - display: flex; - gap: 1.25rem; - font-size: 0.75rem; - color: hsl(var(--muted-foreground)); - flex-wrap: wrap; -} - -.cli-detail-meta span { - display: flex; - align-items: center; - gap: 0.375rem; -} - -.cli-detail-section { - margin-bottom: 1.25rem; -} - -.cli-detail-section h4 { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.75rem; - font-weight: 600; - color: hsl(var(--foreground)); - margin-bottom: 0.625rem; - text-transform: uppercase; - letter-spacing: 0.03em; -} - -.cli-detail-section h4 i { - width: 14px; - height: 14px; - color: hsl(var(--muted-foreground)); -} - -.cli-detail-prompt { - padding: 1rem; - background: hsl(var(--muted) / 0.5); - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; - font-size: 0.75rem; - line-height: 1.6; - white-space: pre-wrap; - word-wrap: break-word; - max-height: 200px; - overflow-y: auto; - color: hsl(var(--foreground)); -} - -.cli-detail-output { - padding: 1rem; - background: hsl(var(--muted) / 0.5); - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; - font-size: 0.75rem; - line-height: 1.6; - white-space: pre-wrap; - word-wrap: break-word; - max-height: 350px; - overflow-y: auto; - color: hsl(var(--foreground)); -} - -.cli-detail-error { - padding: 1rem; - background: hsl(var(--destructive) / 0.08); - border: 1px solid hsl(var(--destructive) / 0.2); - border-radius: 0.5rem; - font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; - font-size: 0.75rem; - line-height: 1.6; - color: hsl(var(--destructive)); - white-space: pre-wrap; - word-wrap: break-word; - max-height: 180px; - overflow-y: auto; -} - -/* Detail Actions */ -.cli-detail-actions { - display: flex; - justify-content: flex-end; - gap: 0.5rem; - margin-top: 1.5rem; - padding-top: 1rem; - border-top: 1px solid hsl(var(--border)); -} - -/* Button Styles */ -.btn { - display: inline-flex; - align-items: center; - gap: 0.375rem; - padding: 0.5rem 1rem; - border: none; - border-radius: 0.375rem; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.15s ease; -} - -.btn-primary { - background: hsl(var(--primary)); - color: hsl(var(--primary-foreground)); -} - -.btn-primary:hover:not(:disabled) { - opacity: 0.9; -} - -.btn-primary:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.btn-icon { - padding: 0.375rem; - background: transparent; - border: none; - color: hsl(var(--muted-foreground)); - cursor: pointer; - border-radius: 0.25rem; - transition: all 0.15s ease; -} - -.btn-icon:hover { - background: hsl(var(--hover)); - color: hsl(var(--foreground)); -} - -.btn-sm { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.25rem; - padding: 0.375rem 0.625rem; - font-size: 0.75rem; - font-weight: 500; - border-radius: 0.375rem; - border: 1px solid hsl(var(--border)); - background: hsl(var(--background)); - color: hsl(var(--foreground)); - cursor: pointer; - transition: all 0.15s ease; - white-space: nowrap; -} - -.btn-sm:hover { - background: hsl(var(--hover)); - border-color: hsl(var(--primary) / 0.3); -} - -.btn-sm.btn-primary { - background: hsl(var(--primary)); - color: hsl(var(--primary-foreground)); - border-color: hsl(var(--primary)); -} - -.btn-sm.btn-primary:hover { - opacity: 0.9; -} - -.btn-sm.btn-outline { - background: transparent; - border-color: hsl(var(--border)); -} - -.btn-sm.btn-outline:hover { - background: hsl(var(--hover)); -} - -.btn-outline { - background: transparent; - border: 1px solid hsl(var(--border)); - color: hsl(var(--foreground)); -} - -.btn-outline:hover { - background: hsl(var(--hover)); -} - -.btn-outline.btn-danger { - border-color: hsl(var(--destructive) / 0.3); - color: hsl(var(--destructive)); -} - -.btn-outline.btn-danger:hover { - background: hsl(var(--destructive) / 0.1); - border-color: hsl(var(--destructive) / 0.5); -} - -/* Empty State */ -.empty-state { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 2rem; - color: hsl(var(--muted-foreground)); -} - -.empty-state svg { - width: 2rem; - height: 2rem; - margin-bottom: 0.5rem; - opacity: 0.5; -} - -.empty-state p { - font-size: 0.875rem; -} - -/* ======================================== - * CCW Installation Panel Styles - * ======================================== */ - -/* CCW Header Actions */ -.ccw-header-actions { - display: flex; - align-items: center; - gap: 0.25rem; -} - -/* CCW Install Content */ -.ccw-install-content { - padding: 0.5rem 0.625rem; -} - -/* CCW Empty State */ -.ccw-empty-state { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 2rem 1rem; - text-align: center; - color: hsl(var(--muted-foreground)); -} - -.ccw-empty-state i { - opacity: 0.4; - margin-bottom: 0.75rem; -} - -.ccw-empty-state p { - font-size: 0.8125rem; - margin-bottom: 1rem; -} - -/* ======================================== - * CCW Carousel Styles - * ======================================== */ -.ccw-carousel-wrapper { - position: relative; - display: flex; - align-items: center; - gap: 0.5rem; -} - -.ccw-carousel-track { - display: flex; - flex: 1; - overflow: hidden; - transition: transform 0.3s ease; -} - -.ccw-carousel-card { - flex: 0 0 100%; - min-width: 0; - padding: 0.625rem 0.75rem; - background: hsl(var(--background)); - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - transition: all 0.2s ease; -} - -.ccw-carousel-card.active { - border-color: hsl(var(--primary) / 0.4); - box-shadow: 0 2px 8px hsl(var(--primary) / 0.1); -} - -/* Carousel Card Header */ -.ccw-card-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 0.375rem; -} - -.ccw-card-header-right { - display: flex; - align-items: center; - gap: 0.375rem; -} - -.ccw-card-mode { - display: flex; - align-items: center; - gap: 0.375rem; - font-weight: 600; - font-size: 0.8125rem; - color: hsl(var(--foreground)); -} - -.btn-icon-sm { - padding: 0.25rem; -} - -.ccw-card-mode.global { - color: hsl(var(--primary)); -} - -.ccw-card-mode.path { - color: hsl(var(--warning)); -} - -.ccw-version-tag { - font-size: 0.625rem; - font-weight: 600; - padding: 0.25rem 0.5rem; - background: hsl(var(--primary) / 0.1); - color: hsl(var(--primary)); - border-radius: 9999px; - letter-spacing: 0.02em; -} - -/* Carousel Card Path */ -.ccw-card-path { - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); - font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; - background: hsl(var(--muted) / 0.5); - padding: 0.3125rem 0.5rem; - border-radius: 0.375rem; - margin-bottom: 0.375rem; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Carousel Card Meta */ -.ccw-card-meta { - display: flex; - gap: 0.75rem; - font-size: 0.625rem; - color: hsl(var(--muted-foreground)); -} - -.ccw-card-meta span { - display: flex; - align-items: center; - gap: 0.25rem; -} - -/* Carousel Card Actions - moved to header */ - -/* Carousel Navigation Buttons */ -.ccw-carousel-btn { - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - flex-shrink: 0; - background: hsl(var(--background)); - border: 1px solid hsl(var(--border)); - border-radius: 50%; - color: hsl(var(--muted-foreground)); - cursor: pointer; - transition: all 0.15s ease; -} - -.ccw-carousel-btn:hover { - background: hsl(var(--hover)); - color: hsl(var(--foreground)); - border-color: hsl(var(--primary) / 0.3); -} - -.ccw-carousel-btn:disabled { - opacity: 0.3; - cursor: not-allowed; -} - -/* Carousel Dots */ -.ccw-carousel-dots { - display: flex; - justify-content: center; - gap: 0.5rem; - margin-top: 0.5rem; -} - -.ccw-carousel-dot { - width: 8px; - height: 8px; - border-radius: 50%; - background: hsl(var(--muted-foreground) / 0.3); - border: none; - cursor: pointer; - transition: all 0.2s ease; -} - -.ccw-carousel-dot:hover { - background: hsl(var(--muted-foreground) / 0.5); -} - -.ccw-carousel-dot.active { - background: hsl(var(--primary)); - width: 20px; - border-radius: 4px; -} - -/* ======================================== - * CCW Install Modal Styles - * ======================================== */ -.ccw-install-modal { - padding: 0.5rem 0; -} - -.ccw-install-options { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.ccw-install-option { - display: flex; - align-items: center; - gap: 1rem; - padding: 1rem; - background: hsl(var(--muted) / 0.3); - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - cursor: pointer; - transition: all 0.15s ease; -} - -.ccw-install-option:hover { - background: hsl(var(--hover)); - border-color: hsl(var(--primary) / 0.3); -} - -.ccw-option-icon { - display: flex; - align-items: center; - justify-content: center; - width: 3rem; - height: 3rem; - border-radius: 0.5rem; - flex-shrink: 0; -} - -.ccw-option-icon.global { - background: hsl(var(--primary) / 0.1); - color: hsl(var(--primary)); -} - -.ccw-option-icon.path { - background: hsl(var(--warning) / 0.1); - color: hsl(var(--warning)); -} - -.ccw-option-info { - flex: 1; -} - -.ccw-option-title { - font-weight: 600; - font-size: 0.875rem; - color: hsl(var(--foreground)); - margin-bottom: 0.25rem; -} - -.ccw-option-desc { - font-size: 0.75rem; - color: hsl(var(--muted-foreground)); -} - -/* Path Input Section */ -.ccw-path-input-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid hsl(var(--border)); -} - -.ccw-path-input-group { - margin-bottom: 1rem; -} - -.ccw-path-input-group label { - display: block; - font-size: 0.75rem; - font-weight: 500; - color: hsl(var(--muted-foreground)); - margin-bottom: 0.5rem; -} - -.ccw-path-input-group .cli-textarea { - width: 100%; - min-height: auto; - padding: 0.625rem 0.75rem; - font-size: 0.8125rem; -} - -.ccw-install-action { - display: flex; - justify-content: flex-end; -} - -/* Danger Button (icon style - subtle) */ -.btn-icon.btn-danger { - color: hsl(var(--muted-foreground)); - background: transparent; -} - -.btn-icon.btn-danger:hover { - color: hsl(var(--destructive)); - background: hsl(var(--destructive) / 0.1); -} - -/* ======================================== - * Generic Modal Styles - * ======================================== */ -.generic-modal-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(2px); - display: flex; - align-items: center; - justify-content: center; - z-index: 100; - opacity: 0; - transition: opacity 0.2s ease; -} - -.generic-modal-overlay.active { - opacity: 1; -} - -.generic-modal { - background: hsl(var(--card)); - border: 1px solid hsl(var(--border)); - border-radius: 0.75rem; - width: 90%; - max-width: 600px; - max-height: 85vh; - display: flex; - flex-direction: column; - box-shadow: 0 8px 32px rgb(0 0 0 / 0.25); - transform: scale(0.95); - transition: transform 0.2s ease; -} - -.generic-modal-overlay.active .generic-modal { - transform: scale(1); -} - -.generic-modal.large { - max-width: 800px; -} - -.generic-modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem 1.25rem; - border-bottom: 1px solid hsl(var(--border)); - background: hsl(var(--muted) / 0.3); - border-radius: 0.75rem 0.75rem 0 0; -} - -.generic-modal-title { - font-size: 0.9375rem; - font-weight: 600; - color: hsl(var(--foreground)); - margin: 0; -} - -.generic-modal-close { - width: 2rem; - height: 2rem; - display: flex; - align-items: center; - justify-content: center; - background: none; - border: none; - font-size: 1.25rem; - color: hsl(var(--muted-foreground)); - cursor: pointer; - border-radius: 0.375rem; - transition: all 0.15s ease; -} - -.generic-modal-close:hover { - background: hsl(var(--hover)); - color: hsl(var(--foreground)); -} - -.generic-modal-body { - flex: 1; - overflow-y: auto; - padding: 1.25rem; -} - -.generic-modal.lg { - max-width: 640px; -} - -/* ======================================== - * Endpoint Tools Grid Styles - * ======================================== */ -.endpoint-tools-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); - gap: 0.75rem; - padding: 0.75rem; -} - -.endpoint-tool-card { - display: flex; - flex-direction: column; - padding: 0.875rem; - background: hsl(var(--card)); - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - cursor: pointer; - transition: all 0.2s ease; - min-height: 100px; -} - -.endpoint-tool-card:hover { - background: hsl(var(--hover)); - border-color: hsl(var(--indigo) / 0.5); - box-shadow: 0 2px 8px hsl(var(--indigo) / 0.1); - transform: translateY(-1px); -} - -.endpoint-tool-header { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.5rem; -} - -.endpoint-tool-dot { - width: 8px; - height: 8px; - border-radius: 50%; - background: hsl(var(--indigo)); - box-shadow: 0 0 6px hsl(var(--indigo) / 0.5); - flex-shrink: 0; -} - -.endpoint-tool-name { - font-size: 0.75rem; - font-weight: 600; - color: hsl(var(--foreground)); - font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.endpoint-tool-desc { - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); - line-height: 1.4; - flex: 1; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - margin-bottom: 0.5rem; -} - -.endpoint-tool-meta { - display: flex; - align-items: center; - gap: 0.5rem; - margin-top: auto; -} - -.endpoint-tool-params { - display: flex; - align-items: center; - gap: 0.25rem; - font-size: 0.625rem; - color: hsl(var(--muted-foreground)); - background: hsl(var(--muted) / 0.5); - padding: 0.1875rem 0.375rem; - border-radius: 0.25rem; -} - -.endpoint-tool-required { - font-size: 0.5625rem; - color: hsl(var(--warning)); - background: hsl(var(--warning) / 0.1); - padding: 0.125rem 0.375rem; - border-radius: 9999px; - font-weight: 500; -} - -/* ======================================== - * Tool Detail Modal Styles - * ======================================== */ -.tool-detail-modal { - padding: 0.5rem 0; -} - -.tool-detail-header { - display: flex; - align-items: flex-start; - gap: 1rem; - margin-bottom: 1rem; - padding-bottom: 1rem; - border-bottom: 1px solid hsl(var(--border)); -} - -.tool-detail-icon { - display: flex; - align-items: center; - justify-content: center; - width: 3rem; - height: 3rem; - background: hsl(var(--indigo) / 0.1); - color: hsl(var(--indigo)); - border-radius: 0.5rem; - flex-shrink: 0; -} - -.tool-detail-title h3 { - font-size: 1rem; - font-weight: 600; - color: hsl(var(--foreground)); - margin: 0 0 0.375rem 0; - font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; -} - -.tool-detail-badge { - font-size: 0.625rem; - font-weight: 500; - padding: 0.1875rem 0.5rem; - background: hsl(var(--indigo) / 0.1); - color: hsl(var(--indigo)); - border-radius: 9999px; - text-transform: uppercase; - letter-spacing: 0.04em; -} - -.tool-detail-desc { - font-size: 0.8125rem; - color: hsl(var(--muted-foreground)); - line-height: 1.6; - margin-bottom: 1.25rem; -} - -.tool-detail-params h4, -.tool-detail-usage h4 { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.75rem; - font-weight: 600; - color: hsl(var(--foreground)); - margin: 0 0 0.75rem 0; - text-transform: uppercase; - letter-spacing: 0.03em; -} - -.tool-detail-params h4 i, -.tool-detail-usage h4 i { - color: hsl(var(--muted-foreground)); -} - -.tool-params-list { - display: flex; - flex-direction: column; - gap: 0.75rem; - max-height: 280px; - overflow-y: auto; - padding-right: 0.5rem; -} - -.tool-param-item { - padding: 0.75rem; - background: hsl(var(--muted) / 0.3); - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; -} - -.tool-param-header { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.375rem; - flex-wrap: wrap; -} - -.tool-param-name { - font-size: 0.8125rem; - font-weight: 600; - color: hsl(var(--foreground)); - background: hsl(var(--muted)); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; -} - -.tool-param-type { - font-size: 0.625rem; - color: hsl(var(--primary)); - background: hsl(var(--primary) / 0.1); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; -} - -.tool-param-required { - font-size: 0.5625rem; - font-weight: 600; - color: hsl(var(--destructive)); - background: hsl(var(--destructive) / 0.1); - padding: 0.125rem 0.375rem; - border-radius: 9999px; - text-transform: uppercase; -} - -.tool-param-optional { - font-size: 0.5625rem; - font-weight: 500; - color: hsl(var(--muted-foreground)); - background: hsl(var(--muted)); - padding: 0.125rem 0.375rem; - border-radius: 9999px; -} - -.tool-param-desc { - font-size: 0.75rem; - color: hsl(var(--muted-foreground)); - line-height: 1.5; -} - -.tool-param-default, -.tool-param-enum { - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); - margin-top: 0.25rem; -} - -.tool-param-default code, -.tool-param-enum code { - font-size: 0.6875rem; - background: hsl(var(--muted)); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - color: hsl(var(--foreground)); -} - -.tool-detail-no-params { - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - padding: 1.5rem; - background: hsl(var(--muted) / 0.3); - border: 1px dashed hsl(var(--border)); - border-radius: 0.5rem; - color: hsl(var(--muted-foreground)); - font-size: 0.8125rem; -} - -.tool-detail-usage { - margin-top: 1.25rem; -} - -.tool-usage-code { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.75rem; - background: hsl(var(--muted) / 0.5); - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - overflow-x: auto; -} - -.tool-usage-code code { - font-size: 0.75rem; - font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; - color: hsl(var(--foreground)); - white-space: nowrap; - flex: 1; -} - -.tool-copy-btn { - display: flex; - align-items: center; - justify-content: center; - padding: 0.375rem; - background: hsl(var(--background)); - border: 1px solid hsl(var(--border)); - border-radius: 0.25rem; - color: hsl(var(--muted-foreground)); - cursor: pointer; - transition: all 0.15s ease; - flex-shrink: 0; -} - -.tool-copy-btn:hover { - background: hsl(var(--hover)); - color: hsl(var(--foreground)); - border-color: hsl(var(--primary) / 0.3); -} - -/* ======================================== - * Resume Session Styles - * ======================================== */ - -/* Resume Badge */ -.history-resume-badge { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.1875rem 0.375rem; - background: hsl(var(--primary) / 0.12); - color: hsl(var(--primary)); - border-radius: 0.25rem; - font-size: 0.625rem; -} - -/* Resume Item Highlight */ -.history-item-resume { - border-left: 3px solid hsl(var(--primary) / 0.5); -} - -.history-item-resume:hover { - border-left-color: hsl(var(--primary)); -} - -/* History ID Display */ -.history-id { - font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; - font-size: 0.625rem; - color: hsl(var(--muted-foreground) / 0.7); -} - -/* Resume Button */ -.btn-resume { - color: hsl(var(--primary)); -} - -.btn-resume:hover { - background: hsl(var(--primary) / 0.1); - color: hsl(var(--primary)); -} - -/* Resume Modal */ -.resume-modal p { - font-size: 0.875rem; - color: hsl(var(--muted-foreground)); - margin-bottom: 1rem; -} - -.resume-prompt-input { - width: 100%; - padding: 0.75rem; - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - background: hsl(var(--background)); - color: hsl(var(--foreground)); - font-size: 0.875rem; - font-family: inherit; - resize: vertical; - min-height: 80px; - transition: all 0.2s ease; -} - -.resume-prompt-input:focus { - outline: none; - border-color: hsl(var(--primary)); - box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); -} - -.resume-prompt-input::placeholder { - color: hsl(var(--muted-foreground) / 0.7); -} - -.resume-modal-actions { - display: flex; - justify-content: flex-end; - gap: 0.5rem; - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid hsl(var(--border)); -} - -/* ======================================== - * Batch Delete & Multi-Select Styles - * ======================================== */ - -/* Delete Dropdown */ -.history-delete-dropdown { - position: relative; - display: inline-block; -} - -.delete-dropdown-menu { - display: none; - position: absolute; - top: 100%; - right: 0; - z-index: 50; - min-width: 180px; - padding: 0.375rem; - background: hsl(var(--card)); - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - box-shadow: 0 4px 16px hsl(var(--foreground) / 0.1); - margin-top: 0.25rem; -} - -.delete-dropdown-menu.show { - display: block; -} - -.delete-dropdown-menu button { - display: flex; - align-items: center; - gap: 0.5rem; - width: 100%; - padding: 0.5rem 0.625rem; - border: none; - background: transparent; - color: hsl(var(--foreground)); - font-size: 0.75rem; - text-align: left; - cursor: pointer; - border-radius: 0.375rem; - transition: all 0.15s ease; -} - -.delete-dropdown-menu button:hover { - background: hsl(var(--hover)); -} - -.delete-dropdown-menu button i { - color: hsl(var(--muted-foreground)); -} - -.delete-dropdown-menu .delete-all-btn { - color: hsl(var(--destructive)); -} - -.delete-dropdown-menu .delete-all-btn i { - color: hsl(var(--destructive)); -} - -.delete-dropdown-menu .delete-all-btn:hover { - background: hsl(var(--destructive) / 0.1); -} - -.dropdown-divider { - height: 1px; - margin: 0.375rem 0; - background: hsl(var(--border)); -} - -/* Batch Actions Bar */ -.history-batch-actions { - display: flex; - align-items: center; - gap: 0.625rem; - padding: 0.75rem 1rem; - background: hsl(var(--primary) / 0.08); - border: 1px solid hsl(var(--primary) / 0.2); - border-radius: 0.5rem; - margin-bottom: 1rem; -} - -.batch-select-count { - font-size: 0.8125rem; - font-weight: 600; - color: hsl(var(--primary)); - margin-right: auto; -} - -.btn-danger { - background: hsl(var(--destructive)); - color: hsl(var(--destructive-foreground)); - border-color: hsl(var(--destructive)); -} - -.btn-danger:hover:not(:disabled) { - opacity: 0.9; -} - -.btn-danger:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* Override for icon-style danger buttons (subtle, not solid red) */ -.btn-icon.btn-danger, -.history-item-actions .btn-danger, -.cli-history-actions .btn-danger { - background: transparent; - color: hsl(var(--muted-foreground)); - border: none; -} - -.btn-icon.btn-danger:hover, -.history-item-actions .btn-danger:hover, -.cli-history-actions .btn-danger:hover { - background: hsl(var(--destructive) / 0.1); - color: hsl(var(--destructive)); - opacity: 1; -} - -/* Multi-Select Checkbox */ -.history-checkbox-wrapper { - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - margin-right: 0.75rem; - flex-shrink: 0; -} - -.history-checkbox { - width: 1.125rem; - height: 1.125rem; - cursor: pointer; - accent-color: hsl(var(--primary)); -} - -/* Selected Item State */ -.history-item-selected { - background: hsl(var(--primary) / 0.08) !important; - border-color: hsl(var(--primary) / 0.3) !important; -} - -/* Turn Badge for History List */ -.history-turn-badge { - display: inline-flex; - align-items: center; - gap: 0.25rem; - font-size: 0.625rem; - font-weight: 600; - padding: 0.1875rem 0.5rem; - background: hsl(var(--primary) / 0.12); - color: hsl(var(--primary)); - border-radius: 9999px; -} - -/* ======================================== - * Multi-Turn Conversation Styles - * ======================================== */ - -/* Turn Badge in History List */ -.cli-turn-badge { - font-size: 0.5625rem; - font-weight: 600; - padding: 0.125rem 0.5rem; - background: hsl(var(--primary) / 0.12); - color: hsl(var(--primary)); - border-radius: 9999px; - text-transform: uppercase; - letter-spacing: 0.02em; -} - -/* Turns Container in Detail Modal */ -.cli-turns-container { - max-height: 60vh; - overflow-y: auto; -} - -/* Turn Section */ -.cli-turn-section { - margin-bottom: 1rem; -} - -.cli-turn-header { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.75rem; - flex-wrap: wrap; -} - -.cli-turn-number { - font-size: 0.75rem; - font-weight: 600; - padding: 0.25rem 0.625rem; - background: hsl(var(--primary) / 0.1); - color: hsl(var(--primary)); - border-radius: 9999px; -} - -.cli-turn-status { - font-size: 0.625rem; - font-weight: 600; - padding: 0.1875rem 0.5rem; - border-radius: 9999px; - text-transform: uppercase; -} - -.cli-turn-status.status-success { - background: hsl(var(--success) / 0.12); - color: hsl(var(--success)); -} - -.cli-turn-status.status-error { - background: hsl(var(--destructive) / 0.12); - color: hsl(var(--destructive)); -} - -.cli-turn-status.status-timeout { - background: hsl(var(--warning) / 0.12); - color: hsl(var(--warning)); -} - -.cli-turn-duration { - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); -} - -/* Turn Divider (legacy) */ -.cli-turn-divider { - border: none; - border-top: 1px dashed hsl(var(--border)); - margin: 1.25rem 0; -} - -/* Error Section (smaller in multi-turn) */ -.cli-detail-error-section .cli-detail-error { - max-height: 100px; -} - -/* ======================================== - * Enhanced Multi-Turn Display - * ======================================== */ - -/* Turn Section */ -.cli-turn-section { - padding: 0.75rem; - border-radius: 0.5rem; - background: hsl(var(--background)); - border: 1px solid hsl(var(--border)); -} - -.cli-turn-section.cli-turn-latest { - border-color: hsl(var(--primary) / 0.3); - background: hsl(var(--primary) / 0.03); -} - -/* Turn Header */ -.cli-turn-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 0.75rem; - padding-bottom: 0.5rem; - border-bottom: 1px solid hsl(var(--border)); - flex-wrap: wrap; - gap: 0.5rem; -} - -.cli-turn-marker { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.cli-turn-number { - font-size: 0.8125rem; - font-weight: 600; - color: hsl(var(--primary)); -} - -.cli-turn-latest-badge { - font-size: 0.5625rem; - font-weight: 600; - padding: 0.125rem 0.375rem; - background: hsl(var(--success) / 0.12); - color: hsl(var(--success)); - border-radius: 9999px; - text-transform: uppercase; - letter-spacing: 0.03em; -} - -.cli-turn-meta { - display: flex; - align-items: center; - gap: 0.75rem; - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); -} - -.cli-turn-meta span { - display: flex; - align-items: center; - gap: 0.25rem; -} - -.cli-turn-time i, -.cli-turn-duration i { - color: hsl(var(--muted-foreground) / 0.7); -} - -/* Turn Body */ -.cli-turn-body { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -/* Section Labels */ -.cli-prompt-section h4 { - color: hsl(var(--primary)); -} - -.cli-prompt-section h4 i { - color: hsl(var(--primary)); -} - -.cli-output-section h4 { - color: hsl(var(--success)); -} - -.cli-output-section h4 i { - color: hsl(var(--success)); -} - -/* Turn Connector (visual line between turns) */ -.cli-turn-connector { - display: flex; - justify-content: center; - padding: 0.25rem 0; -} - -.cli-turn-line { - width: 2px; - height: 1.5rem; - background: linear-gradient( - to bottom, - hsl(var(--border)), - hsl(var(--primary) / 0.3), - hsl(var(--border)) - ); - border-radius: 1px; -} - -/* Truncated Notice */ -.cli-truncated-notice { - display: flex; - align-items: center; - gap: 0.375rem; - font-size: 0.75rem; - color: hsl(var(--warning)); - margin-top: 0.5rem; - padding: 0.375rem 0.625rem; - background: hsl(var(--warning) / 0.08); - border-radius: 0.25rem; -} - -.cli-truncated-notice i { - flex-shrink: 0; -} - -/* Turn Badge with Icon */ -.cli-turn-badge { - display: inline-flex; - align-items: center; - gap: 0.25rem; -} - -.cli-turn-badge i { - width: 12px; - height: 12px; -} - -/* ======================================== - * Conversation View Toggle - * ======================================== */ - -/* View Toggle Bar */ -.cli-view-toggle { - display: flex; - gap: 0.5rem; - margin-bottom: 1rem; - padding: 0.5rem; - background: hsl(var(--muted) / 0.3); - border-radius: 0.5rem; -} - -.cli-view-toggle .btn { - flex: 1; - justify-content: center; -} - -.cli-view-toggle .btn.active { - background: hsl(var(--primary)); - color: hsl(var(--primary-foreground)); - border-color: hsl(var(--primary)); -} - -/* Concatenated Prompt Section */ -.cli-concat-section { - margin-top: 1rem; -} - -.cli-concat-format-selector { - display: flex; - gap: 0.375rem; - margin-bottom: 0.75rem; -} - -.cli-concat-format-selector .btn-xs { - padding: 0.25rem 0.625rem; - font-size: 0.6875rem; -} - -.cli-concat-output { - max-height: 400px; - overflow-y: auto; - font-size: 0.75rem; - white-space: pre-wrap; - word-break: break-word; -} - -/* Button Sizes */ -.btn-xs { - padding: 0.25rem 0.5rem; - font-size: 0.6875rem; - border-radius: 0.25rem; -} - -/* ======================================== - * CLI Settings Section - * ======================================== */ - -.cli-settings-section { - /* No card wrapper - just title and cards */ -} - -.cli-settings-section .section-header { - padding: 0 0 0.75rem 0; - border-bottom: none; - background: transparent; -} - -.cli-settings-section .section-header h3 { - font-size: 0.9375rem; -} - -.cli-settings-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 0.75rem; -} - -@media (max-width: 1200px) { - .cli-settings-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 640px) { - .cli-settings-grid { - grid-template-columns: 1fr; - } -} - -.cli-setting-item { - padding: 0.75rem; - background: hsl(var(--card)); - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - display: flex; - flex-direction: column; - min-height: 90px; -} - -.cli-setting-label { - display: flex; - align-items: center; - gap: 0.375rem; - font-size: 0.6875rem; - font-weight: 600; - color: hsl(var(--muted-foreground)); - text-transform: uppercase; - letter-spacing: 0.025em; - margin-bottom: 0.5rem; -} - -.cli-setting-label i { - color: hsl(var(--primary)); - width: 12px; - height: 12px; -} - -.cli-setting-control { - margin-bottom: 0.5rem; - flex-shrink: 0; -} - -.cli-setting-select { - width: 100%; - padding: 0.4375rem 0.5rem; - font-size: 0.8125rem; - background: hsl(var(--background)); - border: 1px solid hsl(var(--border)); - border-radius: 0.375rem; - color: hsl(var(--foreground)); - cursor: pointer; - transition: all 0.15s ease; -} - -.cli-setting-select:hover { - border-color: hsl(var(--primary) / 0.5); -} - -.cli-setting-select:focus { - outline: none; - border-color: hsl(var(--primary)); - box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1); -} - -.cli-setting-desc { - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); - line-height: 1.3; - margin-top: auto; -} - -.cli-setting-value { - font-size: 0.875rem; - color: hsl(var(--foreground)); - font-weight: 500; -} - -/* Toggle Switch */ -.cli-toggle { - position: relative; - display: inline-block; - width: 36px; - height: 20px; -} - -.cli-toggle input { - opacity: 0; - width: 0; - height: 0; -} - -.cli-toggle-slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: hsl(var(--muted)); - transition: 0.3s; - border-radius: 20px; -} - -.cli-toggle-slider:before { - position: absolute; - content: ""; - height: 14px; - width: 14px; - left: 3px; - bottom: 3px; - background-color: white; - transition: 0.3s; - border-radius: 50%; -} - -.cli-toggle input:checked + .cli-toggle-slider { - background-color: hsl(var(--primary)); -} - -.cli-toggle input:checked + .cli-toggle-slider:before { - transform: translateX(16px); -} - -.cli-toggle input:focus + .cli-toggle-slider { - box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2); -} - -/* Disabled state for settings */ -.cli-setting-item.disabled { - opacity: 0.5; - pointer-events: none; -} - -/* ======================================== - * Native Session Styles - * ======================================== */ - -/* Native badge in history list */ -.cli-native-badge { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.125rem 0.375rem; - background: hsl(var(--primary) / 0.1); - color: hsl(var(--primary)); - border-radius: 0.25rem; - font-size: 0.625rem; -} - -.cli-history-item.has-native { - border-left: 2px solid hsl(var(--primary) / 0.5); -} - -/* Mode tag */ -.cli-mode-tag { - display: inline-flex; - align-items: center; - padding: 0.125rem 0.375rem; - font-size: 0.625rem; - font-weight: 500; - color: hsl(var(--muted-foreground)); - background: hsl(var(--muted)); - border-radius: 0.25rem; -} - -/* Status badge */ -.cli-status-badge { - display: inline-flex; - align-items: center; - gap: 0.25rem; - padding: 0.125rem 0.375rem; - font-size: 0.625rem; - font-weight: 500; - border-radius: 0.25rem; -} - -.cli-status-badge.text-success { - background: hsl(var(--success) / 0.1); - color: hsl(var(--success)); -} - -.cli-status-badge.text-warning { - background: hsl(var(--warning) / 0.1); - color: hsl(var(--warning)); -} - -.cli-status-badge.text-destructive { - background: hsl(var(--destructive) / 0.1); - color: hsl(var(--destructive)); -} - -/* Native Session Detail Modal */ -.native-session-detail { - font-family: system-ui, -apple-system, sans-serif; -} - -.native-session-header { - margin-bottom: 1rem; - padding-bottom: 1rem; - border-bottom: 1px solid hsl(var(--border)); -} - -.native-session-info { - display: flex; - align-items: center; - gap: 0.75rem; - flex-wrap: wrap; - margin-bottom: 0.5rem; -} - -.native-model, -.native-session-id { - display: inline-flex; - align-items: center; - gap: 0.25rem; - font-size: 0.75rem; - color: hsl(var(--muted-foreground)); -} - -.native-session-meta { - display: flex; - flex-wrap: wrap; - gap: 1rem; - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); -} - -.native-session-meta span { - display: inline-flex; - align-items: center; - gap: 0.25rem; -} - -/* Tokens Summary */ -.native-tokens-summary { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.75rem 1rem; - margin-bottom: 1rem; - background: hsl(var(--muted) / 0.5); - border-radius: 0.5rem; - font-size: 0.75rem; - color: hsl(var(--foreground)); -} - -/* Native Turns Container */ -.native-turns-container { - max-height: 60vh; - overflow-y: auto; - padding-right: 0.5rem; -} - -/* Native Turn */ -.native-turn { - margin-bottom: 1rem; - padding: 0.875rem; - border-radius: 0.5rem; - border: 1px solid hsl(var(--border)); -} - -.native-turn.user { - background: hsl(var(--muted) / 0.3); - border-left: 3px solid hsl(var(--primary)); -} - -.native-turn.assistant { - background: hsl(var(--background)); - border-left: 3px solid hsl(var(--success)); -} - -.native-turn.latest { - box-shadow: 0 0 0 1px hsl(var(--primary) / 0.3); -} - -.native-turn-header { - display: flex; - align-items: center; - gap: 0.75rem; - margin-bottom: 0.625rem; - flex-wrap: wrap; -} - -.native-turn-role { - display: inline-flex; - align-items: center; - gap: 0.25rem; - font-size: 0.75rem; - font-weight: 600; - color: hsl(var(--foreground)); -} - -.native-turn-number { - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); -} - -.native-turn-tokens { - display: inline-flex; - align-items: center; - gap: 0.25rem; - font-size: 0.625rem; - color: hsl(var(--muted-foreground)); - padding: 0.125rem 0.375rem; - background: hsl(var(--muted)); - border-radius: 0.25rem; -} - -.native-turn-latest { - font-size: 0.625rem; - font-weight: 500; - padding: 0.125rem 0.375rem; - background: hsl(var(--primary) / 0.1); - color: hsl(var(--primary)); - border-radius: 0.25rem; -} - -.native-turn-content pre { - margin: 0; - padding: 0.75rem; - background: hsl(var(--muted)); - border-radius: 0.375rem; - font-family: monospace; - font-size: 0.75rem; - line-height: 1.5; - white-space: pre-wrap; - word-wrap: break-word; - max-height: 300px; - overflow-y: auto; -} - -/* Thoughts Section */ -.native-thoughts-section { - margin-top: 0.75rem; - padding: 0.625rem; - background: hsl(var(--warning) / 0.05); - border: 1px solid hsl(var(--warning) / 0.2); - border-radius: 0.375rem; -} - -.native-thoughts-section h5 { - display: flex; - align-items: center; - gap: 0.375rem; - font-size: 0.6875rem; - font-weight: 600; - color: hsl(var(--warning)); - margin: 0 0 0.5rem 0; -} - -.native-thoughts-list { - margin: 0; - padding-left: 1.25rem; - font-size: 0.6875rem; - color: hsl(var(--foreground)); -} - -.native-thoughts-list li { - margin-bottom: 0.25rem; -} - -/* Tool Calls Section */ -.native-tools-section { - margin-top: 0.75rem; - padding: 0.625rem; - background: hsl(var(--muted) / 0.5); - border: 1px solid hsl(var(--border)); - border-radius: 0.375rem; -} - -.native-tools-section h5 { - display: flex; - align-items: center; - gap: 0.375rem; - font-size: 0.6875rem; - font-weight: 600; - color: hsl(var(--muted-foreground)); - margin: 0 0 0.5rem 0; -} - -.native-tools-list { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.native-tool-call { - padding: 0.5rem; - background: hsl(var(--background)); - border-radius: 0.25rem; -} - -.native-tool-name { - display: inline-block; - font-family: monospace; - font-size: 0.6875rem; - font-weight: 600; - color: hsl(var(--primary)); - margin-bottom: 0.25rem; -} - -.native-tool-output { - margin: 0.25rem 0 0 0; - padding: 0.375rem; - background: hsl(var(--muted)); - border-radius: 0.25rem; - font-family: monospace; - font-size: 0.625rem; - white-space: pre-wrap; - word-wrap: break-word; - max-height: 100px; - overflow-y: auto; -} - -/* Native Session Actions */ -.native-session-actions { - display: flex; - gap: 0.5rem; - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid hsl(var(--border)); - flex-wrap: wrap; -} - -/* ======================================== - * Enhanced Native Session Display - * ======================================== */ - -/* View Full Process Button in Execution Detail */ -.cli-detail-native-action { - margin-top: 0.75rem; - padding-top: 0.75rem; - border-top: 1px solid hsl(var(--border) / 0.5); -} - -.cli-detail-native-action .btn { - font-size: 0.8125rem; - gap: 0.5rem; -} - -/* Collapsible Thinking Process */ -.turn-thinking-details { - border: none; - margin: 0; -} - -.turn-thinking-summary { - display: flex; - align-items: center; - gap: 0.375rem; - cursor: pointer; - padding: 0.5rem; - background: hsl(var(--warning) / 0.08); - border: 1px solid hsl(var(--warning) / 0.25); - border-radius: 0.375rem; - font-size: 0.75rem; - font-weight: 600; - color: hsl(var(--warning)); - transition: all 0.2s ease; - list-style: none; -} - -.turn-thinking-summary::-webkit-details-marker { - display: none; -} - -.turn-thinking-summary:hover { - background: hsl(var(--warning) / 0.15); - border-color: hsl(var(--warning) / 0.4); -} - -.turn-thinking-summary::before { - content: 'â–¶'; - display: inline-block; - margin-right: 0.25rem; - transition: transform 0.2s ease; - font-size: 0.6875rem; -} - -.turn-thinking-details[open] .turn-thinking-summary::before { - transform: rotate(90deg); -} - -.turn-thinking-content { - padding: 0.75rem; - margin-top: 0.5rem; - background: hsl(var(--warning) / 0.03); - border: 1px solid hsl(var(--warning) / 0.15); - border-radius: 0.375rem; - font-style: italic; -} - -.turn-thinking-content ul { - margin: 0; - padding-left: 1.25rem; -} - -.turn-thinking-content li { - margin-bottom: 0.375rem; - font-size: 0.6875rem; - line-height: 1.6; - color: hsl(var(--foreground) / 0.85); -} - -/* Tool Calls Header */ -.turn-tool-calls-header { - display: flex; - align-items: center; - gap: 0.375rem; - font-size: 0.75rem; - font-weight: 600; - color: hsl(var(--muted-foreground)); - margin-bottom: 0.625rem; - padding-bottom: 0.375rem; - border-bottom: 1px solid hsl(var(--border) / 0.5); -} - -/* Collapsible Tool Calls */ -.turn-tool-call-details { - border: none; - margin-bottom: 0.5rem; -} - -.turn-tool-call-summary { - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - padding: 0.5rem 0.75rem; - background: hsl(var(--background)); - border: 1px solid hsl(var(--border)); - border-radius: 0.375rem; - font-size: 0.7rem; - transition: all 0.2s ease; - list-style: none; -} - -.turn-tool-call-summary::-webkit-details-marker { - display: none; -} - -.turn-tool-call-summary:hover { - background: hsl(var(--muted) / 0.5); - border-color: hsl(var(--primary) / 0.4); -} - -.turn-tool-call-summary::before { - content: 'â–¶'; - display: inline-block; - margin-right: 0.5rem; - transition: transform 0.2s ease; - font-size: 0.625rem; - color: hsl(var(--muted-foreground)); -} - -.turn-tool-call-details[open] .turn-tool-call-summary::before { - transform: rotate(90deg); -} - -.native-tool-size { - font-size: 0.625rem; - color: hsl(var(--muted-foreground)); - font-weight: 400; -} - -.turn-tool-call-content { - padding: 0.75rem; - margin-top: 0.5rem; - background: hsl(var(--muted) / 0.3); - border: 1px solid hsl(var(--border)); - border-radius: 0.375rem; - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.turn-tool-input, -.turn-tool-output { - margin-bottom: 0.75rem; -} - -.turn-tool-input:last-child, -.turn-tool-output:last-child { - margin-bottom: 0; -} - -.turn-tool-input strong, -.turn-tool-output strong { - display: block; - font-size: 0.6875rem; - font-weight: 600; - color: hsl(var(--foreground)); - margin-bottom: 0.375rem; -} - -.turn-tool-input pre, -.turn-tool-output pre { - margin: 0; - padding: 0.5rem; - background: hsl(var(--background)); - border: 1px solid hsl(var(--border)); - border-radius: 0.25rem; - font-family: monospace; - font-size: 0.6875rem; - line-height: 1.5; - white-space: pre-wrap; - word-wrap: break-word; - max-height: 400px; - overflow-y: auto; -} - -/* Improved scrollbar for tool output */ -.turn-tool-output pre::-webkit-scrollbar { - width: 6px; -} - -.turn-tool-output pre::-webkit-scrollbar-track { - background: hsl(var(--muted)); - border-radius: 3px; -} - -.turn-tool-output pre::-webkit-scrollbar-thumb { - background: hsl(var(--muted-foreground) / 0.3); - border-radius: 3px; -} - -.turn-tool-output pre::-webkit-scrollbar-thumb:hover { - background: hsl(var(--muted-foreground) / 0.5); -} - -/* ======================================== - * Task Queue Sidebar - CLI Tab Styles - * ======================================== */ - -/* Tab Navigation */ -.task-queue-tabs { - display: flex; - gap: 0; - border-bottom: 1px solid hsl(var(--border)); - padding: 0 1rem; -} - -.task-queue-tab { - flex: 1; - padding: 0.625rem 0.75rem; - background: transparent; - border: none; - border-bottom: 2px solid transparent; - color: hsl(var(--muted-foreground)); - font-size: 0.8125rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s; - display: flex; - align-items: center; - justify-content: center; - gap: 0.375rem; -} - -.task-queue-tab:hover { - color: hsl(var(--foreground)); - background: hsl(var(--muted) / 0.3); -} - -.task-queue-tab.active { - color: hsl(var(--primary)); - border-bottom-color: hsl(var(--primary)); -} - -.task-queue-tab .tab-badge { - background: hsl(var(--muted)); - color: hsl(var(--muted-foreground)); - padding: 0.125rem 0.375rem; - border-radius: 9999px; - font-size: 0.6875rem; - font-weight: 600; - min-width: 1.25rem; - text-align: center; -} - -.task-queue-tab.active .tab-badge { - background: hsl(var(--primary) / 0.15); - color: hsl(var(--primary)); -} - -/* CLI Filter Buttons */ -.cli-filter-btn { - padding: 0.375rem 0.625rem; - background: transparent; - border: 1px solid hsl(var(--border)); - border-radius: 0.375rem; - color: hsl(var(--muted-foreground)); - font-size: 0.75rem; - cursor: pointer; - transition: all 0.15s; - white-space: nowrap; -} - -.cli-filter-btn:hover { - background: hsl(var(--muted) / 0.5); - color: hsl(var(--foreground)); -} - -.cli-filter-btn.active { - background: hsl(var(--primary)); - border-color: hsl(var(--primary)); - color: hsl(var(--primary-foreground)); -} - -/* CLI Queue Item */ -.cli-queue-item { - padding: 0.75rem; - background: hsl(var(--card)); - border: 1px solid hsl(var(--border)); - border-radius: 0.5rem; - margin-bottom: 0.5rem; - cursor: pointer; - transition: all 0.15s; -} - -.cli-queue-item:hover { - background: hsl(var(--muted) / 0.5); - border-color: hsl(var(--primary) / 0.3); -} - -.cli-queue-item.category-user { - border-left: 3px solid #3b82f6; -} - -.cli-queue-item.category-insight { - border-left: 3px solid #a855f7; -} - -.cli-queue-item.category-internal { - border-left: 3px solid #22c55e; -} - -.cli-queue-item-header { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.375rem; -} - -.cli-queue-category-icon { - font-size: 0.875rem; -} - -.cli-queue-tool-tag { - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - font-size: 0.625rem; - font-weight: 600; - text-transform: uppercase; -} - -.cli-queue-tool-tag.cli-tool-gemini { - background: hsl(210 100% 50% / 0.15); - color: hsl(210 100% 45%); -} - -.cli-queue-tool-tag.cli-tool-qwen { - background: hsl(280 100% 50% / 0.15); - color: hsl(280 100% 40%); -} - -.cli-queue-tool-tag.cli-tool-codex { - background: hsl(145 60% 45% / 0.15); - color: hsl(145 60% 35%); -} - -.cli-queue-tool-tag.cli-tool-claude { - background: hsl(25 90% 50% / 0.15); - color: hsl(25 90% 40%); -} - -.cli-queue-status { - font-size: 0.75rem; -} - -.cli-queue-time { - margin-left: auto; - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); -} - -.cli-queue-prompt { - font-size: 0.75rem; - color: hsl(var(--foreground)); - line-height: 1.4; - margin-bottom: 0.375rem; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.cli-queue-meta { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.6875rem; - color: hsl(var(--muted-foreground)); -} - -.cli-queue-id { - font-family: monospace; -} - -.cli-queue-turns { - background: hsl(var(--muted)); - padding: 0.0625rem 0.25rem; - border-radius: 0.25rem; -} - -.cli-queue-native { - font-size: 0.75rem; -} - -/* ======================================== - * CLI Tool Management Styles - * ======================================== */ - -/* Disabled tool card */ -.cli-tool-card.disabled { - opacity: 0.6; -} - -.cli-tool-card.disabled .cli-tool-header { - opacity: 0.8; -} - -/* Disabled status indicator */ -.cli-tool-status.status-disabled { - background: hsl(var(--warning)); -} - -/* Warning badge */ -.cli-tool-badge.badge-warning { - background: hsl(var(--warning) / 0.15); - color: hsl(var(--warning)); - font-size: 0.65rem; - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - margin-left: 0.25rem; -} - -/* Compact toggle for tool cards */ -.cli-toggle-compact { - position: relative; - display: inline-block; - width: 28px; - height: 16px; - cursor: pointer; -} - -.cli-toggle-compact input { - opacity: 0; - width: 0; - height: 0; - position: absolute; -} - -.cli-toggle-slider-compact { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: hsl(var(--muted)); - transition: 0.2s; - border-radius: 16px; -} - -.cli-toggle-slider-compact:before { - position: absolute; - content: ""; - height: 12px; - width: 12px; - left: 2px; - bottom: 2px; - background-color: white; - transition: 0.2s; - border-radius: 50%; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); -} - -.cli-toggle-compact input:checked + .cli-toggle-slider-compact { - background-color: hsl(var(--primary)); -} - -.cli-toggle-compact input:checked + .cli-toggle-slider-compact:before { - transform: translateX(12px); -} - -.cli-toggle-compact input:focus + .cli-toggle-slider-compact { - box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5); -} - -/* Language Setting Status Badge */ -.cli-setting-status { - margin-left: 0.75rem; - padding: 0.25rem 0.625rem; - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.03em; - border-radius: 0.25rem; - display: inline-flex; - align-items: center; -} - -.cli-setting-status.enabled { - background: hsl(var(--primary) / 0.15); - color: hsl(var(--primary)); -} - -.cli-setting-status.disabled { - background: hsl(var(--muted)); - color: hsl(var(--muted-foreground)); -} - -/* Ghost button variant for destructive actions */ -.btn-ghost.text-destructive { - color: hsl(var(--destructive)); -} - -/* ======================================== - * Tool Configuration Modal - * ======================================== */ - -/* Tool item clickable */ -.tool-item.clickable { - cursor: pointer; - transition: all 0.15s ease; -} - -.tool-item.clickable:hover { - background: hsl(var(--accent)); - border-color: hsl(var(--primary) / 0.3); -} - -.tool-item.clickable:hover .tool-config-icon { - opacity: 1; -} - -.tool-config-icon { - margin-left: 0.375rem; - color: hsl(var(--muted-foreground)); - opacity: 0; - transition: opacity 0.15s ease; -} - -/* Tool Config Modal */ -.tool-config-modal { - display: flex; - flex-direction: column; - gap: 1.25rem; -} - -.tool-config-section { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.tool-config-section h4 { - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.025em; - color: hsl(var(--muted-foreground)); - margin: 0; -} - -.tool-config-section h4 .text-muted { - font-weight: 400; - text-transform: none; - color: hsl(var(--muted-foreground) / 0.7); -} - -/* Status Badges */ -.tool-config-badges { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; -} - -.badge { - display: inline-flex; - align-items: center; - gap: 0.25rem; - padding: 0.25rem 0.5rem; - font-size: 0.6875rem; - font-weight: 500; - border-radius: 9999px; -} - -.badge-success { - background: hsl(var(--success) / 0.15); - color: hsl(var(--success)); -} - -.badge-primary { - background: hsl(var(--primary) / 0.15); - color: hsl(var(--primary)); -} - -.badge-muted { - background: hsl(var(--muted)); - color: hsl(var(--muted-foreground)); -} - -/* Config Actions */ -.tool-config-actions { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; -} - -.btn-danger-outline { - border-color: hsl(var(--destructive) / 0.5); - color: hsl(var(--destructive)); -} - -.btn-danger-outline:hover { - background: hsl(var(--destructive) / 0.1); - border-color: hsl(var(--destructive)); -} - -/* Config Selects and Inputs */ -.tool-config-select, -.tool-config-input { - width: 100%; - padding: 0.5rem 0.75rem; - font-size: 0.8125rem; - font-family: inherit; - border: 1px solid hsl(var(--border)); - border-radius: 0.375rem; - background: hsl(var(--background)); - color: hsl(var(--foreground)); - transition: border-color 0.15s ease, box-shadow 0.15s ease; -} - -.tool-config-select:focus, -.tool-config-input:focus { - outline: none; - border-color: hsl(var(--primary)); - box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2); -} - -.tool-config-select { - cursor: pointer; - appearance: none; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 0.5rem center; - background-repeat: no-repeat; - background-size: 1.25rem; - padding-right: 2rem; -} - -.tool-config-input.hidden { - display: none; -} - -.tool-config-input { - margin-top: 0.375rem; -} - -/* Config Footer */ -.tool-config-footer { - display: flex; - justify-content: flex-end; - gap: 0.75rem; - padding-top: 1rem; - border-top: 1px solid hsl(var(--border)); - margin-top: 0.5rem; -} - -.tool-config-footer .btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.375rem; - padding: 0.5rem 1rem; - font-size: 0.8125rem; - font-weight: 500; - border-radius: 0.375rem; - cursor: pointer; - transition: all 0.15s ease; -} - -.tool-config-footer .btn-outline { - background: transparent; - border: 1px solid hsl(var(--border)); - color: hsl(var(--foreground)); -} - -.tool-config-footer .btn-outline:hover { - background: hsl(var(--muted)); - border-color: hsl(var(--muted-foreground) / 0.3); -} - -.tool-config-footer .btn-primary { - background: hsl(var(--primary)); - border: 1px solid hsl(var(--primary)); - color: hsl(var(--primary-foreground)); -} - -.tool-config-footer .btn-primary:hover { - background: hsl(var(--primary) / 0.9); -} - -/* Model Select Group */ -.model-select-group { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.model-select-group .tool-config-input { - margin-top: 0; -} - -.btn-ghost.text-destructive:hover { - background: hsl(var(--destructive) / 0.1); -} - -/* ======================================== - * Semantic Metadata Viewer Styles - * ======================================== */ -.semantic-viewer-toolbar { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.75rem 1rem; - background: hsl(var(--muted) / 0.3); - border-bottom: 1px solid hsl(var(--border)); -} - -.semantic-table-container { - max-height: 400px; - overflow-y: auto; -} - -.semantic-table { - width: 100%; - border-collapse: collapse; - font-size: 0.8125rem; -} - -.semantic-table th { - position: sticky; - top: 0; - background: hsl(var(--card)); - padding: 0.625rem 0.75rem; - text-align: left; - font-weight: 600; - font-size: 0.75rem; - color: hsl(var(--muted-foreground)); - border-bottom: 1px solid hsl(var(--border)); - white-space: nowrap; -} - -.semantic-table td { - padding: 0.625rem 0.75rem; - border-bottom: 1px solid hsl(var(--border) / 0.5); - vertical-align: top; -} - -.semantic-row { - cursor: pointer; - transition: background 0.15s ease; -} - -.semantic-row:hover { - background: hsl(var(--hover)); -} - -.semantic-cell-file { - max-width: 200px; -} - -.semantic-cell-lang { - width: 80px; - color: hsl(var(--muted-foreground)); -} - -.semantic-cell-purpose { - max-width: 180px; - color: hsl(var(--foreground) / 0.8); -} - -.semantic-cell-keywords { - max-width: 160px; -} - -.semantic-cell-tool { - width: 70px; -} - -.semantic-cell-date { - width: 80px; - color: hsl(var(--muted-foreground)); - font-size: 0.75rem; -} - -.semantic-keyword { - display: inline-block; - padding: 0.125rem 0.375rem; - margin: 0.125rem; - background: hsl(var(--primary) / 0.1); - color: hsl(var(--primary)); - border-radius: 0.25rem; - font-size: 0.6875rem; -} - -.semantic-keyword-more { - display: inline-block; - padding: 0.125rem 0.375rem; - margin: 0.125rem; - background: hsl(var(--muted)); - color: hsl(var(--muted-foreground)); - border-radius: 0.25rem; - font-size: 0.6875rem; -} - -.tool-badge { - display: inline-block; - padding: 0.125rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.6875rem; - font-weight: 500; - text-transform: capitalize; -} - -.tool-badge.tool-gemini { - background: hsl(210 80% 55% / 0.15); - color: hsl(210 80% 45%); -} - -.tool-badge.tool-qwen { - background: hsl(142 76% 36% / 0.15); - color: hsl(142 76% 36%); -} - -.tool-badge.tool-unknown { - background: hsl(var(--muted)); - color: hsl(var(--muted-foreground)); -} - -.semantic-detail-row { - background: hsl(var(--muted) / 0.2); -} - -.semantic-detail-row.hidden { - display: none; -} - -.semantic-detail-content { - padding: 1rem; -} - -.semantic-detail-section { - margin-bottom: 1rem; -} - -.semantic-detail-section h4 { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.75rem; - font-weight: 600; - color: hsl(var(--muted-foreground)); - margin-bottom: 0.5rem; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.semantic-detail-section p { - font-size: 0.8125rem; - line-height: 1.5; - color: hsl(var(--foreground)); -} - -.semantic-keywords-full { - display: flex; - flex-wrap: wrap; - gap: 0.25rem; -} - -.semantic-detail-meta { - display: flex; - gap: 1rem; - padding-top: 0.75rem; - border-top: 1px solid hsl(var(--border) / 0.5); - font-size: 0.75rem; - color: hsl(var(--muted-foreground)); -} - -.semantic-detail-meta span { - display: flex; - align-items: center; - gap: 0.375rem; -} - -.semantic-viewer-footer { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.75rem 1rem; - background: hsl(var(--muted) / 0.3); - border-top: 1px solid hsl(var(--border)); -} - -.semantic-loading, -.semantic-empty { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 3rem; - text-align: center; - color: hsl(var(--muted-foreground)); -} - -.semantic-loading { - gap: 1rem; -} diff --git a/ccw/src/templates/dashboard-css/11-cli-history.css b/ccw/src/templates/dashboard-css/11-cli-history.css new file mode 100644 index 00000000..5be40f4f --- /dev/null +++ b/ccw/src/templates/dashboard-css/11-cli-history.css @@ -0,0 +1,271 @@ +/* ======================================== + * History View Styles + * ======================================== */ +.history-view { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +.history-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 0; + margin-bottom: 1rem; + border-bottom: 1px solid hsl(var(--border)); +} + +.history-header-left { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.history-count { + font-size: 0.8125rem; + color: hsl(var(--muted-foreground)); +} + +.history-header-right { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.history-search-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.history-search-wrapper i { + position: absolute; + left: 0.625rem; + color: hsl(var(--muted-foreground)); + pointer-events: none; +} + +.history-search-input { + padding: 0.5rem 0.75rem 0.5rem 2rem; + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + background: hsl(var(--background)); + color: hsl(var(--foreground)); + font-size: 0.8125rem; + width: 220px; + transition: all 0.2s ease; +} + +.history-search-input:focus { + outline: none; + border-color: hsl(var(--primary)); + box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); + width: 260px; +} + +.history-search-input::placeholder { + color: hsl(var(--muted-foreground) / 0.7); +} + +.history-filter-select { + padding: 0.5rem 0.75rem; + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + background: hsl(var(--background)); + color: hsl(var(--foreground)); + font-size: 0.8125rem; + cursor: pointer; + transition: all 0.2s ease; +} + +.history-filter-select:hover { + border-color: hsl(var(--primary) / 0.5); +} + +.history-filter-select:focus { + outline: none; + border-color: hsl(var(--primary)); +} + +/* History List */ +.history-list { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.history-item { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: 1rem; + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + cursor: pointer; + transition: all 0.15s ease; +} + +.history-item:hover { + background: hsl(var(--hover)); + border-color: hsl(var(--primary) / 0.3); + box-shadow: 0 2px 8px hsl(var(--foreground) / 0.05); +} + +.history-item:hover .history-item-actions { + opacity: 1; +} + +.history-item-main { + flex: 1; + min-width: 0; +} + +.history-item-header { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.5rem; + flex-wrap: wrap; +} + +.history-tool-tag { + font-size: 0.625rem; + font-weight: 600; + padding: 0.1875rem 0.5rem; + border-radius: 9999px; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.history-tool-tag.tool-gemini { + background: hsl(210 80% 55% / 0.12); + color: hsl(210 80% 45%); +} + +.history-tool-tag.tool-qwen { + background: hsl(280 70% 55% / 0.12); + color: hsl(280 70% 45%); +} + +.history-tool-tag.tool-codex { + background: hsl(142 71% 45% / 0.12); + color: hsl(142 71% 35%); +} + +.history-tool-tag.tool-claude { + background: hsl(25 90% 50% / 0.12); + color: hsl(25 90% 40%); +} + +.history-mode-tag { + font-size: 0.625rem; + font-weight: 500; + padding: 0.1875rem 0.5rem; + background: hsl(var(--muted)); + color: hsl(var(--muted-foreground)); + border-radius: 0.25rem; +} + +.history-source-dir { + font-size: 0.625rem; + font-weight: 500; + padding: 0.1875rem 0.5rem; + background: hsl(var(--accent)); + color: hsl(var(--accent-foreground)); + border-radius: 0.25rem; + display: inline-flex; + align-items: center; + gap: 0.25rem; + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.history-status { + display: flex; + align-items: center; + gap: 0.25rem; + font-size: 0.625rem; + font-weight: 500; + padding: 0.1875rem 0.5rem; + border-radius: 9999px; +} + +.history-status.success { + background: hsl(var(--success) / 0.12); + color: hsl(var(--success)); +} + +.history-status.warning { + background: hsl(var(--warning) / 0.12); + color: hsl(var(--warning)); +} + +.history-status.error { + background: hsl(var(--destructive) / 0.12); + color: hsl(var(--destructive)); +} + +.history-item-prompt { + font-size: 0.875rem; + font-weight: 450; + color: hsl(var(--foreground)); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + line-height: 1.5; + margin-bottom: 0.5rem; +} + +.history-item-meta { + display: flex; + align-items: center; + gap: 1rem; + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); +} + +.history-item-meta span { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.history-item-actions { + display: flex; + align-items: center; + gap: 0.25rem; + opacity: 0; + transition: opacity 0.15s ease; + margin-left: 0.75rem; +} + +/* History Empty State */ +.history-empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 4rem 2rem; + text-align: center; + color: hsl(var(--muted-foreground)); +} + +.history-empty-state i { + opacity: 0.3; + margin-bottom: 1rem; +} + +.history-empty-state h3 { + font-size: 1rem; + font-weight: 600; + color: hsl(var(--foreground)); + margin-bottom: 0.5rem; +} + +.history-empty-state p { + font-size: 0.8125rem; +} + diff --git a/ccw/src/templates/dashboard-css/12-cli-legacy.css b/ccw/src/templates/dashboard-css/12-cli-legacy.css new file mode 100644 index 00000000..72af2b7d --- /dev/null +++ b/ccw/src/templates/dashboard-css/12-cli-legacy.css @@ -0,0 +1,796 @@ +/* ======================================== + * Legacy Container Styles (kept for compatibility) + * ======================================== */ + +/* Container */ +.cli-manager-container { + display: flex; + flex-direction: column; + gap: 1.25rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +.cli-manager-grid { + display: grid; + grid-template-columns: 1.2fr 0.8fr; + gap: 1.25rem; + align-items: start; +} + +@media (max-width: 768px) { + .cli-manager-grid { + grid-template-columns: 1fr; + } +} + +/* Panels */ +.cli-panel { + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-radius: 0.75rem; + overflow: hidden; + box-shadow: 0 1px 3px hsl(var(--foreground) / 0.04); + transition: box-shadow 0.2s ease; +} + +.cli-panel:hover { + box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08); +} + +.cli-panel-full { + grid-column: 1 / -1; +} + +/* Status Panel */ +.cli-status-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.625rem 0.75rem; + border-bottom: 1px solid hsl(var(--border)); + background: hsl(var(--muted) / 0.3); +} + +.cli-status-header h3 { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.8125rem; + font-weight: 600; + color: hsl(var(--foreground)); + margin: 0; + letter-spacing: -0.01em; +} + +.cli-status-header h3 i { + color: hsl(var(--muted-foreground)); +} + +.cli-tools-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 0.5rem; + padding: 0.5rem 0.625rem; +} + +.cli-tool-card { + padding: 0.625rem 0.5rem; + border-radius: 0.5rem; + background: hsl(var(--background)); + text-align: center; + border: 1.5px solid hsl(var(--border)); + transition: all 0.2s ease; +} + +.cli-tool-card.available { + background: hsl(var(--background)); +} + +.cli-tool-card.available:hover { + box-shadow: 0 2px 8px hsl(var(--foreground) / 0.08); +} + +/* Tool-specific border colors */ +.cli-tool-card.tool-gemini.available { + border-color: hsl(210 80% 55% / 0.5); +} + +.cli-tool-card.tool-gemini.available:hover { + border-color: hsl(210 80% 55% / 0.7); +} + +.cli-tool-card.tool-qwen.available { + border-color: hsl(280 70% 55% / 0.5); +} + +.cli-tool-card.tool-qwen.available:hover { + border-color: hsl(280 70% 55% / 0.7); +} + +.cli-tool-card.tool-codex.available { + border-color: hsl(142 71% 45% / 0.5); +} + +.cli-tool-card.tool-codex.available:hover { + border-color: hsl(142 71% 45% / 0.7); +} + +.cli-tool-card.tool-claude.available { + border-color: hsl(25 90% 50% / 0.5); +} + +.cli-tool-card.tool-claude.available:hover { + border-color: hsl(25 90% 50% / 0.7); +} + +.cli-tool-card.unavailable { + border-color: hsl(var(--border)); + opacity: 0.6; +} + +.cli-tool-header { + display: flex; + align-items: center; + justify-content: center; + gap: 0.375rem; + margin-bottom: 0.1875rem; +} + +.cli-tool-status { + width: 8px; + height: 8px; + border-radius: 50%; + flex-shrink: 0; +} + +.cli-tool-status.status-available { + background: hsl(var(--success)); + box-shadow: 0 0 6px hsl(var(--success) / 0.5); +} + +.cli-tool-status.status-unavailable { + background: hsl(var(--muted-foreground) / 0.5); +} + +.cli-tool-name { + font-weight: 600; + font-size: 0.8125rem; + color: hsl(var(--foreground)); + letter-spacing: -0.01em; +} + +.cli-tool-badge { + font-size: 0.5625rem; + font-weight: 600; + padding: 0.125rem 0.375rem; + background: hsl(var(--primary)); + color: hsl(var(--primary-foreground)); + border-radius: 9999px; + text-transform: uppercase; + letter-spacing: 0.03em; +} + +.cli-tool-info { + font-size: 0.6875rem; + margin-bottom: 0.3125rem; + color: hsl(var(--muted-foreground)); +} + +.cli-tool-info .text-success { + color: hsl(var(--success)); + font-weight: 500; +} + +/* CLI Tool Description */ +.cli-tool-desc { + font-size: 0.625rem; + color: hsl(var(--muted-foreground) / 0.8); + line-height: 1.3; +} + +/* CLI Tool Actions */ +.cli-tool-actions { + min-height: 1.75rem; +} + +/* CodexLens specific styles */ +.cli-tool-card.tool-codexlens.available { + border-color: hsl(35 90% 50% / 0.5); +} + +.cli-tool-card.tool-codexlens.available:hover { + border-color: hsl(35 90% 50% / 0.7); +} + +/* Semantic Search specific styles */ +.cli-tool-card.tool-semantic.available { + border-color: hsl(260 80% 60% / 0.5); +} + +.cli-tool-card.tool-semantic.available:hover { + border-color: hsl(260 80% 60% / 0.7); +} + +.cli-tool-card.tool-semantic.clickable { + cursor: pointer; +} + +.cli-tool-card.tool-semantic.clickable:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px hsl(260 80% 60% / 0.15); +} + +/* Execute Panel */ +.cli-execute-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem; + border-bottom: 1px solid hsl(var(--border)); +} + +.cli-execute-header h3 { + font-size: 0.875rem; + font-weight: 600; + color: hsl(var(--foreground)); + margin: 0; +} + +.cli-execute-form { + padding: 1rem; +} + +.cli-execute-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.75rem; + margin-bottom: 0.75rem; +} + +.cli-form-group { + display: flex; + flex-direction: column; + gap: 0.375rem; +} + +.cli-form-group label { + font-size: 0.75rem; + font-weight: 500; + color: hsl(var(--muted-foreground)); +} + +.cli-select, +.cli-textarea { + padding: 0.5rem; + border: 1px solid hsl(var(--border)); + border-radius: 0.375rem; + background: hsl(var(--background)); + color: hsl(var(--foreground)); + font-size: 0.875rem; +} + +.cli-textarea { + min-height: 80px; + resize: vertical; + font-family: monospace; +} + +.cli-select:focus, +.cli-textarea:focus { + outline: none; + border-color: hsl(var(--primary)); + box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2); +} + +.cli-execute-actions { + display: flex; + justify-content: flex-end; + margin-top: 0.75rem; +} + +/* History Panel */ +.cli-history-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.875rem 1rem; + border-bottom: 1px solid hsl(var(--border)); + background: hsl(var(--muted) / 0.3); +} + +.cli-history-header h3 { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.8125rem; + font-weight: 600; + color: hsl(var(--foreground)); + margin: 0; + letter-spacing: -0.01em; +} + +.cli-history-header h3 i { + color: hsl(var(--muted-foreground)); +} + +.cli-history-controls { + display: flex; + align-items: center; + gap: 0.5rem; +} + +/* Search Input for History */ +.cli-history-search { + padding: 0.375rem 0.625rem; + border: 1px solid hsl(var(--border)); + border-radius: 0.375rem; + background: hsl(var(--background)); + color: hsl(var(--foreground)); + font-size: 0.75rem; + width: 160px; + transition: all 0.2s ease; +} + +.cli-history-search:focus { + outline: none; + border-color: hsl(var(--primary)); + box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); + width: 200px; +} + +.cli-history-search::placeholder { + color: hsl(var(--muted-foreground) / 0.7); +} + +.cli-tool-filter { + padding: 0.375rem 0.625rem; + border: 1px solid hsl(var(--border)); + border-radius: 0.375rem; + background: hsl(var(--background)); + color: hsl(var(--foreground)); + font-size: 0.75rem; + cursor: pointer; + transition: all 0.2s ease; +} + +.cli-tool-filter:hover { + border-color: hsl(var(--primary) / 0.5); +} + +.cli-tool-filter:focus { + outline: none; + border-color: hsl(var(--primary)); +} + +.cli-history-list { + max-height: 450px; + overflow-y: auto; +} + +.cli-history-item { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: 0.75rem 1rem; + border-bottom: 1px solid hsl(var(--border) / 0.5); + cursor: pointer; + transition: all 0.15s ease; +} + +.cli-history-item:hover { + background: hsl(var(--hover)); +} + +.cli-history-item:hover .cli-history-actions { + opacity: 1; +} + +.cli-history-item:last-child { + border-bottom: none; +} + +.cli-history-item-content { + flex: 1; + min-width: 0; +} + +.cli-history-item-header { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.375rem; +} + +.cli-tool-tag { + font-size: 0.5625rem; + font-weight: 600; + padding: 0.125rem 0.5rem; + border-radius: 9999px; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.cli-tool-gemini { + background: hsl(210 80% 55% / 0.12); + color: hsl(210 80% 45%); +} + +.cli-tool-qwen { + background: hsl(280 70% 55% / 0.12); + color: hsl(280 70% 45%); +} + +.cli-tool-codex { + background: hsl(142 71% 45% / 0.12); + color: hsl(142 71% 35%); +} + +.cli-tool-claude { + background: hsl(25 90% 50% / 0.12); + color: hsl(25 90% 40%); +} + +.cli-history-time { + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); +} + +.cli-history-prompt { + font-size: 0.8125rem; + font-weight: 450; + color: hsl(var(--foreground)); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + line-height: 1.4; +} + +.cli-history-meta { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 0.6875rem; + margin-top: 0.25rem; + color: hsl(var(--muted-foreground)); +} + +/* History Item Actions */ +.cli-history-actions { + display: flex; + align-items: center; + gap: 0.25rem; + opacity: 0; + transition: opacity 0.15s ease; + margin-left: 0.5rem; +} + +.cli-history-actions .btn-icon { + padding: 0.25rem; + color: hsl(var(--muted-foreground)); +} + +.cli-history-actions .btn-icon:hover { + color: hsl(var(--foreground)); + background: hsl(var(--hover)); +} + +.cli-history-actions .btn-icon.btn-danger:hover { + color: hsl(var(--destructive)); + background: hsl(var(--destructive) / 0.1); +} + +/* Output Panel */ +.cli-output-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem; + border-bottom: 1px solid hsl(var(--border)); +} + +.cli-output-header h3 { + font-size: 0.875rem; + font-weight: 600; + color: hsl(var(--foreground)); + margin: 0; +} + +.cli-output-status { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.status-indicator { + width: 8px; + height: 8px; + border-radius: 50%; +} + +.status-indicator.running { + background: hsl(var(--warning)); + animation: pulse 1.5s infinite; +} + +.status-indicator.success { + background: hsl(var(--success)); +} + +.status-indicator.error { + background: hsl(var(--destructive)); +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +.cli-output-content { + padding: 1rem; + background: hsl(var(--muted)); + font-family: monospace; + font-size: 0.75rem; + color: hsl(var(--foreground)); + max-height: 300px; + overflow-y: auto; + white-space: pre-wrap; + word-wrap: break-word; + margin: 0; +} + +/* Detail Modal */ +.cli-detail-header { + margin-bottom: 1.25rem; + padding-bottom: 1rem; + border-bottom: 1px solid hsl(var(--border)); +} + +.cli-detail-info { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.625rem; + flex-wrap: wrap; +} + +.cli-detail-status { + font-size: 0.6875rem; + font-weight: 600; + padding: 0.25rem 0.625rem; + border-radius: 9999px; + text-transform: uppercase; + letter-spacing: 0.03em; +} + +.cli-detail-status.status-success { + background: hsl(var(--success) / 0.12); + color: hsl(var(--success)); +} + +.cli-detail-status.status-error { + background: hsl(var(--destructive) / 0.12); + color: hsl(var(--destructive)); +} + +.cli-detail-status.status-timeout { + background: hsl(var(--warning) / 0.12); + color: hsl(var(--warning)); +} + +.cli-detail-meta { + display: flex; + gap: 1.25rem; + font-size: 0.75rem; + color: hsl(var(--muted-foreground)); + flex-wrap: wrap; +} + +.cli-detail-meta span { + display: flex; + align-items: center; + gap: 0.375rem; +} + +.cli-detail-section { + margin-bottom: 1.25rem; +} + +.cli-detail-section h4 { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.75rem; + font-weight: 600; + color: hsl(var(--foreground)); + margin-bottom: 0.625rem; + text-transform: uppercase; + letter-spacing: 0.03em; +} + +.cli-detail-section h4 i { + width: 14px; + height: 14px; + color: hsl(var(--muted-foreground)); +} + +.cli-detail-prompt { + padding: 1rem; + background: hsl(var(--muted) / 0.5); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; + font-size: 0.75rem; + line-height: 1.6; + white-space: pre-wrap; + word-wrap: break-word; + max-height: 200px; + overflow-y: auto; + color: hsl(var(--foreground)); +} + +.cli-detail-output { + padding: 1rem; + background: hsl(var(--muted) / 0.5); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; + font-size: 0.75rem; + line-height: 1.6; + white-space: pre-wrap; + word-wrap: break-word; + max-height: 350px; + overflow-y: auto; + color: hsl(var(--foreground)); +} + +.cli-detail-error { + padding: 1rem; + background: hsl(var(--destructive) / 0.08); + border: 1px solid hsl(var(--destructive) / 0.2); + border-radius: 0.5rem; + font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; + font-size: 0.75rem; + line-height: 1.6; + color: hsl(var(--destructive)); + white-space: pre-wrap; + word-wrap: break-word; + max-height: 180px; + overflow-y: auto; +} + +/* Detail Actions */ +.cli-detail-actions { + display: flex; + justify-content: flex-end; + gap: 0.5rem; + margin-top: 1.5rem; + padding-top: 1rem; + border-top: 1px solid hsl(var(--border)); +} + +/* Button Styles */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.375rem; + padding: 0.5rem 1rem; + border: none; + border-radius: 0.375rem; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; + transition: all 0.15s ease; +} + +.btn-primary { + background: hsl(var(--primary)); + color: hsl(var(--primary-foreground)); +} + +.btn-primary:hover:not(:disabled) { + opacity: 0.9; +} + +.btn-primary:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.btn-icon { + padding: 0.375rem; + background: transparent; + border: none; + color: hsl(var(--muted-foreground)); + cursor: pointer; + border-radius: 0.25rem; + transition: all 0.15s ease; +} + +.btn-icon:hover { + background: hsl(var(--hover)); + color: hsl(var(--foreground)); +} + +.btn-sm { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.25rem; + padding: 0.375rem 0.625rem; + font-size: 0.75rem; + font-weight: 500; + border-radius: 0.375rem; + border: 1px solid hsl(var(--border)); + background: hsl(var(--background)); + color: hsl(var(--foreground)); + cursor: pointer; + transition: all 0.15s ease; + white-space: nowrap; +} + +.btn-sm:hover { + background: hsl(var(--hover)); + border-color: hsl(var(--primary) / 0.3); +} + +.btn-sm.btn-primary { + background: hsl(var(--primary)); + color: hsl(var(--primary-foreground)); + border-color: hsl(var(--primary)); +} + +.btn-sm.btn-primary:hover { + opacity: 0.9; +} + +.btn-sm.btn-outline { + background: transparent; + border-color: hsl(var(--border)); +} + +.btn-sm.btn-outline:hover { + background: hsl(var(--hover)); +} + +.btn-outline { + background: transparent; + border: 1px solid hsl(var(--border)); + color: hsl(var(--foreground)); +} + +.btn-outline:hover { + background: hsl(var(--hover)); +} + +.btn-outline.btn-danger { + border-color: hsl(var(--destructive) / 0.3); + color: hsl(var(--destructive)); +} + +.btn-outline.btn-danger:hover { + background: hsl(var(--destructive) / 0.1); + border-color: hsl(var(--destructive) / 0.5); +} + +/* Empty State */ +.empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem; + color: hsl(var(--muted-foreground)); +} + +.empty-state svg { + width: 2rem; + height: 2rem; + margin-bottom: 0.5rem; + opacity: 0.5; +} + +.empty-state p { + font-size: 0.875rem; +} + diff --git a/ccw/src/templates/dashboard-css/13-cli-ccw.css b/ccw/src/templates/dashboard-css/13-cli-ccw.css new file mode 100644 index 00000000..f94426ec --- /dev/null +++ b/ccw/src/templates/dashboard-css/13-cli-ccw.css @@ -0,0 +1,199 @@ +/* ======================================== + * CCW Installation Panel Styles + * ======================================== */ + +/* CCW Header Actions */ +.ccw-header-actions { + display: flex; + align-items: center; + gap: 0.25rem; +} + +/* CCW Install Content */ +.ccw-install-content { + padding: 0.5rem 0.625rem; +} + +/* CCW Empty State */ +.ccw-empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 2rem 1rem; + text-align: center; + color: hsl(var(--muted-foreground)); +} + +.ccw-empty-state i { + opacity: 0.4; + margin-bottom: 0.75rem; +} + +.ccw-empty-state p { + font-size: 0.8125rem; + margin-bottom: 1rem; +} + +/* ======================================== + * CCW Carousel Styles + * ======================================== */ +.ccw-carousel-wrapper { + position: relative; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.ccw-carousel-track { + display: flex; + flex: 1; + overflow: hidden; + transition: transform 0.3s ease; +} + +.ccw-carousel-card { + flex: 0 0 100%; + min-width: 0; + padding: 0.625rem 0.75rem; + background: hsl(var(--background)); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + transition: all 0.2s ease; +} + +.ccw-carousel-card.active { + border-color: hsl(var(--primary) / 0.4); + box-shadow: 0 2px 8px hsl(var(--primary) / 0.1); +} + +/* Carousel Card Header */ +.ccw-card-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0.375rem; +} + +.ccw-card-header-right { + display: flex; + align-items: center; + gap: 0.375rem; +} + +.ccw-card-mode { + display: flex; + align-items: center; + gap: 0.375rem; + font-weight: 600; + font-size: 0.8125rem; + color: hsl(var(--foreground)); +} + +.btn-icon-sm { + padding: 0.25rem; +} + +.ccw-card-mode.global { + color: hsl(var(--primary)); +} + +.ccw-card-mode.path { + color: hsl(var(--warning)); +} + +.ccw-version-tag { + font-size: 0.625rem; + font-weight: 600; + padding: 0.25rem 0.5rem; + background: hsl(var(--primary) / 0.1); + color: hsl(var(--primary)); + border-radius: 9999px; + letter-spacing: 0.02em; +} + +/* Carousel Card Path */ +.ccw-card-path { + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); + font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; + background: hsl(var(--muted) / 0.5); + padding: 0.3125rem 0.5rem; + border-radius: 0.375rem; + margin-bottom: 0.375rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Carousel Card Meta */ +.ccw-card-meta { + display: flex; + gap: 0.75rem; + font-size: 0.625rem; + color: hsl(var(--muted-foreground)); +} + +.ccw-card-meta span { + display: flex; + align-items: center; + gap: 0.25rem; +} + +/* Carousel Card Actions - moved to header */ + +/* Carousel Navigation Buttons */ +.ccw-carousel-btn { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + flex-shrink: 0; + background: hsl(var(--background)); + border: 1px solid hsl(var(--border)); + border-radius: 50%; + color: hsl(var(--muted-foreground)); + cursor: pointer; + transition: all 0.15s ease; +} + +.ccw-carousel-btn:hover { + background: hsl(var(--hover)); + color: hsl(var(--foreground)); + border-color: hsl(var(--primary) / 0.3); +} + +.ccw-carousel-btn:disabled { + opacity: 0.3; + cursor: not-allowed; +} + +/* Carousel Dots */ +.ccw-carousel-dots { + display: flex; + justify-content: center; + gap: 0.5rem; + margin-top: 0.5rem; +} + +.ccw-carousel-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: hsl(var(--muted-foreground) / 0.3); + border: none; + cursor: pointer; + transition: all 0.2s ease; +} + +.ccw-carousel-dot:hover { + background: hsl(var(--muted-foreground) / 0.5); +} + +.ccw-carousel-dot.active { + background: hsl(var(--primary)); + width: 20px; + border-radius: 4px; +} + diff --git a/ccw/src/templates/dashboard-css/14-cli-modals.css b/ccw/src/templates/dashboard-css/14-cli-modals.css new file mode 100644 index 00000000..30d04057 --- /dev/null +++ b/ccw/src/templates/dashboard-css/14-cli-modals.css @@ -0,0 +1,258 @@ +/* ======================================== + * CCW Install Modal Styles + * ======================================== */ +.ccw-install-modal { + padding: 0.5rem 0; +} + +.ccw-install-options { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.ccw-install-option { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem; + background: hsl(var(--muted) / 0.3); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + cursor: pointer; + transition: all 0.15s ease; +} + +.ccw-install-option:hover { + background: hsl(var(--hover)); + border-color: hsl(var(--primary) / 0.3); +} + +.ccw-option-icon { + display: flex; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; + border-radius: 0.5rem; + flex-shrink: 0; +} + +.ccw-option-icon.global { + background: hsl(var(--primary) / 0.1); + color: hsl(var(--primary)); +} + +.ccw-option-icon.path { + background: hsl(var(--warning) / 0.1); + color: hsl(var(--warning)); +} + +.ccw-option-info { + flex: 1; +} + +.ccw-option-title { + font-weight: 600; + font-size: 0.875rem; + color: hsl(var(--foreground)); + margin-bottom: 0.25rem; +} + +.ccw-option-desc { + font-size: 0.75rem; + color: hsl(var(--muted-foreground)); +} + +/* Path Input Section */ +.ccw-path-input-section { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid hsl(var(--border)); +} + +.ccw-path-input-group { + margin-bottom: 1rem; +} + +.ccw-path-input-group label { + display: block; + font-size: 0.75rem; + font-weight: 500; + color: hsl(var(--muted-foreground)); + margin-bottom: 0.5rem; +} + +.ccw-path-input-group .cli-textarea { + width: 100%; + min-height: auto; + padding: 0.625rem 0.75rem; + font-size: 0.8125rem; +} + +.ccw-install-action { + display: flex; + justify-content: flex-end; +} + +/* Danger Button (icon style - subtle) */ +.btn-icon.btn-danger { + color: hsl(var(--muted-foreground)); + background: transparent; +} + +.btn-icon.btn-danger:hover { + color: hsl(var(--destructive)); + background: hsl(var(--destructive) / 0.1); +} + +/* ======================================== + * Generic Modal Styles + * ======================================== */ +.generic-modal-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(2px); + display: flex; + align-items: center; + justify-content: center; + z-index: 100; + opacity: 0; + transition: opacity 0.2s ease; +} + +.generic-modal-overlay.active { + opacity: 1; +} + +.generic-modal { + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-radius: 0.75rem; + width: 90%; + max-width: 600px; + max-height: 85vh; + display: flex; + flex-direction: column; + box-shadow: 0 8px 32px rgb(0 0 0 / 0.25); + transform: scale(0.95); + transition: transform 0.2s ease; +} + +.generic-modal-overlay.active .generic-modal { + transform: scale(1); +} + +.generic-modal.large { + max-width: 800px; +} + +.generic-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1.25rem; + border-bottom: 1px solid hsl(var(--border)); + background: hsl(var(--muted) / 0.3); + border-radius: 0.75rem 0.75rem 0 0; +} + +.generic-modal-title { + font-size: 0.9375rem; + font-weight: 600; + color: hsl(var(--foreground)); + margin: 0; +} + +.generic-modal-close { + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + font-size: 1.25rem; + color: hsl(var(--muted-foreground)); + cursor: pointer; + border-radius: 0.375rem; + transition: all 0.15s ease; +} + +.generic-modal-close:hover { + background: hsl(var(--hover)); + color: hsl(var(--foreground)); +} + +.generic-modal-body { + flex: 1; + overflow-y: auto; + padding: 1.25rem; +} + +.generic-modal.lg { + max-width: 640px; +} + +/* ======================================== + * Modal Aliases (for backward compatibility) + * ======================================== */ +.modal-backdrop { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(2px); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + opacity: 1; + transition: opacity 0.2s ease; +} + +.modal-container { + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-radius: 0.75rem; + width: 90%; + max-width: 600px; + max-height: 85vh; + display: flex; + flex-direction: column; + box-shadow: 0 8px 32px rgb(0 0 0 / 0.25); + transform: scale(1); + transition: transform 0.2s ease; +} + +.modal-container.large { + max-width: 800px; +} + +.modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1.25rem; + border-bottom: 1px solid hsl(var(--border)); + background: hsl(var(--muted) / 0.3); + border-radius: 0.75rem 0.75rem 0 0; +} + +.modal-icon { + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + background: hsl(var(--primary-light)); + border-radius: 0.5rem; + color: hsl(var(--primary)); +} + +.modal-body { + flex: 1; + overflow-y: auto; + padding: 1.25rem; +} + diff --git a/ccw/src/templates/dashboard-css/15-cli-endpoints.css b/ccw/src/templates/dashboard-css/15-cli-endpoints.css new file mode 100644 index 00000000..1c49f9ab --- /dev/null +++ b/ccw/src/templates/dashboard-css/15-cli-endpoints.css @@ -0,0 +1,305 @@ +/* ======================================== + * Endpoint Tools Grid Styles + * ======================================== */ +.endpoint-tools-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 0.75rem; + padding: 0.75rem; +} + +.endpoint-tool-card { + display: flex; + flex-direction: column; + padding: 0.875rem; + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + cursor: pointer; + transition: all 0.2s ease; + min-height: 100px; +} + +.endpoint-tool-card:hover { + background: hsl(var(--hover)); + border-color: hsl(var(--indigo) / 0.5); + box-shadow: 0 2px 8px hsl(var(--indigo) / 0.1); + transform: translateY(-1px); +} + +.endpoint-tool-header { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.5rem; +} + +.endpoint-tool-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: hsl(var(--indigo)); + box-shadow: 0 0 6px hsl(var(--indigo) / 0.5); + flex-shrink: 0; +} + +.endpoint-tool-name { + font-size: 0.75rem; + font-weight: 600; + color: hsl(var(--foreground)); + font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.endpoint-tool-desc { + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); + line-height: 1.4; + flex: 1; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + margin-bottom: 0.5rem; +} + +.endpoint-tool-meta { + display: flex; + align-items: center; + gap: 0.5rem; + margin-top: auto; +} + +.endpoint-tool-params { + display: flex; + align-items: center; + gap: 0.25rem; + font-size: 0.625rem; + color: hsl(var(--muted-foreground)); + background: hsl(var(--muted) / 0.5); + padding: 0.1875rem 0.375rem; + border-radius: 0.25rem; +} + +.endpoint-tool-required { + font-size: 0.5625rem; + color: hsl(var(--warning)); + background: hsl(var(--warning) / 0.1); + padding: 0.125rem 0.375rem; + border-radius: 9999px; + font-weight: 500; +} + +/* ======================================== + * Tool Detail Modal Styles + * ======================================== */ +.tool-detail-modal { + padding: 0.5rem 0; +} + +.tool-detail-header { + display: flex; + align-items: flex-start; + gap: 1rem; + margin-bottom: 1rem; + padding-bottom: 1rem; + border-bottom: 1px solid hsl(var(--border)); +} + +.tool-detail-icon { + display: flex; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; + background: hsl(var(--indigo) / 0.1); + color: hsl(var(--indigo)); + border-radius: 0.5rem; + flex-shrink: 0; +} + +.tool-detail-title h3 { + font-size: 1rem; + font-weight: 600; + color: hsl(var(--foreground)); + margin: 0 0 0.375rem 0; + font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; +} + +.tool-detail-badge { + font-size: 0.625rem; + font-weight: 500; + padding: 0.1875rem 0.5rem; + background: hsl(var(--indigo) / 0.1); + color: hsl(var(--indigo)); + border-radius: 9999px; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.tool-detail-desc { + font-size: 0.8125rem; + color: hsl(var(--muted-foreground)); + line-height: 1.6; + margin-bottom: 1.25rem; +} + +.tool-detail-params h4, +.tool-detail-usage h4 { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.75rem; + font-weight: 600; + color: hsl(var(--foreground)); + margin: 0 0 0.75rem 0; + text-transform: uppercase; + letter-spacing: 0.03em; +} + +.tool-detail-params h4 i, +.tool-detail-usage h4 i { + color: hsl(var(--muted-foreground)); +} + +.tool-params-list { + display: flex; + flex-direction: column; + gap: 0.75rem; + max-height: 280px; + overflow-y: auto; + padding-right: 0.5rem; +} + +.tool-param-item { + padding: 0.75rem; + background: hsl(var(--muted) / 0.3); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; +} + +.tool-param-header { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.375rem; + flex-wrap: wrap; +} + +.tool-param-name { + font-size: 0.8125rem; + font-weight: 600; + color: hsl(var(--foreground)); + background: hsl(var(--muted)); + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; +} + +.tool-param-type { + font-size: 0.625rem; + color: hsl(var(--primary)); + background: hsl(var(--primary) / 0.1); + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; +} + +.tool-param-required { + font-size: 0.5625rem; + font-weight: 600; + color: hsl(var(--destructive)); + background: hsl(var(--destructive) / 0.1); + padding: 0.125rem 0.375rem; + border-radius: 9999px; + text-transform: uppercase; +} + +.tool-param-optional { + font-size: 0.5625rem; + font-weight: 500; + color: hsl(var(--muted-foreground)); + background: hsl(var(--muted)); + padding: 0.125rem 0.375rem; + border-radius: 9999px; +} + +.tool-param-desc { + font-size: 0.75rem; + color: hsl(var(--muted-foreground)); + line-height: 1.5; +} + +.tool-param-default, +.tool-param-enum { + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); + margin-top: 0.25rem; +} + +.tool-param-default code, +.tool-param-enum code { + font-size: 0.6875rem; + background: hsl(var(--muted)); + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + color: hsl(var(--foreground)); +} + +.tool-detail-no-params { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1.5rem; + background: hsl(var(--muted) / 0.3); + border: 1px dashed hsl(var(--border)); + border-radius: 0.5rem; + color: hsl(var(--muted-foreground)); + font-size: 0.8125rem; +} + +.tool-detail-usage { + margin-top: 1.25rem; +} + +.tool-usage-code { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem; + background: hsl(var(--muted) / 0.5); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + overflow-x: auto; +} + +.tool-usage-code code { + font-size: 0.75rem; + font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; + color: hsl(var(--foreground)); + white-space: nowrap; + flex: 1; +} + +.tool-copy-btn { + display: flex; + align-items: center; + justify-content: center; + padding: 0.375rem; + background: hsl(var(--background)); + border: 1px solid hsl(var(--border)); + border-radius: 0.25rem; + color: hsl(var(--muted-foreground)); + cursor: pointer; + transition: all 0.15s ease; + flex-shrink: 0; +} + +.tool-copy-btn:hover { + background: hsl(var(--hover)); + color: hsl(var(--foreground)); + border-color: hsl(var(--primary) / 0.3); +} + diff --git a/ccw/src/templates/dashboard-css/16-cli-session.css b/ccw/src/templates/dashboard-css/16-cli-session.css new file mode 100644 index 00000000..716e7907 --- /dev/null +++ b/ccw/src/templates/dashboard-css/16-cli-session.css @@ -0,0 +1,241 @@ +/* ======================================== + * Resume Session Styles + * ======================================== */ + +/* Resume Badge */ +.history-resume-badge { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.1875rem 0.375rem; + background: hsl(var(--primary) / 0.12); + color: hsl(var(--primary)); + border-radius: 0.25rem; + font-size: 0.625rem; +} + +/* Resume Item Highlight */ +.history-item-resume { + border-left: 3px solid hsl(var(--primary) / 0.5); +} + +.history-item-resume:hover { + border-left-color: hsl(var(--primary)); +} + +/* History ID Display */ +.history-id { + font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; + font-size: 0.625rem; + color: hsl(var(--muted-foreground) / 0.7); +} + +/* Resume Button */ +.btn-resume { + color: hsl(var(--primary)); +} + +.btn-resume:hover { + background: hsl(var(--primary) / 0.1); + color: hsl(var(--primary)); +} + +/* Resume Modal */ +.resume-modal p { + font-size: 0.875rem; + color: hsl(var(--muted-foreground)); + margin-bottom: 1rem; +} + +.resume-prompt-input { + width: 100%; + padding: 0.75rem; + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + background: hsl(var(--background)); + color: hsl(var(--foreground)); + font-size: 0.875rem; + font-family: inherit; + resize: vertical; + min-height: 80px; + transition: all 0.2s ease; +} + +.resume-prompt-input:focus { + outline: none; + border-color: hsl(var(--primary)); + box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); +} + +.resume-prompt-input::placeholder { + color: hsl(var(--muted-foreground) / 0.7); +} + +.resume-modal-actions { + display: flex; + justify-content: flex-end; + gap: 0.5rem; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid hsl(var(--border)); +} + +/* ======================================== + * Batch Delete & Multi-Select Styles + * ======================================== */ + +/* Delete Dropdown */ +.history-delete-dropdown { + position: relative; + display: inline-block; +} + +.delete-dropdown-menu { + display: none; + position: absolute; + top: 100%; + right: 0; + z-index: 50; + min-width: 180px; + padding: 0.375rem; + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + box-shadow: 0 4px 16px hsl(var(--foreground) / 0.1); + margin-top: 0.25rem; +} + +.delete-dropdown-menu.show { + display: block; +} + +.delete-dropdown-menu button { + display: flex; + align-items: center; + gap: 0.5rem; + width: 100%; + padding: 0.5rem 0.625rem; + border: none; + background: transparent; + color: hsl(var(--foreground)); + font-size: 0.75rem; + text-align: left; + cursor: pointer; + border-radius: 0.375rem; + transition: all 0.15s ease; +} + +.delete-dropdown-menu button:hover { + background: hsl(var(--hover)); +} + +.delete-dropdown-menu button i { + color: hsl(var(--muted-foreground)); +} + +.delete-dropdown-menu .delete-all-btn { + color: hsl(var(--destructive)); +} + +.delete-dropdown-menu .delete-all-btn i { + color: hsl(var(--destructive)); +} + +.delete-dropdown-menu .delete-all-btn:hover { + background: hsl(var(--destructive) / 0.1); +} + +.dropdown-divider { + height: 1px; + margin: 0.375rem 0; + background: hsl(var(--border)); +} + +/* Batch Actions Bar */ +.history-batch-actions { + display: flex; + align-items: center; + gap: 0.625rem; + padding: 0.75rem 1rem; + background: hsl(var(--primary) / 0.08); + border: 1px solid hsl(var(--primary) / 0.2); + border-radius: 0.5rem; + margin-bottom: 1rem; +} + +.batch-select-count { + font-size: 0.8125rem; + font-weight: 600; + color: hsl(var(--primary)); + margin-right: auto; +} + +.btn-danger { + background: hsl(var(--destructive)); + color: hsl(var(--destructive-foreground)); + border-color: hsl(var(--destructive)); +} + +.btn-danger:hover:not(:disabled) { + opacity: 0.9; +} + +.btn-danger:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Override for icon-style danger buttons (subtle, not solid red) */ +.btn-icon.btn-danger, +.history-item-actions .btn-danger, +.cli-history-actions .btn-danger { + background: transparent; + color: hsl(var(--muted-foreground)); + border: none; +} + +.btn-icon.btn-danger:hover, +.history-item-actions .btn-danger:hover, +.cli-history-actions .btn-danger:hover { + background: hsl(var(--destructive) / 0.1); + color: hsl(var(--destructive)); + opacity: 1; +} + +/* Multi-Select Checkbox */ +.history-checkbox-wrapper { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + margin-right: 0.75rem; + flex-shrink: 0; +} + +.history-checkbox { + width: 1.125rem; + height: 1.125rem; + cursor: pointer; + accent-color: hsl(var(--primary)); +} + +/* Selected Item State */ +.history-item-selected { + background: hsl(var(--primary) / 0.08) !important; + border-color: hsl(var(--primary) / 0.3) !important; +} + +/* Turn Badge for History List */ +.history-turn-badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; + font-size: 0.625rem; + font-weight: 600; + padding: 0.1875rem 0.5rem; + background: hsl(var(--primary) / 0.12); + color: hsl(var(--primary)); + border-radius: 9999px; +} + diff --git a/ccw/src/templates/dashboard-css/17-cli-conversation.css b/ccw/src/templates/dashboard-css/17-cli-conversation.css new file mode 100644 index 00000000..ceb44e23 --- /dev/null +++ b/ccw/src/templates/dashboard-css/17-cli-conversation.css @@ -0,0 +1,283 @@ +/* ======================================== + * Multi-Turn Conversation Styles + * ======================================== */ + +/* Turn Badge in History List */ +.cli-turn-badge { + font-size: 0.5625rem; + font-weight: 600; + padding: 0.125rem 0.5rem; + background: hsl(var(--primary) / 0.12); + color: hsl(var(--primary)); + border-radius: 9999px; + text-transform: uppercase; + letter-spacing: 0.02em; +} + +/* Turns Container in Detail Modal */ +.cli-turns-container { + max-height: 60vh; + overflow-y: auto; +} + +/* Turn Section */ +.cli-turn-section { + margin-bottom: 1rem; +} + +.cli-turn-header { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.75rem; + flex-wrap: wrap; +} + +.cli-turn-number { + font-size: 0.75rem; + font-weight: 600; + padding: 0.25rem 0.625rem; + background: hsl(var(--primary) / 0.1); + color: hsl(var(--primary)); + border-radius: 9999px; +} + +.cli-turn-status { + font-size: 0.625rem; + font-weight: 600; + padding: 0.1875rem 0.5rem; + border-radius: 9999px; + text-transform: uppercase; +} + +.cli-turn-status.status-success { + background: hsl(var(--success) / 0.12); + color: hsl(var(--success)); +} + +.cli-turn-status.status-error { + background: hsl(var(--destructive) / 0.12); + color: hsl(var(--destructive)); +} + +.cli-turn-status.status-timeout { + background: hsl(var(--warning) / 0.12); + color: hsl(var(--warning)); +} + +.cli-turn-duration { + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); +} + +/* Turn Divider (legacy) */ +.cli-turn-divider { + border: none; + border-top: 1px dashed hsl(var(--border)); + margin: 1.25rem 0; +} + +/* Error Section (smaller in multi-turn) */ +.cli-detail-error-section .cli-detail-error { + max-height: 100px; +} + +/* ======================================== + * Enhanced Multi-Turn Display + * ======================================== */ + +/* Turn Section */ +.cli-turn-section { + padding: 0.75rem; + border-radius: 0.5rem; + background: hsl(var(--background)); + border: 1px solid hsl(var(--border)); +} + +.cli-turn-section.cli-turn-latest { + border-color: hsl(var(--primary) / 0.3); + background: hsl(var(--primary) / 0.03); +} + +/* Turn Header */ +.cli-turn-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0.75rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid hsl(var(--border)); + flex-wrap: wrap; + gap: 0.5rem; +} + +.cli-turn-marker { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.cli-turn-number { + font-size: 0.8125rem; + font-weight: 600; + color: hsl(var(--primary)); +} + +.cli-turn-latest-badge { + font-size: 0.5625rem; + font-weight: 600; + padding: 0.125rem 0.375rem; + background: hsl(var(--success) / 0.12); + color: hsl(var(--success)); + border-radius: 9999px; + text-transform: uppercase; + letter-spacing: 0.03em; +} + +.cli-turn-meta { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); +} + +.cli-turn-meta span { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.cli-turn-time i, +.cli-turn-duration i { + color: hsl(var(--muted-foreground) / 0.7); +} + +/* Turn Body */ +.cli-turn-body { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +/* Section Labels */ +.cli-prompt-section h4 { + color: hsl(var(--primary)); +} + +.cli-prompt-section h4 i { + color: hsl(var(--primary)); +} + +.cli-output-section h4 { + color: hsl(var(--success)); +} + +.cli-output-section h4 i { + color: hsl(var(--success)); +} + +/* Turn Connector (visual line between turns) */ +.cli-turn-connector { + display: flex; + justify-content: center; + padding: 0.25rem 0; +} + +.cli-turn-line { + width: 2px; + height: 1.5rem; + background: linear-gradient( + to bottom, + hsl(var(--border)), + hsl(var(--primary) / 0.3), + hsl(var(--border)) + ); + border-radius: 1px; +} + +/* Truncated Notice */ +.cli-truncated-notice { + display: flex; + align-items: center; + gap: 0.375rem; + font-size: 0.75rem; + color: hsl(var(--warning)); + margin-top: 0.5rem; + padding: 0.375rem 0.625rem; + background: hsl(var(--warning) / 0.08); + border-radius: 0.25rem; +} + +.cli-truncated-notice i { + flex-shrink: 0; +} + +/* Turn Badge with Icon */ +.cli-turn-badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; +} + +.cli-turn-badge i { + width: 12px; + height: 12px; +} + +/* ======================================== + * Conversation View Toggle + * ======================================== */ + +/* View Toggle Bar */ +.cli-view-toggle { + display: flex; + gap: 0.5rem; + margin-bottom: 1rem; + padding: 0.5rem; + background: hsl(var(--muted) / 0.3); + border-radius: 0.5rem; +} + +.cli-view-toggle .btn { + flex: 1; + justify-content: center; +} + +.cli-view-toggle .btn.active { + background: hsl(var(--primary)); + color: hsl(var(--primary-foreground)); + border-color: hsl(var(--primary)); +} + +/* Concatenated Prompt Section */ +.cli-concat-section { + margin-top: 1rem; +} + +.cli-concat-format-selector { + display: flex; + gap: 0.375rem; + margin-bottom: 0.75rem; +} + +.cli-concat-format-selector .btn-xs { + padding: 0.25rem 0.625rem; + font-size: 0.6875rem; +} + +.cli-concat-output { + max-height: 400px; + overflow-y: auto; + font-size: 0.75rem; + white-space: pre-wrap; + word-break: break-word; +} + +/* Button Sizes */ +.btn-xs { + padding: 0.25rem 0.5rem; + font-size: 0.6875rem; + border-radius: 0.25rem; +} + diff --git a/ccw/src/templates/dashboard-css/18-cli-settings.css b/ccw/src/templates/dashboard-css/18-cli-settings.css new file mode 100644 index 00000000..5da24789 --- /dev/null +++ b/ccw/src/templates/dashboard-css/18-cli-settings.css @@ -0,0 +1,160 @@ +/* ======================================== + * CLI Settings Section + * ======================================== */ + +.cli-settings-section { + /* No card wrapper - just title and cards */ +} + +.cli-settings-section .section-header { + padding: 0 0 0.75rem 0; + border-bottom: none; + background: transparent; +} + +.cli-settings-section .section-header h3 { + font-size: 0.9375rem; +} + +.cli-settings-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0.75rem; +} + +@media (max-width: 1200px) { + .cli-settings-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 640px) { + .cli-settings-grid { + grid-template-columns: 1fr; + } +} + +.cli-setting-item { + padding: 0.75rem; + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + display: flex; + flex-direction: column; + min-height: 90px; +} + +.cli-setting-label { + display: flex; + align-items: center; + gap: 0.375rem; + font-size: 0.6875rem; + font-weight: 600; + color: hsl(var(--muted-foreground)); + text-transform: uppercase; + letter-spacing: 0.025em; + margin-bottom: 0.5rem; +} + +.cli-setting-label i { + color: hsl(var(--primary)); + width: 12px; + height: 12px; +} + +.cli-setting-control { + margin-bottom: 0.5rem; + flex-shrink: 0; +} + +.cli-setting-select { + width: 100%; + padding: 0.4375rem 0.5rem; + font-size: 0.8125rem; + background: hsl(var(--background)); + border: 1px solid hsl(var(--border)); + border-radius: 0.375rem; + color: hsl(var(--foreground)); + cursor: pointer; + transition: all 0.15s ease; +} + +.cli-setting-select:hover { + border-color: hsl(var(--primary) / 0.5); +} + +.cli-setting-select:focus { + outline: none; + border-color: hsl(var(--primary)); + box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1); +} + +.cli-setting-desc { + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); + line-height: 1.3; + margin-top: auto; +} + +.cli-setting-value { + font-size: 0.875rem; + color: hsl(var(--foreground)); + font-weight: 500; +} + +/* Toggle Switch */ +.cli-toggle { + position: relative; + display: inline-block; + width: 36px; + height: 20px; +} + +.cli-toggle input { + opacity: 0; + width: 0; + height: 0; +} + +.cli-toggle-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: hsl(var(--muted)); + transition: 0.3s; + border-radius: 20px; +} + +.cli-toggle-slider:before { + position: absolute; + content: ""; + height: 14px; + width: 14px; + left: 3px; + bottom: 3px; + background-color: white; + transition: 0.3s; + border-radius: 50%; +} + +.cli-toggle input:checked + .cli-toggle-slider { + background-color: hsl(var(--primary)); +} + +.cli-toggle input:checked + .cli-toggle-slider:before { + transform: translateX(16px); +} + +.cli-toggle input:focus + .cli-toggle-slider { + box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2); +} + +/* Disabled state for settings */ +.cli-setting-item.disabled { + opacity: 0.5; + pointer-events: none; +} + diff --git a/ccw/src/templates/dashboard-css/19-cli-native-session.css b/ccw/src/templates/dashboard-css/19-cli-native-session.css new file mode 100644 index 00000000..e3215168 --- /dev/null +++ b/ccw/src/templates/dashboard-css/19-cli-native-session.css @@ -0,0 +1,496 @@ +/* ======================================== + * Native Session Styles + * ======================================== */ + +/* Native badge in history list */ +.cli-native-badge { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.125rem 0.375rem; + background: hsl(var(--primary) / 0.1); + color: hsl(var(--primary)); + border-radius: 0.25rem; + font-size: 0.625rem; +} + +.cli-history-item.has-native { + border-left: 2px solid hsl(var(--primary) / 0.5); +} + +/* Mode tag */ +.cli-mode-tag { + display: inline-flex; + align-items: center; + padding: 0.125rem 0.375rem; + font-size: 0.625rem; + font-weight: 500; + color: hsl(var(--muted-foreground)); + background: hsl(var(--muted)); + border-radius: 0.25rem; +} + +/* Status badge */ +.cli-status-badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.125rem 0.375rem; + font-size: 0.625rem; + font-weight: 500; + border-radius: 0.25rem; +} + +.cli-status-badge.text-success { + background: hsl(var(--success) / 0.1); + color: hsl(var(--success)); +} + +.cli-status-badge.text-warning { + background: hsl(var(--warning) / 0.1); + color: hsl(var(--warning)); +} + +.cli-status-badge.text-destructive { + background: hsl(var(--destructive) / 0.1); + color: hsl(var(--destructive)); +} + +/* Native Session Detail Modal */ +.native-session-detail { + font-family: system-ui, -apple-system, sans-serif; +} + +.native-session-header { + margin-bottom: 1rem; + padding-bottom: 1rem; + border-bottom: 1px solid hsl(var(--border)); +} + +.native-session-info { + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; + margin-bottom: 0.5rem; +} + +.native-model, +.native-session-id { + display: inline-flex; + align-items: center; + gap: 0.25rem; + font-size: 0.75rem; + color: hsl(var(--muted-foreground)); +} + +.native-session-meta { + display: flex; + flex-wrap: wrap; + gap: 1rem; + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); +} + +.native-session-meta span { + display: inline-flex; + align-items: center; + gap: 0.25rem; +} + +/* Tokens Summary */ +.native-tokens-summary { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1rem; + margin-bottom: 1rem; + background: hsl(var(--muted) / 0.5); + border-radius: 0.5rem; + font-size: 0.75rem; + color: hsl(var(--foreground)); +} + +/* Native Turns Container */ +.native-turns-container { + max-height: 60vh; + overflow-y: auto; + padding-right: 0.5rem; +} + +/* Native Turn */ +.native-turn { + margin-bottom: 1rem; + padding: 0.875rem; + border-radius: 0.5rem; + border: 1px solid hsl(var(--border)); +} + +.native-turn.user { + background: hsl(var(--muted) / 0.3); + border-left: 3px solid hsl(var(--primary)); +} + +.native-turn.assistant { + background: hsl(var(--background)); + border-left: 3px solid hsl(var(--success)); +} + +.native-turn.latest { + box-shadow: 0 0 0 1px hsl(var(--primary) / 0.3); +} + +.native-turn-header { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.625rem; + flex-wrap: wrap; +} + +.native-turn-role { + display: inline-flex; + align-items: center; + gap: 0.25rem; + font-size: 0.75rem; + font-weight: 600; + color: hsl(var(--foreground)); +} + +.native-turn-number { + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); +} + +.native-turn-tokens { + display: inline-flex; + align-items: center; + gap: 0.25rem; + font-size: 0.625rem; + color: hsl(var(--muted-foreground)); + padding: 0.125rem 0.375rem; + background: hsl(var(--muted)); + border-radius: 0.25rem; +} + +.native-turn-latest { + font-size: 0.625rem; + font-weight: 500; + padding: 0.125rem 0.375rem; + background: hsl(var(--primary) / 0.1); + color: hsl(var(--primary)); + border-radius: 0.25rem; +} + +.native-turn-content pre { + margin: 0; + padding: 0.75rem; + background: hsl(var(--muted)); + border-radius: 0.375rem; + font-family: monospace; + font-size: 0.75rem; + line-height: 1.5; + white-space: pre-wrap; + word-wrap: break-word; + max-height: 300px; + overflow-y: auto; +} + +/* Thoughts Section */ +.native-thoughts-section { + margin-top: 0.75rem; + padding: 0.625rem; + background: hsl(var(--warning) / 0.05); + border: 1px solid hsl(var(--warning) / 0.2); + border-radius: 0.375rem; +} + +.native-thoughts-section h5 { + display: flex; + align-items: center; + gap: 0.375rem; + font-size: 0.6875rem; + font-weight: 600; + color: hsl(var(--warning)); + margin: 0 0 0.5rem 0; +} + +.native-thoughts-list { + margin: 0; + padding-left: 1.25rem; + font-size: 0.6875rem; + color: hsl(var(--foreground)); +} + +.native-thoughts-list li { + margin-bottom: 0.25rem; +} + +/* Tool Calls Section */ +.native-tools-section { + margin-top: 0.75rem; + padding: 0.625rem; + background: hsl(var(--muted) / 0.5); + border: 1px solid hsl(var(--border)); + border-radius: 0.375rem; +} + +.native-tools-section h5 { + display: flex; + align-items: center; + gap: 0.375rem; + font-size: 0.6875rem; + font-weight: 600; + color: hsl(var(--muted-foreground)); + margin: 0 0 0.5rem 0; +} + +.native-tools-list { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.native-tool-call { + padding: 0.5rem; + background: hsl(var(--background)); + border-radius: 0.25rem; +} + +.native-tool-name { + display: inline-block; + font-family: monospace; + font-size: 0.6875rem; + font-weight: 600; + color: hsl(var(--primary)); + margin-bottom: 0.25rem; +} + +.native-tool-output { + margin: 0.25rem 0 0 0; + padding: 0.375rem; + background: hsl(var(--muted)); + border-radius: 0.25rem; + font-family: monospace; + font-size: 0.625rem; + white-space: pre-wrap; + word-wrap: break-word; + max-height: 100px; + overflow-y: auto; +} + +/* Native Session Actions */ +.native-session-actions { + display: flex; + gap: 0.5rem; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid hsl(var(--border)); + flex-wrap: wrap; +} + +/* ======================================== + * Enhanced Native Session Display + * ======================================== */ + +/* View Full Process Button in Execution Detail */ +.cli-detail-native-action { + margin-top: 0.75rem; + padding-top: 0.75rem; + border-top: 1px solid hsl(var(--border) / 0.5); +} + +.cli-detail-native-action .btn { + font-size: 0.8125rem; + gap: 0.5rem; +} + +/* Collapsible Thinking Process */ +.turn-thinking-details { + border: none; + margin: 0; +} + +.turn-thinking-summary { + display: flex; + align-items: center; + gap: 0.375rem; + cursor: pointer; + padding: 0.5rem; + background: hsl(var(--warning) / 0.08); + border: 1px solid hsl(var(--warning) / 0.25); + border-radius: 0.375rem; + font-size: 0.75rem; + font-weight: 600; + color: hsl(var(--warning)); + transition: all 0.2s ease; + list-style: none; +} + +.turn-thinking-summary::-webkit-details-marker { + display: none; +} + +.turn-thinking-summary:hover { + background: hsl(var(--warning) / 0.15); + border-color: hsl(var(--warning) / 0.4); +} + +.turn-thinking-summary::before { + content: 'â–¶'; + display: inline-block; + margin-right: 0.25rem; + transition: transform 0.2s ease; + font-size: 0.6875rem; +} + +.turn-thinking-details[open] .turn-thinking-summary::before { + transform: rotate(90deg); +} + +.turn-thinking-content { + padding: 0.75rem; + margin-top: 0.5rem; + background: hsl(var(--warning) / 0.03); + border: 1px solid hsl(var(--warning) / 0.15); + border-radius: 0.375rem; + font-style: italic; +} + +.turn-thinking-content ul { + margin: 0; + padding-left: 1.25rem; +} + +.turn-thinking-content li { + margin-bottom: 0.375rem; + font-size: 0.6875rem; + line-height: 1.6; + color: hsl(var(--foreground) / 0.85); +} + +/* Tool Calls Header */ +.turn-tool-calls-header { + display: flex; + align-items: center; + gap: 0.375rem; + font-size: 0.75rem; + font-weight: 600; + color: hsl(var(--muted-foreground)); + margin-bottom: 0.625rem; + padding-bottom: 0.375rem; + border-bottom: 1px solid hsl(var(--border) / 0.5); +} + +/* Collapsible Tool Calls */ +.turn-tool-call-details { + border: none; + margin-bottom: 0.5rem; +} + +.turn-tool-call-summary { + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + padding: 0.5rem 0.75rem; + background: hsl(var(--background)); + border: 1px solid hsl(var(--border)); + border-radius: 0.375rem; + font-size: 0.7rem; + transition: all 0.2s ease; + list-style: none; +} + +.turn-tool-call-summary::-webkit-details-marker { + display: none; +} + +.turn-tool-call-summary:hover { + background: hsl(var(--muted) / 0.5); + border-color: hsl(var(--primary) / 0.4); +} + +.turn-tool-call-summary::before { + content: 'â–¶'; + display: inline-block; + margin-right: 0.5rem; + transition: transform 0.2s ease; + font-size: 0.625rem; + color: hsl(var(--muted-foreground)); +} + +.turn-tool-call-details[open] .turn-tool-call-summary::before { + transform: rotate(90deg); +} + +.native-tool-size { + font-size: 0.625rem; + color: hsl(var(--muted-foreground)); + font-weight: 400; +} + +.turn-tool-call-content { + padding: 0.75rem; + margin-top: 0.5rem; + background: hsl(var(--muted) / 0.3); + border: 1px solid hsl(var(--border)); + border-radius: 0.375rem; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.turn-tool-input, +.turn-tool-output { + margin-bottom: 0.75rem; +} + +.turn-tool-input:last-child, +.turn-tool-output:last-child { + margin-bottom: 0; +} + +.turn-tool-input strong, +.turn-tool-output strong { + display: block; + font-size: 0.6875rem; + font-weight: 600; + color: hsl(var(--foreground)); + margin-bottom: 0.375rem; +} + +.turn-tool-input pre, +.turn-tool-output pre { + margin: 0; + padding: 0.5rem; + background: hsl(var(--background)); + border: 1px solid hsl(var(--border)); + border-radius: 0.25rem; + font-family: monospace; + font-size: 0.6875rem; + line-height: 1.5; + white-space: pre-wrap; + word-wrap: break-word; + max-height: 400px; + overflow-y: auto; +} + +/* Improved scrollbar for tool output */ +.turn-tool-output pre::-webkit-scrollbar { + width: 6px; +} + +.turn-tool-output pre::-webkit-scrollbar-track { + background: hsl(var(--muted)); + border-radius: 3px; +} + +.turn-tool-output pre::-webkit-scrollbar-thumb { + background: hsl(var(--muted-foreground) / 0.3); + border-radius: 3px; +} + +.turn-tool-output pre::-webkit-scrollbar-thumb:hover { + background: hsl(var(--muted-foreground) / 0.5); +} + diff --git a/ccw/src/templates/dashboard-css/20-cli-taskqueue.css b/ccw/src/templates/dashboard-css/20-cli-taskqueue.css new file mode 100644 index 00000000..2a3dc563 --- /dev/null +++ b/ccw/src/templates/dashboard-css/20-cli-taskqueue.css @@ -0,0 +1,188 @@ +/* ======================================== + * Task Queue Sidebar - CLI Tab Styles + * ======================================== */ + +/* Tab Navigation */ +.task-queue-tabs { + display: flex; + gap: 0; + border-bottom: 1px solid hsl(var(--border)); + padding: 0 1rem; +} + +.task-queue-tab { + flex: 1; + padding: 0.625rem 0.75rem; + background: transparent; + border: none; + border-bottom: 2px solid transparent; + color: hsl(var(--muted-foreground)); + font-size: 0.8125rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + gap: 0.375rem; +} + +.task-queue-tab:hover { + color: hsl(var(--foreground)); + background: hsl(var(--muted) / 0.3); +} + +.task-queue-tab.active { + color: hsl(var(--primary)); + border-bottom-color: hsl(var(--primary)); +} + +.task-queue-tab .tab-badge { + background: hsl(var(--muted)); + color: hsl(var(--muted-foreground)); + padding: 0.125rem 0.375rem; + border-radius: 9999px; + font-size: 0.6875rem; + font-weight: 600; + min-width: 1.25rem; + text-align: center; +} + +.task-queue-tab.active .tab-badge { + background: hsl(var(--primary) / 0.15); + color: hsl(var(--primary)); +} + +/* CLI Filter Buttons */ +.cli-filter-btn { + padding: 0.375rem 0.625rem; + background: transparent; + border: 1px solid hsl(var(--border)); + border-radius: 0.375rem; + color: hsl(var(--muted-foreground)); + font-size: 0.75rem; + cursor: pointer; + transition: all 0.15s; + white-space: nowrap; +} + +.cli-filter-btn:hover { + background: hsl(var(--muted) / 0.5); + color: hsl(var(--foreground)); +} + +.cli-filter-btn.active { + background: hsl(var(--primary)); + border-color: hsl(var(--primary)); + color: hsl(var(--primary-foreground)); +} + +/* CLI Queue Item */ +.cli-queue-item { + padding: 0.75rem; + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-radius: 0.5rem; + margin-bottom: 0.5rem; + cursor: pointer; + transition: all 0.15s; +} + +.cli-queue-item:hover { + background: hsl(var(--muted) / 0.5); + border-color: hsl(var(--primary) / 0.3); +} + +.cli-queue-item.category-user { + border-left: 3px solid #3b82f6; +} + +.cli-queue-item.category-insight { + border-left: 3px solid #a855f7; +} + +.cli-queue-item.category-internal { + border-left: 3px solid #22c55e; +} + +.cli-queue-item-header { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.375rem; +} + +.cli-queue-category-icon { + font-size: 0.875rem; +} + +.cli-queue-tool-tag { + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; +} + +.cli-queue-tool-tag.cli-tool-gemini { + background: hsl(210 100% 50% / 0.15); + color: hsl(210 100% 45%); +} + +.cli-queue-tool-tag.cli-tool-qwen { + background: hsl(280 100% 50% / 0.15); + color: hsl(280 100% 40%); +} + +.cli-queue-tool-tag.cli-tool-codex { + background: hsl(145 60% 45% / 0.15); + color: hsl(145 60% 35%); +} + +.cli-queue-tool-tag.cli-tool-claude { + background: hsl(25 90% 50% / 0.15); + color: hsl(25 90% 40%); +} + +.cli-queue-status { + font-size: 0.75rem; +} + +.cli-queue-time { + margin-left: auto; + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); +} + +.cli-queue-prompt { + font-size: 0.75rem; + color: hsl(var(--foreground)); + line-height: 1.4; + margin-bottom: 0.375rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.cli-queue-meta { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.6875rem; + color: hsl(var(--muted-foreground)); +} + +.cli-queue-id { + font-family: monospace; +} + +.cli-queue-turns { + background: hsl(var(--muted)); + padding: 0.0625rem 0.25rem; + border-radius: 0.25rem; +} + +.cli-queue-native { + font-size: 0.75rem; +} + diff --git a/ccw/src/templates/dashboard-css/21-cli-toolmgmt.css b/ccw/src/templates/dashboard-css/21-cli-toolmgmt.css new file mode 100644 index 00000000..6511d5c8 --- /dev/null +++ b/ccw/src/templates/dashboard-css/21-cli-toolmgmt.css @@ -0,0 +1,310 @@ +/* ======================================== + * CLI Tool Management Styles + * ======================================== */ + +/* Disabled tool card */ +.cli-tool-card.disabled { + opacity: 0.6; +} + +.cli-tool-card.disabled .cli-tool-header { + opacity: 0.8; +} + +/* Disabled status indicator */ +.cli-tool-status.status-disabled { + background: hsl(var(--warning)); +} + +/* Warning badge */ +.cli-tool-badge.badge-warning { + background: hsl(var(--warning) / 0.15); + color: hsl(var(--warning)); + font-size: 0.65rem; + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + margin-left: 0.25rem; +} + +/* Compact toggle for tool cards */ +.cli-toggle-compact { + position: relative; + display: inline-block; + width: 28px; + height: 16px; + cursor: pointer; +} + +.cli-toggle-compact input { + opacity: 0; + width: 0; + height: 0; + position: absolute; +} + +.cli-toggle-slider-compact { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: hsl(var(--muted)); + transition: 0.2s; + border-radius: 16px; +} + +.cli-toggle-slider-compact:before { + position: absolute; + content: ""; + height: 12px; + width: 12px; + left: 2px; + bottom: 2px; + background-color: white; + transition: 0.2s; + border-radius: 50%; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); +} + +.cli-toggle-compact input:checked + .cli-toggle-slider-compact { + background-color: hsl(var(--primary)); +} + +.cli-toggle-compact input:checked + .cli-toggle-slider-compact:before { + transform: translateX(12px); +} + +.cli-toggle-compact input:focus + .cli-toggle-slider-compact { + box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5); +} + +/* Language Setting Status Badge */ +.cli-setting-status { + margin-left: 0.75rem; + padding: 0.25rem 0.625rem; + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.03em; + border-radius: 0.25rem; + display: inline-flex; + align-items: center; +} + +.cli-setting-status.enabled { + background: hsl(var(--primary) / 0.15); + color: hsl(var(--primary)); +} + +.cli-setting-status.disabled { + background: hsl(var(--muted)); + color: hsl(var(--muted-foreground)); +} + +/* Ghost button variant for destructive actions */ +.btn-ghost.text-destructive { + color: hsl(var(--destructive)); +} + +/* ======================================== + * Tool Configuration Modal + * ======================================== */ + +/* Tool item clickable */ +.tool-item.clickable { + cursor: pointer; + transition: all 0.15s ease; +} + +.tool-item.clickable:hover { + background: hsl(var(--accent)); + border-color: hsl(var(--primary) / 0.3); +} + +.tool-item.clickable:hover .tool-config-icon { + opacity: 1; +} + +.tool-config-icon { + margin-left: 0.375rem; + color: hsl(var(--muted-foreground)); + opacity: 0; + transition: opacity 0.15s ease; +} + +/* Tool Config Modal */ +.tool-config-modal { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.tool-config-section { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.tool-config-section h4 { + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.025em; + color: hsl(var(--muted-foreground)); + margin: 0; +} + +.tool-config-section h4 .text-muted { + font-weight: 400; + text-transform: none; + color: hsl(var(--muted-foreground) / 0.7); +} + +/* Status Badges */ +.tool-config-badges { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.25rem 0.5rem; + font-size: 0.6875rem; + font-weight: 500; + border-radius: 9999px; +} + +.badge-success { + background: hsl(var(--success) / 0.15); + color: hsl(var(--success)); +} + +.badge-primary { + background: hsl(var(--primary) / 0.15); + color: hsl(var(--primary)); +} + +.badge-muted { + background: hsl(var(--muted)); + color: hsl(var(--muted-foreground)); +} + +/* Config Actions */ +.tool-config-actions { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.btn-danger-outline { + border-color: hsl(var(--destructive) / 0.5); + color: hsl(var(--destructive)); +} + +.btn-danger-outline:hover { + background: hsl(var(--destructive) / 0.1); + border-color: hsl(var(--destructive)); +} + +/* Config Selects and Inputs */ +.tool-config-select, +.tool-config-input { + width: 100%; + padding: 0.5rem 0.75rem; + font-size: 0.8125rem; + font-family: inherit; + border: 1px solid hsl(var(--border)); + border-radius: 0.375rem; + background: hsl(var(--background)); + color: hsl(var(--foreground)); + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} + +.tool-config-select:focus, +.tool-config-input:focus { + outline: none; + border-color: hsl(var(--primary)); + box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2); +} + +.tool-config-select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.25rem; + padding-right: 2rem; +} + +.tool-config-input.hidden { + display: none; +} + +.tool-config-input { + margin-top: 0.375rem; +} + +/* Config Footer */ +.tool-config-footer { + display: flex; + justify-content: flex-end; + gap: 0.75rem; + padding: 1rem 1.25rem 1.25rem 1.25rem; + border-top: 1px solid hsl(var(--border)); + margin-top: 0.5rem; +} + +.tool-config-footer .btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.375rem; + padding: 0.5rem 1rem; + font-size: 0.8125rem; + font-weight: 500; + border-radius: 0.375rem; + cursor: pointer; + transition: all 0.15s ease; +} + +.tool-config-footer .btn-outline { + background: transparent; + border: 1px solid hsl(var(--border)); + color: hsl(var(--foreground)); +} + +.tool-config-footer .btn-outline:hover { + background: hsl(var(--muted)); + border-color: hsl(var(--muted-foreground) / 0.3); +} + +.tool-config-footer .btn-primary { + background: hsl(var(--primary)); + border: 1px solid hsl(var(--primary)); + color: hsl(var(--primary-foreground)); +} + +.tool-config-footer .btn-primary:hover { + background: hsl(var(--primary) / 0.9); +} + +/* Model Select Group */ +.model-select-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.model-select-group .tool-config-input { + margin-top: 0; +} + +.btn-ghost.text-destructive:hover { + background: hsl(var(--destructive) / 0.1); +} + diff --git a/ccw/src/templates/dashboard-css/22-cli-semantic.css b/ccw/src/templates/dashboard-css/22-cli-semantic.css new file mode 100644 index 00000000..85dc2377 --- /dev/null +++ b/ccw/src/templates/dashboard-css/22-cli-semantic.css @@ -0,0 +1,240 @@ +/* ======================================== + * Semantic Metadata Viewer Styles + * ======================================== */ +.semantic-viewer-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 1rem; + background: hsl(var(--muted) / 0.3); + border-bottom: 1px solid hsl(var(--border)); +} + +.semantic-table-container { + max-height: 400px; + overflow-y: auto; +} + +.semantic-table { + width: 100%; + border-collapse: collapse; + font-size: 0.8125rem; +} + +.semantic-table th { + position: sticky; + top: 0; + background: hsl(var(--card)); + padding: 0.625rem 0.75rem; + text-align: left; + font-weight: 600; + font-size: 0.75rem; + color: hsl(var(--muted-foreground)); + border-bottom: 1px solid hsl(var(--border)); + white-space: nowrap; +} + +.semantic-table td { + padding: 0.625rem 0.75rem; + border-bottom: 1px solid hsl(var(--border) / 0.5); + vertical-align: top; +} + +.semantic-row { + cursor: pointer; + transition: background 0.15s ease; +} + +.semantic-row:hover { + background: hsl(var(--hover)); +} + +.semantic-cell-file { + max-width: 200px; +} + +.semantic-cell-lang { + width: 80px; + color: hsl(var(--muted-foreground)); +} + +.semantic-cell-purpose { + max-width: 180px; + color: hsl(var(--foreground) / 0.8); +} + +.semantic-cell-keywords { + max-width: 160px; +} + +.semantic-cell-tool { + width: 70px; +} + +.semantic-cell-date { + width: 80px; + color: hsl(var(--muted-foreground)); + font-size: 0.75rem; +} + +.semantic-keyword { + display: inline-block; + padding: 0.125rem 0.375rem; + margin: 0.125rem; + background: hsl(var(--primary) / 0.1); + color: hsl(var(--primary)); + border-radius: 0.25rem; + font-size: 0.6875rem; +} + +.semantic-keyword-more { + display: inline-block; + padding: 0.125rem 0.375rem; + margin: 0.125rem; + background: hsl(var(--muted)); + color: hsl(var(--muted-foreground)); + border-radius: 0.25rem; + font-size: 0.6875rem; +} + +.tool-badge { + display: inline-block; + padding: 0.125rem 0.5rem; + border-radius: 0.25rem; + font-size: 0.6875rem; + font-weight: 500; + text-transform: capitalize; +} + +.tool-badge.tool-gemini { + background: hsl(210 80% 55% / 0.15); + color: hsl(210 80% 45%); +} + +.tool-badge.tool-qwen { + background: hsl(142 76% 36% / 0.15); + color: hsl(142 76% 36%); +} + +.tool-badge.tool-unknown { + background: hsl(var(--muted)); + color: hsl(var(--muted-foreground)); +} + +.semantic-detail-row { + background: hsl(var(--muted) / 0.2); +} + +.semantic-detail-row.hidden { + display: none; +} + +.semantic-detail-content { + padding: 1rem; +} + +.semantic-detail-section { + margin-bottom: 1rem; +} + +.semantic-detail-section h4 { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.75rem; + font-weight: 600; + color: hsl(var(--muted-foreground)); + margin-bottom: 0.5rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.semantic-detail-section p { + font-size: 0.8125rem; + line-height: 1.5; + color: hsl(var(--foreground)); +} + +.semantic-keywords-full { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; +} + +.semantic-detail-meta { + display: flex; + gap: 1rem; + padding-top: 0.75rem; + border-top: 1px solid hsl(var(--border) / 0.5); + font-size: 0.75rem; + color: hsl(var(--muted-foreground)); +} + +.semantic-detail-meta span { + display: flex; + align-items: center; + gap: 0.375rem; +} + +.semantic-viewer-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 1rem; + background: hsl(var(--muted) / 0.3); + border-top: 1px solid hsl(var(--border)); +} + +.semantic-loading, +.semantic-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 3rem; + text-align: center; + color: hsl(var(--muted-foreground)); +} + +.semantic-loading { + gap: 1rem; +} + +/* ======================================== + * CodexLens Test Search Results + * ======================================== */ +#searchResults { + margin-top: 0.5rem; +} + +#searchResults > div { + display: flex; + flex-direction: column; + max-height: 200px; + overflow: hidden; + background: hsl(var(--muted) / 0.3); + border-radius: 0.5rem; + padding: 0.75rem; +} + +#searchResults .flex.items-center { + flex-shrink: 0; + margin-bottom: 0.5rem; +} + +#searchResultContent { + flex: 1; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + font-size: 0.75rem; + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; + line-height: 1.5; + white-space: pre-wrap; + word-break: break-all; + color: hsl(var(--foreground) / 0.9); + background: hsl(var(--background) / 0.5); + border-radius: 0.375rem; + padding: 0.5rem; + margin: 0; +} diff --git a/ccw/src/templates/dashboard-css/11-memory.css b/ccw/src/templates/dashboard-css/23-memory.css similarity index 100% rename from ccw/src/templates/dashboard-css/11-memory.css rename to ccw/src/templates/dashboard-css/23-memory.css diff --git a/ccw/src/templates/dashboard-css/11-prompt-history.css b/ccw/src/templates/dashboard-css/24-prompt-history.css similarity index 100% rename from ccw/src/templates/dashboard-css/11-prompt-history.css rename to ccw/src/templates/dashboard-css/24-prompt-history.css diff --git a/ccw/src/templates/dashboard-css/12-skills-rules.css b/ccw/src/templates/dashboard-css/25-skills-rules.css similarity index 100% rename from ccw/src/templates/dashboard-css/12-skills-rules.css rename to ccw/src/templates/dashboard-css/25-skills-rules.css diff --git a/ccw/src/templates/dashboard-css/13-claude-manager.css b/ccw/src/templates/dashboard-css/26-claude-manager.css similarity index 100% rename from ccw/src/templates/dashboard-css/13-claude-manager.css rename to ccw/src/templates/dashboard-css/26-claude-manager.css diff --git a/ccw/src/templates/dashboard-css/14-graph-explorer.css b/ccw/src/templates/dashboard-css/27-graph-explorer.css similarity index 100% rename from ccw/src/templates/dashboard-css/14-graph-explorer.css rename to ccw/src/templates/dashboard-css/27-graph-explorer.css diff --git a/ccw/src/templates/dashboard-css/15-mcp-manager.css b/ccw/src/templates/dashboard-css/28-mcp-manager.css similarity index 100% rename from ccw/src/templates/dashboard-css/15-mcp-manager.css rename to ccw/src/templates/dashboard-css/28-mcp-manager.css diff --git a/ccw/src/templates/dashboard-css/16-help.css b/ccw/src/templates/dashboard-css/29-help.css similarity index 100% rename from ccw/src/templates/dashboard-css/16-help.css rename to ccw/src/templates/dashboard-css/29-help.css diff --git a/ccw/src/templates/dashboard-css/17-core-memory.css b/ccw/src/templates/dashboard-css/30-core-memory.css similarity index 57% rename from ccw/src/templates/dashboard-css/17-core-memory.css rename to ccw/src/templates/dashboard-css/30-core-memory.css index 183aae0d..2cba608b 100644 --- a/ccw/src/templates/dashboard-css/17-core-memory.css +++ b/ccw/src/templates/dashboard-css/30-core-memory.css @@ -130,14 +130,14 @@ .stat-label { font-size: 0.875rem; - color: var(--text-secondary); + color: hsl(var(--muted-foreground)); margin-bottom: 0.25rem; } .stat-value { font-size: 1.5rem; font-weight: 600; - color: var(--text-primary); + color: hsl(var(--foreground)); } /* Memories Grid */ @@ -155,8 +155,8 @@ /* Memory Card */ .memory-card { - background: var(--card-bg); - border: 1px solid var(--border-color); + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); border-radius: 8px; padding: 1.25rem; transition: all 0.2s ease; @@ -184,7 +184,7 @@ align-items: center; gap: 0.5rem; font-size: 0.875rem; - color: var(--text-secondary); + color: hsl(var(--muted-foreground)); flex-wrap: wrap; } @@ -203,7 +203,7 @@ border: none; padding: 0.25rem; cursor: pointer; - color: var(--text-secondary); + color: hsl(var(--muted-foreground)); transition: color 0.2s; display: flex; align-items: center; @@ -211,11 +211,11 @@ } .icon-btn:hover { - color: var(--text-primary); + color: hsl(var(--foreground)); } .icon-btn.danger:hover { - color: var(--danger-color); + color: hsl(var(--destructive)); } .icon-btn i { @@ -231,13 +231,13 @@ .memory-summary { font-size: 0.9375rem; line-height: 1.6; - color: var(--text-primary); + color: hsl(var(--foreground)); } .memory-preview { font-size: 0.875rem; line-height: 1.5; - color: var(--text-secondary); + color: hsl(var(--muted-foreground)); } /* Memory Tags */ @@ -250,8 +250,8 @@ .tag { padding: 0.25rem 0.75rem; - background: var(--accent-bg); - color: var(--accent-color); + background: hsl(var(--accent)); + color: hsl(var(--primary)); border-radius: 4px; font-size: 0.75rem; font-weight: 500; @@ -263,14 +263,14 @@ flex-direction: column; gap: 0.75rem; padding-top: 1rem; - border-top: 1px solid var(--border-color); + border-top: 1px solid hsl(var(--border)); } .memory-meta { display: flex; gap: 1rem; font-size: 0.8125rem; - color: var(--text-secondary); + color: hsl(var(--muted-foreground)); flex-wrap: wrap; } @@ -293,8 +293,8 @@ .feature-btn { padding: 0.375rem 0.75rem; - background: var(--secondary-bg); - border: 1px solid var(--border-color); + background: hsl(var(--muted)); + border: 1px solid hsl(var(--border)); border-radius: 4px; font-size: 0.8125rem; cursor: pointer; @@ -302,12 +302,12 @@ display: flex; align-items: center; gap: 0.375rem; - color: var(--text-primary); + color: hsl(var(--foreground)); } .feature-btn:hover { - background: var(--hover-bg); - border-color: var(--accent-color); + background: hsl(var(--hover)); + border-color: hsl(var(--primary)); } .feature-btn i { @@ -362,17 +362,17 @@ display: block; font-weight: 500; margin-bottom: 0.5rem; - color: var(--text-primary); + color: hsl(var(--foreground)); } .form-group textarea, .form-group input[type="text"] { width: 100%; padding: 0.75rem; - border: 1px solid var(--border-color); + border: 1px solid hsl(var(--border)); border-radius: 6px; - background: var(--input-bg); - color: var(--text-primary); + background: hsl(var(--background)); + color: hsl(var(--foreground)); font-family: inherit; font-size: 0.9375rem; resize: vertical; @@ -381,8 +381,8 @@ .form-group textarea:focus, .form-group input[type="text"]:focus { outline: none; - border-color: var(--accent-color); - box-shadow: 0 0 0 3px var(--accent-shadow, rgba(99, 102, 241, 0.1)); + border-color: hsl(var(--primary)); + box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1); } /* Memory Detail Content */ @@ -396,19 +396,19 @@ font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; - color: var(--text-primary); + color: hsl(var(--foreground)); } .detail-text { font-size: 0.9375rem; line-height: 1.6; - color: var(--text-primary); + color: hsl(var(--foreground)); white-space: pre-wrap; } .detail-code { - background: var(--secondary-bg); - border: 1px solid var(--border-color); + background: hsl(var(--muted)); + border: 1px solid hsl(var(--border)); border-radius: 6px; padding: 1rem; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; @@ -430,7 +430,7 @@ font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; - color: var(--text-primary); + color: hsl(var(--foreground)); } .entities-list, @@ -442,8 +442,8 @@ .entity-item { padding: 0.75rem; - background: var(--secondary-bg); - border: 1px solid var(--border-color); + background: hsl(var(--muted)); + border: 1px solid hsl(var(--border)); border-radius: 6px; display: flex; justify-content: space-between; @@ -452,21 +452,21 @@ .entity-name { font-weight: 500; - color: var(--text-primary); + color: hsl(var(--foreground)); } .entity-type { padding: 0.25rem 0.5rem; - background: var(--accent-bg); - color: var(--accent-color); + background: hsl(var(--accent)); + color: hsl(var(--primary)); border-radius: 4px; font-size: 0.75rem; } .relationship-item { padding: 0.75rem; - background: var(--secondary-bg); - border: 1px solid var(--border-color); + background: hsl(var(--muted)); + border: 1px solid hsl(var(--border)); border-radius: 6px; display: flex; align-items: center; @@ -477,13 +477,13 @@ .rel-target { flex: 1; font-weight: 500; - color: var(--text-primary); + color: hsl(var(--foreground)); } .rel-type { padding: 0.25rem 0.5rem; - background: var(--info-bg, #dbeafe); - color: var(--info-color, #1e3a8a); + background: hsl(var(--info) / 0.15); + color: hsl(var(--info)); border-radius: 4px; font-size: 0.75rem; white-space: nowrap; @@ -498,9 +498,9 @@ .evolution-version { padding: 1rem; - background: var(--secondary-bg); - border: 1px solid var(--border-color); - border-left: 3px solid var(--accent-color); + background: hsl(var(--muted)); + border: 1px solid hsl(var(--border)); + border-left: 3px solid hsl(var(--primary)); border-radius: 6px; } @@ -513,17 +513,17 @@ .version-number { font-weight: 600; - color: var(--accent-color); + color: hsl(var(--primary)); } .version-date { font-size: 0.8125rem; - color: var(--text-secondary); + color: hsl(var(--muted-foreground)); } .version-reason { font-size: 0.875rem; - color: var(--text-primary); + color: hsl(var(--foreground)); margin-top: 0.5rem; } @@ -531,7 +531,7 @@ .empty-state { text-align: center; padding: 3rem 1rem; - color: var(--text-secondary); + color: hsl(var(--muted-foreground)); } .empty-state i { @@ -546,7 +546,7 @@ } .empty-text { - color: var(--text-secondary); + color: hsl(var(--muted-foreground)); font-style: italic; } @@ -573,6 +573,219 @@ } } +/* ============================================ + Knowledge Graph D3 Visualization Styles + ============================================ */ + +.knowledge-graph-container { + width: 100%; + min-height: 400px; + background: hsl(var(--muted) / 0.3); + border: 1px solid hsl(var(--border)); + border-radius: 8px; + overflow: hidden; +} + +.knowledge-graph-svg { + display: block; + width: 100%; + height: 100%; +} + +.graph-content { + cursor: grab; +} + +.graph-content:active { + cursor: grabbing; +} + +.graph-edge { + stroke: hsl(var(--muted-foreground)); + stroke-width: 1.5; + stroke-opacity: 0.6; + fill: none; +} + +.graph-node { + cursor: pointer; + transition: all 0.2s ease; +} + +.graph-node:hover { + filter: brightness(1.2); + stroke-width: 3; +} + +.graph-label { + font-size: 11px; + fill: hsl(var(--foreground)); + pointer-events: none; + user-select: none; +} + +.graph-node-group.file .graph-node { fill: #3b82f6; } +.graph-node-group.function .graph-node { fill: #10b981; } +.graph-node-group.module .graph-node { fill: #8b5cf6; } +.graph-node-group.class .graph-node { fill: #f59e0b; } +.graph-node-group.entity .graph-node { fill: #6b7280; } + +.graph-error, +.graph-empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 300px; + color: hsl(var(--muted-foreground)); + text-align: center; + padding: 2rem; +} + +.graph-error i, +.graph-empty-state i { + width: 48px; + height: 48px; + margin-bottom: 1rem; + opacity: 0.5; +} + +.graph-error p, +.graph-empty-state p { + font-size: 0.9375rem; + margin: 0; +} + +/* ============================================ + Evolution Version Card Styles + ============================================ */ + +.version-card { + background: hsl(var(--card)); + border: 1px solid hsl(var(--border)); + border-left: 3px solid hsl(var(--primary)); + border-radius: 8px; + padding: 1rem; + transition: all 0.2s ease; +} + +.version-card:hover { + box-shadow: 0 2px 8px hsl(var(--foreground) / 0.08); +} + +.version-card .version-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.75rem; +} + +.version-card .version-info { + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; +} + +.version-card .version-number { + font-size: 0.875rem; + font-weight: 700; + color: hsl(var(--primary)); + padding: 0.25rem 0.5rem; + background: hsl(var(--primary) / 0.1); + border-radius: 4px; +} + +.version-card .version-date { + font-size: 0.8125rem; + color: hsl(var(--muted-foreground)); +} + +.version-content-preview { + font-size: 0.875rem; + line-height: 1.5; + color: hsl(var(--muted-foreground)); + background: hsl(var(--muted) / 0.5); + padding: 0.75rem; + border-radius: 6px; + margin-bottom: 0.75rem; + white-space: pre-wrap; + word-break: break-word; +} + +.version-diff-stats { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-bottom: 0.75rem; +} + +.diff-stat { + display: flex; + align-items: center; + gap: 0.375rem; + font-size: 0.75rem; + font-weight: 500; + padding: 0.25rem 0.625rem; + border-radius: 4px; +} + +.diff-stat i { + width: 12px; + height: 12px; +} + +.diff-stat.diff-added { + background: hsl(142 76% 36% / 0.15); + color: hsl(142 76% 30%); +} + +.diff-stat.diff-modified { + background: hsl(38 92% 50% / 0.15); + color: hsl(38 92% 40%); +} + +.diff-stat.diff-deleted { + background: hsl(0 84% 60% / 0.15); + color: hsl(0 84% 45%); +} + +.version-card .version-reason { + font-size: 0.8125rem; + color: hsl(var(--foreground)); + padding-top: 0.75rem; + border-top: 1px solid hsl(var(--border)); + margin-top: 0; +} + +.version-card .version-reason strong { + color: hsl(var(--muted-foreground)); + font-weight: 600; +} + +.evolution-empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 200px; + color: hsl(var(--muted-foreground)); + text-align: center; + padding: 2rem; +} + +.evolution-empty-state i { + width: 48px; + height: 48px; + margin-bottom: 1rem; + opacity: 0.5; +} + +.evolution-empty-state p { + font-size: 0.9375rem; + margin: 0; +} + /* Dark Mode Adjustments */ [data-theme="dark"] .memory-card { background: #1e293b; @@ -594,3 +807,25 @@ background: #1e293b; border-color: #334155; } + +[data-theme="dark"] .knowledge-graph-container { + background: #0f172a; + border-color: #334155; +} + +[data-theme="dark"] .graph-label { + fill: #e2e8f0; +} + +[data-theme="dark"] .graph-edge { + stroke: #64748b; +} + +[data-theme="dark"] .version-card { + background: #1e293b; + border-color: #334155; +} + +[data-theme="dark"] .version-content-preview { + background: #0f172a; +} diff --git a/ccw/src/templates/dashboard-js/components/cli-status.js b/ccw/src/templates/dashboard-js/components/cli-status.js index a2382d28..e3740b5f 100644 --- a/ccw/src/templates/dashboard-js/components/cli-status.js +++ b/ccw/src/templates/dashboard-js/components/cli-status.js @@ -92,6 +92,15 @@ async function loadCodexLensStatus() { const data = await response.json(); codexLensStatus = data; + // Expose to window for other modules (e.g., codexlens-manager.js) + if (!window.cliToolsStatus) { + window.cliToolsStatus = {}; + } + window.cliToolsStatus.codexlens = { + installed: data.ready || false, + version: data.version || null + }; + // Update CodexLens badge updateCodexLensBadge(); diff --git a/ccw/src/templates/dashboard-js/components/index-manager.js b/ccw/src/templates/dashboard-js/components/index-manager.js index e9768292..4d796a92 100644 --- a/ccw/src/templates/dashboard-js/components/index-manager.js +++ b/ccw/src/templates/dashboard-js/components/index-manager.js @@ -39,7 +39,27 @@ async function loadIndexStats() { */ function renderIndexCard() { const container = document.getElementById('indexCard'); - if (!container || !indexData) return; + if (!container) { + console.warn('[IndexManager] Container not found'); + return; + } + + // Handle case when data is not loaded yet + if (!indexData) { + container.innerHTML = ` +
+
+ + ${t('index.manager') || 'Index Manager'} +
+
+
${t('common.loading') || 'Loading...'}
+
+
+ `; + if (typeof lucide !== 'undefined') lucide.createIcons(); + return; + } const { indexDir, indexes, summary } = indexData; @@ -64,113 +84,113 @@ function renderIndexCard() { if (indexes && indexes.length > 0) { indexes.forEach(function(idx) { const vectorBadge = idx.hasVectorIndex - ? '' + (t('index.vector') || 'Vector') + '' + ? `${t('index.vector') || 'Vector'}` : ''; const normalBadge = idx.hasNormalIndex - ? '' + (t('index.fts') || 'FTS') + '' + ? `${t('index.fts') || 'FTS'}` : ''; - indexRows += '\ - \ - \ -
\ - ' + escapeHtml(idx.id) + '\ -
\ - \ - ' + idx.sizeFormatted + '\ - \ -
' + vectorBadge + normalBadge + '
\ - \ - ' + formatTimeAgo(idx.lastModified) + '\ - \ - \ - \ - \ - '; + indexRows += ` + + +
+ ${escapeHtml(idx.id)} +
+ + ${idx.sizeFormatted} + +
${vectorBadge}${normalBadge}
+ + ${formatTimeAgo(idx.lastModified)} + + + + + `; }); } else { - indexRows = '\ - \ - ' + (t('index.noIndexes') || 'No indexes yet') + '\ - \ - '; + indexRows = ` + + ${t('index.noIndexes') || 'No indexes yet'} + + `; } - container.innerHTML = '\ -
\ -
\ -
\ - \ - ' + (t('index.manager') || 'Index Manager') + '\ - ' + (summary?.totalSizeFormatted || '0 B') + '\ -
\ -
\ - \ - \ -
\ -
\ -
\ -
\ - \ - ' + escapeHtml(indexDir || t('index.notConfigured') || 'Not configured') + '\ -
\ -
\ -
\ -
' + (summary?.totalProjects || 0) + '
\ -
' + (t('index.projects') || 'Projects') + '
\ -
\ -
\ -
' + (summary?.totalSizeFormatted || '0 B') + '
\ -
' + (t('index.totalSize') || 'Total Size') + '
\ -
\ -
\ -
' + (summary?.vectorIndexCount || 0) + '
\ -
' + (t('index.vectorIndexes') || 'Vector') + '
\ -
\ -
\ -
' + (summary?.normalIndexCount || 0) + '
\ -
' + (t('index.ftsIndexes') || 'FTS') + '
\ -
\ -
\ -
\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - ' + indexRows + '\ - \ -
' + (t('index.projectId') || 'Project ID') + '' + (t('index.size') || 'Size') + '' + (t('index.type') || 'Type') + '' + (t('index.lastModified') || 'Modified') + '
\ -
\ -
\ - \ - \ -
\ -
\ -
\ - '; + container.innerHTML = ` +
+
+
+ + ${t('index.manager') || 'Index Manager'} + ${summary?.totalSizeFormatted || '0 B'} +
+
+ + +
+
+
+
+ + ${escapeHtml(indexDir || t('index.notConfigured') || 'Not configured')} +
+
+
+
${summary?.totalProjects || 0}
+
${t('index.projects') || 'Projects'}
+
+
+
${summary?.totalSizeFormatted || '0 B'}
+
${t('index.totalSize') || 'Total Size'}
+
+
+
${summary?.vectorIndexCount || 0}
+
${t('index.vectorIndexes') || 'Vector'}
+
+
+
${summary?.normalIndexCount || 0}
+
${t('index.ftsIndexes') || 'FTS'}
+
+
+
+ + + + + + + + + + + + ${indexRows} + +
${t('index.projectId') || 'Project ID'}${t('index.size') || 'Size'}${t('index.type') || 'Type'}${t('index.lastModified') || 'Modified'}
+
+
+ + +
+
+
+ `; // Reinitialize Lucide icons if (typeof lucide !== 'undefined') { @@ -185,24 +205,24 @@ function renderIndexCardError(errorMessage) { const container = document.getElementById('indexCard'); if (!container) return; - container.innerHTML = '\ -
\ -
\ - \ - ' + (t('index.manager') || 'Index Manager') + '\ -
\ -
\ -
\ - \ -
\ -

' + escapeHtml(errorMessage) + '

\ - \ -
\ -
\ - '; + container.innerHTML = ` +
+
+ + ${t('index.manager') || 'Index Manager'} +
+
+
+ +
+

${escapeHtml(errorMessage)}

+ +
+
+ `; // Reinitialize Lucide icons if (typeof lucide !== 'undefined') { diff --git a/ccw/src/templates/dashboard-js/components/modals.js b/ccw/src/templates/dashboard-js/components/modals.js index 2238189e..7b3d6f4d 100644 --- a/ccw/src/templates/dashboard-js/components/modals.js +++ b/ccw/src/templates/dashboard-js/components/modals.js @@ -45,10 +45,26 @@ function showModal(title, content, options = {}) { } function closeModal() { - const overlay = document.querySelector('.generic-modal-overlay'); - if (overlay) { - overlay.classList.remove('active'); - setTimeout(() => overlay.remove(), 200); + // Try generic modal overlay first + const genericOverlay = document.querySelector('.generic-modal-overlay'); + if (genericOverlay) { + genericOverlay.classList.remove('active'); + setTimeout(() => genericOverlay.remove(), 200); + return; + } + + // Try CodexLens config modal + const codexLensModal = document.getElementById('codexlensConfigModal'); + if (codexLensModal) { + codexLensModal.remove(); + return; + } + + // Try any modal-backdrop + const modalBackdrop = document.querySelector('.modal-backdrop'); + if (modalBackdrop) { + modalBackdrop.remove(); + return; } } diff --git a/ccw/src/templates/dashboard-js/views/codexlens-manager.js b/ccw/src/templates/dashboard-js/views/codexlens-manager.js index 7cebca18..5c37ae80 100644 --- a/ccw/src/templates/dashboard-js/views/codexlens-manager.js +++ b/ccw/src/templates/dashboard-js/views/codexlens-manager.js @@ -19,9 +19,10 @@ async function showCodexLensConfigModal() { const modalHtml = buildCodexLensConfigContent(config); // Create and show modal - const modalContainer = document.createElement('div'); - modalContainer.innerHTML = modalHtml; - document.body.appendChild(modalContainer); + const tempContainer = document.createElement('div'); + tempContainer.innerHTML = modalHtml; + const modal = tempContainer.firstElementChild; + document.body.appendChild(modal); // Initialize icons if (window.lucide) lucide.createIcons(); @@ -65,11 +66,21 @@ function buildCodexLensConfigContent(config) { '
' + '
' + '' + t('codexlens.currentWorkspace') + ':' + - '' + (isInstalled ? t('codexlens.installed') : t('codexlens.notInstalled')) + '' + + (isInstalled + ? '' + + '' + + t('codexlens.installed') + + '' + : '' + + '' + + t('codexlens.notInstalled') + + '') + '
' + '
' + '' + t('codexlens.indexes') + ':' + - '' + indexCount + '' + + '' + + indexCount + + '' + '
' + '
' + '' + @@ -106,20 +117,20 @@ function buildCodexLensConfigContent(config) { '

' + t('codexlens.actions') + '

' + '
' + (isInstalled - ? '' + - '' + - '' + - '' - : '') + '
' + '' + @@ -172,12 +183,12 @@ function buildCodexLensConfigContent(config) { '' + '' + '