@nogataka/smart-edit 1.0.2 → 1.0.3

package/dist/smart-edit/resources/dashboard/index.css

@@ -1 +1 @@
-:root{--bg-primary: #f2f2f2;--bg-secondary: #ffffff;--text-primary: #1a1a1a;--text-secondary: #3d3d3d;--text-muted: #777;--border-color: #cfcfcf;--btn-primary: #2b2b2b;--btn-hover: #1e1e1e;--btn-disabled: #9c9c9c;--btn-text: #f5f5f5;--shadow: 0 2px 4px rgba(0, 0, 0, .12);--tool-highlight: #e5e5e5;--tool-highlight-text: #1a1a1a;--log-debug: #888;--log-info: #1a1a1a;--log-warning: #454545;--log-error: #111111;--stats-header: #ebebeb;--sidebar-width: 240px;--sidebar-width-collapsed: 64px;--topbar-height: 56px;--content-padding: 24px;--card-bg: var(--bg-secondary);--card-border-radius: 12px;--card-shadow: 0 2px 8px rgba(0, 0, 0, .08);--card-shadow-hover: 0 4px 16px rgba(0, 0, 0, .12);--card-padding: 20px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-lg: 16px;--font-size-xl: 20px;--font-size-2xl: 24px;--status-success: #22c55e;--status-warning: #f59e0b;--status-error: #ef4444;--status-info: #3b82f6;--input-bg: var(--bg-primary);--input-border: var(--border-color);--input-focus-border: #3b82f6;--input-focus-ring: rgba(59, 130, 246, .3);--nav-item-hover: rgba(0, 0, 0, .04);--nav-item-active: rgba(59, 130, 246, .1);--nav-item-active-border: #3b82f6;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease}[data-theme=dark]{--bg-primary: #121212;--bg-secondary: #1e1e1e;--text-primary: #f1f1f1;--text-secondary: #d0d0d0;--text-muted: #9a9a9a;--border-color: #2c2c2c;--btn-primary: #ededed;--btn-hover: #d6d6d6;--btn-disabled: #4a4a4a;--btn-text: #111111;--shadow: 0 2px 4px rgba(0, 0, 0, .4);--tool-highlight: #2a2a2a;--tool-highlight-text: #f1f1f1;--log-debug: #a0a0a0;--log-info: #f1f1f1;--log-warning: #c7c7c7;--log-error: #ffffff;--stats-header: #262626;--card-bg: var(--bg-secondary);--card-shadow: 0 2px 8px rgba(0, 0, 0, .3);--card-shadow-hover: 0 4px 16px rgba(0, 0, 0, .4);--input-bg: #1a1a1a;--nav-item-hover: rgba(255, 255, 255, .04);--nav-item-active: rgba(59, 130, 246, .15)}*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";margin:0;padding:0;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease;overflow:hidden;height:100vh}#root{height:100%}.header{text-align:center;margin-bottom:20px;font-size:1.5rem;font-weight:700}.log-container{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;height:100%;min-height:400px;overflow-y:auto;overflow-x:auto;padding:var(--spacing-md);white-space:pre-wrap;font-size:12px;line-height:1.5;color:var(--text-primary);font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.log-card{height:calc(100vh - var(--topbar-height) - var(--content-padding) * 2 - var(--spacing-md))}.controls{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.btn{background-color:var(--btn-primary);color:var(--btn-text);border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.btn:hover{background-color:var(--btn-hover)}.btn:disabled{background-color:var(--btn-disabled);color:var(--text-muted);cursor:not-allowed}.theme-toggle{display:flex;align-items:center;justify-content:center;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:50%;width:36px;height:36px;padding:0;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}.theme-toggle:hover{background-color:var(--border-color)}.theme-toggle .icon{font-size:18px;line-height:1}.language-toggle{display:flex;align-items:center;gap:4px;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:18px;padding:6px 10px;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}.language-toggle:hover{background-color:var(--border-color)}.language-toggle .icon{display:flex;align-items:center;color:var(--text-primary)}.language-toggle .language-code{font-size:12px;font-weight:600;color:var(--text-primary)}.log-debug{color:var(--log-debug)}.log-info{color:var(--log-info)}.log-warning{color:var(--log-warning);font-weight:600}.log-error{color:var(--log-error);font-weight:700}.log-default{color:var(--log-info)}.tool-name{background-color:var(--tool-highlight);color:var(--tool-highlight-text);font-weight:700;padding:0 2px;border-radius:2px}.loading{text-align:center;color:var(--text-muted);font-style:italic}.error-message{color:var(--log-error);text-align:center;margin:10px 0}.charts-container{display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;max-width:1400px;margin:0 auto}.chart-group{flex:1;min-width:280px;max-width:320px;text-align:center}.chart-wide{flex:0 0 100%;min-width:100%;margin-top:10px}.chart-group h3{margin:0 0 10px;color:var(--text-secondary)}.stats-summary{margin:0 auto;border-collapse:collapse;background:var(--bg-secondary);border-radius:5px;overflow:hidden;box-shadow:var(--shadow);transition:background-color .3s ease,box-shadow .3s ease}.stats-summary th,.stats-summary td{padding:10px 20px;text-align:left;border-bottom:1px solid var(--border-color);color:var(--text-primary);transition:border-color .3s ease,color .3s ease}.stats-summary th{background-color:var(--stats-header);font-weight:700;transition:background-color .3s ease}.stats-summary tr:last-child td{border-bottom:none}@media(max-width:768px){.charts-container{flex-direction:column}.chart-group,.chart-wide{min-width:auto;max-width:none}.controls{flex-direction:column;gap:5px}}.main-layout{display:flex;height:100vh;overflow:hidden}.sidebar{width:var(--sidebar-width);height:100%;background-color:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;transition:width var(--transition-normal);flex-shrink:0;overflow:hidden}.sidebar.collapsed{width:var(--sidebar-width-collapsed)}.sidebar-header{height:var(--topbar-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-md);border-bottom:1px solid var(--border-color);flex-shrink:0}.sidebar-logo{display:flex;align-items:center;gap:var(--spacing-sm);font-weight:600;font-size:var(--font-size-lg);color:var(--text-primary);white-space:nowrap;overflow:hidden}.sidebar-logo-icon{width:28px;height:28px;flex-shrink:0}.sidebar.collapsed .sidebar-logo-text{display:none}.sidebar-toggle{background:none;border:none;cursor:pointer;padding:var(--spacing-xs);border-radius:4px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:background-color var(--transition-fast)}.sidebar-toggle:hover{background-color:var(--nav-item-hover)}.sidebar-nav{flex:1;padding:var(--spacing-md) var(--spacing-sm);overflow-y:auto}.nav-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:all var(--transition-fast);margin-bottom:var(--spacing-xs);border:none;background:none;width:100%;text-align:left;font-size:var(--font-size-base)}.nav-item:hover{background-color:var(--nav-item-hover);color:var(--text-primary)}.nav-item.active{background-color:var(--nav-item-active);color:var(--nav-item-active-border);font-weight:500}.nav-item-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.nav-item-label{white-space:nowrap;overflow:hidden}.sidebar.collapsed .nav-item-label{display:none}.sidebar.collapsed .nav-item{justify-content:center;padding:var(--spacing-sm)}.sidebar-footer{padding:var(--spacing-md) var(--spacing-sm);border-top:1px solid var(--border-color)}.shutdown-btn{color:var(--status-error)!important}.shutdown-btn:hover{background-color:#ef44441a!important;color:var(--status-error)!important}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.topbar{height:var(--topbar-height);background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 var(--content-padding);flex-shrink:0}.topbar-left{display:flex;align-items:center;gap:var(--spacing-md)}.topbar-title{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary)}.topbar-subtitle{font-size:var(--font-size-sm);color:var(--text-muted)}.topbar-right{display:flex;align-items:center;gap:var(--spacing-md)}.connection-indicator{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--text-muted)}.connection-dot{width:8px;height:8px;border-radius:50%;background-color:var(--status-error)}.connection-dot.streaming{background-color:var(--status-success);animation:pulse 2s infinite}.connection-dot.polling{background-color:var(--status-warning)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.content-area{flex:1;overflow-y:auto;padding:var(--content-padding);background-color:var(--bg-primary)}.card{background-color:var(--card-bg);border-radius:var(--card-border-radius);box-shadow:var(--card-shadow);padding:var(--card-padding);transition:box-shadow var(--transition-fast)}.card:hover{box-shadow:var(--card-shadow-hover)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.card-title{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin:0}.card-subtitle{font-size:var(--font-size-sm);color:var(--text-muted);margin:var(--spacing-xs) 0 0 0}.card-actions{display:flex;gap:var(--spacing-sm)}.card-body{color:var(--text-primary)}@media(max-width:768px){.sidebar{position:fixed;left:0;top:0;z-index:100;transform:translate(-100%);transition:transform var(--transition-normal)}.sidebar.open{transform:translate(0)}.sidebar-backdrop{position:fixed;inset:0;background-color:#00000080;z-index:99;opacity:0;visibility:hidden;transition:opacity var(--transition-normal)}.sidebar-backdrop.visible{opacity:1;visibility:visible}.topbar{padding:0 var(--spacing-md)}.content-area{padding:var(--spacing-md)}.mobile-menu-btn{display:flex;background:none;border:none;cursor:pointer;padding:var(--spacing-xs);color:var(--text-primary)}}@media(min-width:769px){.mobile-menu-btn,.sidebar-backdrop{display:none}}.log-panel{display:flex;flex-direction:column;gap:var(--spacing-md);height:100%}.log-panel-header{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.log-panel-controls{display:flex;align-items:center;gap:var(--spacing-sm)}.log-panel-content{flex:1;min-height:0}@media(max-width:768px){.log-panel-header{gap:var(--spacing-sm)}}.stats-panel{display:flex;flex-direction:column;gap:var(--spacing-lg)}.stats-panel-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--spacing-md)}.stats-panel-actions{display:flex;gap:var(--spacing-sm)}.stats-estimator{font-size:var(--font-size-sm);color:var(--text-muted)}.stats-empty{text-align:center;padding:var(--spacing-xl);color:var(--text-muted)}.stats-empty p{margin:0}.stats-empty-hint{font-size:var(--font-size-sm);margin-top:var(--spacing-sm)!important}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md)}.metric-card{background-color:var(--card-bg);border-radius:var(--card-border-radius);box-shadow:var(--card-shadow);padding:var(--card-padding);transition:box-shadow var(--transition-fast)}.metric-card:hover{box-shadow:var(--card-shadow-hover)}.metric-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm)}.metric-card-title{font-size:var(--font-size-sm);color:var(--text-muted);font-weight:500}.metric-card-icon{color:var(--text-muted)}.metric-card-value{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);line-height:1.2}.metric-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--spacing-sm)}.metric-card-subtitle{font-size:var(--font-size-xs);color:var(--text-muted)}.metric-card-trend{font-size:var(--font-size-xs);font-weight:600;padding:2px 6px;border-radius:4px}.metric-card-trend.up{color:var(--status-success);background-color:#22c55e1a}.metric-card-trend.down{color:var(--status-error);background-color:#ef44441a}.metric-card-trend.neutral{color:var(--text-muted);background-color:var(--nav-item-hover)}.live-counter{font-variant-numeric:tabular-nums}.stats-charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--spacing-lg)}.stats-charts-row{width:100%}.pie-charts-row{display:flex;gap:var(--spacing-lg);justify-content:center;flex-wrap:wrap}.pie-chart-item{flex:1;min-width:250px;max-width:350px}.chart-container{position:relative;width:100%}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:var(--text-muted);font-style:italic;text-align:center;gap:var(--spacing-xs)}.chart-empty-hint{font-size:.85em;opacity:.7}.activity-chart-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm)}.chart-actions{display:flex;justify-content:flex-end;padding-top:var(--spacing-sm)}.btn-sm{padding:4px 8px;font-size:.85em}@media(max-width:768px){.metrics-grid{grid-template-columns:repeat(2,1fr)}.stats-charts-grid{grid-template-columns:1fr}.pie-charts-row{flex-direction:column;align-items:center}.pie-chart-item{max-width:none;width:100%}}.session-panel{display:flex;flex-direction:column;gap:var(--spacing-lg)}.session-panel-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--spacing-lg);flex-wrap:wrap;gap:var(--spacing-md)}.session-panel-title{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin:0}.session-panel-subtitle{font-size:var(--font-size-sm);color:var(--text-muted);margin:var(--spacing-xs) 0 0 0}.session-panel-actions{display:flex;gap:var(--spacing-sm)}.session-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.session-list-empty{text-align:center;padding:var(--spacing-xl);color:var(--text-muted)}.session-list-empty p{margin:0}.session-list-empty-hint{font-size:var(--font-size-sm);margin-top:var(--spacing-sm)!important}.session-item{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:var(--spacing-md);transition:border-color var(--transition-fast)}.session-item:hover{border-color:var(--text-muted)}.session-item-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--spacing-sm)}.session-item-info{display:flex;flex-direction:column;gap:2px}.session-item-date{font-size:var(--font-size-base);font-weight:600;color:var(--text-primary)}.session-item-time{font-size:var(--font-size-sm);color:var(--text-muted)}.session-item-duration{font-size:var(--font-size-sm);color:var(--text-secondary);background-color:var(--nav-item-hover);padding:2px 8px;border-radius:4px}.session-item-project{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.session-item-stats{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-sm)}.session-stat{display:flex;flex-direction:column;gap:2px}.session-stat-label{font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.session-stat-value{font-size:var(--font-size-base);font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}.session-item-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end}.session-action-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;font-size:var(--font-size-sm);color:var(--text-secondary);background:none;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all var(--transition-fast)}.session-action-btn:hover{color:var(--text-primary);border-color:var(--text-muted);background-color:var(--nav-item-hover)}.btn-danger{background-color:transparent;color:var(--status-error);border:1px solid var(--status-error)}.btn-danger:hover{background-color:var(--status-error);color:#fff}.export-btn{display:flex;align-items:center}@media(max-width:768px){.session-panel-header{flex-direction:column;align-items:stretch}.session-panel-actions{justify-content:flex-end}.session-item-stats{flex-wrap:wrap;gap:var(--spacing-md)}}.dashboard-overview{display:flex;flex-direction:column;gap:var(--spacing-lg)}.welcome-section{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-md)}.welcome-content{flex:1}.welcome-title{font-size:var(--font-size-xl);font-weight:600;color:var(--text-primary);margin:0 0 var(--spacing-xs) 0}.welcome-description{font-size:var(--font-size-base);color:var(--text-secondary);margin:0}.connection-badge{flex-shrink:0}.connection-status{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:var(--font-size-sm);font-weight:500}.connection-status:before{content:"";width:8px;height:8px;border-radius:50%}.connection-status.streaming{background-color:#22c55e1a;color:var(--status-success)}.connection-status.streaming:before{background-color:var(--status-success);animation:pulse 2s infinite}.connection-status.polling{background-color:#f59e0b1a;color:var(--status-warning)}.connection-status.polling:before{background-color:var(--status-warning)}.connection-status.disconnected{background-color:#ef44441a;color:var(--status-error)}.connection-status.disconnected:before{background-color:var(--status-error)}.quick-nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md)}.quick-nav-card{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all var(--transition-fast);text-align:left;width:100%}.quick-nav-card:hover{border-color:var(--input-focus-border);background-color:var(--nav-item-active)}.quick-nav-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background-color:var(--nav-item-active);color:var(--input-focus-border);flex-shrink:0}.quick-nav-content{flex:1;min-width:0}.quick-nav-title{font-size:var(--font-size-base);font-weight:600;color:var(--text-primary);margin:0}.quick-nav-description{font-size:var(--font-size-sm);color:var(--text-muted);margin:4px 0 0}.quick-nav-arrow{color:var(--text-muted);flex-shrink:0;transition:transform var(--transition-fast)}.quick-nav-card:hover .quick-nav-arrow{transform:translate(4px);color:var(--input-focus-border)}@media(max-width:768px){.welcome-section{flex-direction:column}.quick-nav-grid{grid-template-columns:1fr}}.search-input-wrapper{position:relative;display:flex;align-items:center}.search-input-icon{position:absolute;left:12px;color:var(--text-muted);pointer-events:none;display:flex;align-items:center}.search-input{width:100%;padding:8px 36px;border:1px solid var(--input-border);border-radius:6px;background-color:var(--input-bg);color:var(--text-primary);font-size:var(--font-size-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.search-input:focus{outline:none;border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--input-focus-ring)}.search-input::placeholder{color:var(--text-muted)}.search-input-clear{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;padding:4px;border:none;background:none;color:var(--text-muted);cursor:pointer;border-radius:4px;transition:color var(--transition-fast),background-color var(--transition-fast)}.search-input-clear:hover{color:var(--text-primary);background-color:var(--nav-item-hover)}.dropdown{position:relative;display:inline-block;min-width:140px}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;border:1px solid var(--input-border);border-radius:6px;background-color:var(--input-bg);color:var(--text-primary);font-size:var(--font-size-sm);cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.dropdown-trigger:hover{border-color:var(--text-muted)}.dropdown-trigger:focus{outline:none;border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--input-focus-ring)}.dropdown-text{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-arrow{display:flex;align-items:center;margin-left:8px;color:var(--text-muted);transition:transform var(--transition-fast)}.dropdown-arrow.open{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:100%;left:0;right:0;margin-top:4px;padding:4px;border:1px solid var(--border-color);border-radius:6px;background-color:var(--bg-secondary);box-shadow:var(--card-shadow);z-index:100;max-height:240px;overflow-y:auto}.dropdown-clear{display:block;width:100%;padding:6px 8px;border:none;background:none;color:var(--status-info);font-size:var(--font-size-xs);text-align:left;cursor:pointer;border-bottom:1px solid var(--border-color);margin-bottom:4px}.dropdown-clear:hover{text-decoration:underline}.dropdown-options{display:flex;flex-direction:column;gap:2px}.dropdown-option{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;cursor:pointer;transition:background-color var(--transition-fast)}.dropdown-option:hover{background-color:var(--nav-item-hover)}.dropdown-option input[type=checkbox],.dropdown-option input[type=radio]{margin:0;accent-color:var(--input-focus-border)}.dropdown-option-label{font-size:var(--font-size-sm);color:var(--text-primary)}.log-filter-bar{display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.log-filter-search{flex:1;min-width:200px;max-width:300px}.log-filter-dropdowns{display:flex;align-items:center;gap:var(--spacing-sm)}.log-filter-clear{padding:8px 12px;font-size:var(--font-size-sm)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--input-border);border-radius:6px;background-color:var(--input-bg);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.icon-btn:hover{border-color:var(--text-muted);color:var(--text-primary);background-color:var(--nav-item-hover)}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.reload-btn.spinning svg{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.filter-stats{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--text-muted)}.filter-stats-count{font-weight:600;color:var(--text-primary)}@media(max-width:768px){.log-filter-bar{flex-direction:column;align-items:stretch}.log-filter-search{max-width:none}.log-filter-dropdowns{flex-wrap:wrap}.dropdown{flex:1;min-width:120px}}
+:root{--bg-primary: #f2f2f2;--bg-secondary: #ffffff;--text-primary: #1a1a1a;--text-secondary: #3d3d3d;--text-muted: #777;--border-color: #cfcfcf;--btn-primary: #2b2b2b;--btn-hover: #1e1e1e;--btn-disabled: #9c9c9c;--btn-text: #f5f5f5;--shadow: 0 2px 4px rgba(0, 0, 0, .12);--tool-highlight: #e5e5e5;--tool-highlight-text: #1a1a1a;--log-debug: #888;--log-info: #1a1a1a;--log-warning: #454545;--log-error: #111111;--stats-header: #ebebeb;--sidebar-width: 240px;--sidebar-width-collapsed: 64px;--topbar-height: 56px;--content-padding: 24px;--card-bg: var(--bg-secondary);--card-border-radius: 12px;--card-shadow: 0 2px 8px rgba(0, 0, 0, .08);--card-shadow-hover: 0 4px 16px rgba(0, 0, 0, .12);--card-padding: 20px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-lg: 16px;--font-size-xl: 20px;--font-size-2xl: 24px;--status-success: #22c55e;--status-warning: #f59e0b;--status-error: #ef4444;--status-info: #3b82f6;--input-bg: var(--bg-primary);--input-border: var(--border-color);--input-focus-border: #3b82f6;--input-focus-ring: rgba(59, 130, 246, .3);--nav-item-hover: rgba(0, 0, 0, .04);--nav-item-active: rgba(59, 130, 246, .1);--nav-item-active-border: #3b82f6;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease}[data-theme=dark]{--bg-primary: #121212;--bg-secondary: #1e1e1e;--text-primary: #f1f1f1;--text-secondary: #d0d0d0;--text-muted: #9a9a9a;--border-color: #2c2c2c;--btn-primary: #ededed;--btn-hover: #d6d6d6;--btn-disabled: #4a4a4a;--btn-text: #111111;--shadow: 0 2px 4px rgba(0, 0, 0, .4);--tool-highlight: #2a2a2a;--tool-highlight-text: #f1f1f1;--log-debug: #a0a0a0;--log-info: #f1f1f1;--log-warning: #c7c7c7;--log-error: #ffffff;--stats-header: #262626;--card-bg: var(--bg-secondary);--card-shadow: 0 2px 8px rgba(0, 0, 0, .3);--card-shadow-hover: 0 4px 16px rgba(0, 0, 0, .4);--input-bg: #1a1a1a;--nav-item-hover: rgba(255, 255, 255, .04);--nav-item-active: rgba(59, 130, 246, .15)}*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";margin:0;padding:0;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease;overflow:hidden;height:100vh}#root{height:100%}.header{text-align:center;margin-bottom:20px;font-size:1.5rem;font-weight:700}.log-container{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;height:100%;min-height:400px;overflow-y:auto;overflow-x:auto;padding:var(--spacing-md);white-space:pre-wrap;font-size:12px;line-height:1.5;color:var(--text-primary);font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;transition:background-color .3s ease,border-color .3s ease,color .3s ease}.log-card{height:calc(100vh - var(--topbar-height) - var(--content-padding) * 2 - var(--spacing-md))}.controls{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.btn{background-color:var(--btn-primary);color:var(--btn-text);border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.btn:hover{background-color:var(--btn-hover)}.btn:disabled{background-color:var(--btn-disabled);color:var(--text-muted);cursor:not-allowed}.theme-toggle{display:flex;align-items:center;justify-content:center;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:50%;width:36px;height:36px;padding:0;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}.theme-toggle:hover{background-color:var(--border-color)}.theme-toggle .icon{font-size:18px;line-height:1}.language-toggle{display:flex;align-items:center;gap:4px;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:18px;padding:6px 10px;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}.language-toggle:hover{background-color:var(--border-color)}.language-toggle .icon{display:flex;align-items:center;color:var(--text-primary)}.language-toggle .language-code{font-size:12px;font-weight:600;color:var(--text-primary)}.log-debug{color:var(--log-debug)}.log-info{color:var(--log-info)}.log-warning{color:var(--log-warning);font-weight:600}.log-error{color:var(--log-error);font-weight:700}.log-default{color:var(--log-info)}.tool-name{background-color:var(--tool-highlight);color:var(--tool-highlight-text);font-weight:700;padding:0 2px;border-radius:2px}.loading{text-align:center;color:var(--text-muted);font-style:italic}.error-message{color:var(--log-error);text-align:center;margin:10px 0}.charts-container{display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;max-width:1400px;margin:0 auto}.chart-group{flex:1;min-width:280px;max-width:320px;text-align:center}.chart-wide{flex:0 0 100%;min-width:100%;margin-top:10px}.chart-group h3{margin:0 0 10px;color:var(--text-secondary)}.stats-summary{margin:0 auto;border-collapse:collapse;background:var(--bg-secondary);border-radius:5px;overflow:hidden;box-shadow:var(--shadow);transition:background-color .3s ease,box-shadow .3s ease}.stats-summary th,.stats-summary td{padding:10px 20px;text-align:left;border-bottom:1px solid var(--border-color);color:var(--text-primary);transition:border-color .3s ease,color .3s ease}.stats-summary th{background-color:var(--stats-header);font-weight:700;transition:background-color .3s ease}.stats-summary tr:last-child td{border-bottom:none}@media(max-width:768px){.charts-container{flex-direction:column}.chart-group,.chart-wide{min-width:auto;max-width:none}.controls{flex-direction:column;gap:5px}}.main-layout{display:flex;height:100vh;overflow:hidden}.sidebar{width:var(--sidebar-width);height:100%;background-color:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;transition:width var(--transition-normal);flex-shrink:0;overflow:hidden}.sidebar.collapsed{width:var(--sidebar-width-collapsed)}.sidebar-header{height:var(--topbar-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-md);border-bottom:1px solid var(--border-color);flex-shrink:0}.sidebar-logo{display:flex;align-items:center;gap:var(--spacing-sm);font-weight:600;font-size:var(--font-size-lg);color:var(--text-primary);white-space:nowrap;overflow:hidden}.sidebar-logo-icon{width:28px;height:28px;flex-shrink:0}.sidebar.collapsed .sidebar-logo-text{display:none}.sidebar-toggle{background:none;border:none;cursor:pointer;padding:var(--spacing-xs);border-radius:4px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:background-color var(--transition-fast)}.sidebar-toggle:hover{background-color:var(--nav-item-hover)}.sidebar-content{flex:1;padding:var(--spacing-md);overflow-y:auto}.sidebar-section{margin-bottom:var(--spacing-lg)}.sidebar-section-title{font-size:var(--font-size-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 var(--spacing-sm) 0}.project-info{display:flex;flex-direction:column;gap:var(--spacing-sm)}.project-name{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--text-primary);font-weight:600;font-size:var(--font-size-base)}.project-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-path{font-size:var(--font-size-xs);color:var(--text-muted);word-break:break-all;line-height:1.4}.project-empty{color:var(--text-muted);font-size:var(--font-size-sm);font-style:italic}.instance-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.instance-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border-radius:6px;cursor:pointer;border:none;background:none;color:var(--text-secondary);font-size:var(--font-size-sm);text-align:left;transition:all var(--transition-fast)}.instance-item:hover{background-color:var(--nav-item-hover);color:var(--text-primary)}.instance-item.active{background-color:var(--nav-item-active);color:var(--text-primary)}.instance-indicator{width:8px;height:8px;border-radius:50%;background-color:var(--text-muted);flex-shrink:0}.instance-indicator.active{background-color:var(--status-success)}.instance-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-footer{padding:var(--spacing-md);border-top:1px solid var(--border-color)}.sidebar-action-btn{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border-radius:6px;cursor:pointer;border:none;background:none;font-size:var(--font-size-sm);transition:all var(--transition-fast)}.sidebar-action-btn.shutdown-btn{color:var(--status-error)}.sidebar-action-btn.shutdown-btn:hover{background-color:#ef44441a}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.topbar{height:var(--topbar-height);background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 var(--content-padding);flex-shrink:0}.topbar-nav{display:flex;align-items:center;gap:var(--spacing-xs)}.topbar-nav-item{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);border-radius:6px;cursor:pointer;color:var(--text-secondary);transition:all var(--transition-fast);border:none;background:none;font-size:var(--font-size-sm);font-weight:500}.topbar-nav-item:hover{background-color:var(--nav-item-hover);color:var(--text-primary)}.topbar-nav-item.active{background-color:var(--nav-item-active);color:var(--nav-item-active-border)}.topbar-nav-icon{display:flex;align-items:center;justify-content:center}.topbar-nav-label{white-space:nowrap}.topbar-right{display:flex;align-items:center;gap:var(--spacing-md)}.connection-indicator{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--text-muted)}.connection-dot{width:8px;height:8px;border-radius:50%;background-color:var(--status-error)}.connection-dot.streaming{background-color:var(--status-success);animation:pulse 2s infinite}.connection-dot.polling{background-color:var(--status-warning)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.content-area{flex:1;overflow-y:auto;padding:var(--content-padding);background-color:var(--bg-primary)}.card{background-color:var(--card-bg);border-radius:var(--card-border-radius);box-shadow:var(--card-shadow);padding:var(--card-padding);transition:box-shadow var(--transition-fast)}.card:hover{box-shadow:var(--card-shadow-hover)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.card-title{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin:0}.card-subtitle{font-size:var(--font-size-sm);color:var(--text-muted);margin:var(--spacing-xs) 0 0 0}.card-actions{display:flex;gap:var(--spacing-sm)}.card-body{color:var(--text-primary)}@media(max-width:768px){.sidebar{position:fixed;left:0;top:0;z-index:100;transform:translate(-100%);transition:transform var(--transition-normal)}.sidebar.open{transform:translate(0)}.sidebar-backdrop{position:fixed;inset:0;background-color:#00000080;z-index:99;opacity:0;visibility:hidden;transition:opacity var(--transition-normal)}.sidebar-backdrop.visible{opacity:1;visibility:visible}.topbar{padding:0 var(--spacing-md)}.content-area{padding:var(--spacing-md)}.mobile-menu-btn{display:flex;background:none;border:none;cursor:pointer;padding:var(--spacing-xs);color:var(--text-primary)}}@media(min-width:769px){.mobile-menu-btn,.sidebar-backdrop{display:none}}.log-panel{display:flex;flex-direction:column;gap:var(--spacing-md);height:100%}.log-panel-header{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.log-panel-controls{display:flex;align-items:center;gap:var(--spacing-sm)}.log-panel-content{flex:1;min-height:0}@media(max-width:768px){.log-panel-header{gap:var(--spacing-sm)}}.stats-panel{display:flex;flex-direction:column;gap:var(--spacing-lg)}.stats-panel-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--spacing-md)}.stats-panel-actions{display:flex;gap:var(--spacing-sm)}.stats-estimator{font-size:var(--font-size-sm);color:var(--text-muted)}.stats-empty{text-align:center;padding:var(--spacing-xl);color:var(--text-muted)}.stats-empty p{margin:0}.stats-empty-hint{font-size:var(--font-size-sm);margin-top:var(--spacing-sm)!important}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md)}.metric-card{background-color:var(--card-bg);border-radius:var(--card-border-radius);box-shadow:var(--card-shadow);padding:var(--card-padding);transition:box-shadow var(--transition-fast)}.metric-card:hover{box-shadow:var(--card-shadow-hover)}.metric-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm)}.metric-card-title{font-size:var(--font-size-sm);color:var(--text-muted);font-weight:500}.metric-card-icon{color:var(--text-muted)}.metric-card-value{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);line-height:1.2}.metric-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--spacing-sm)}.metric-card-subtitle{font-size:var(--font-size-xs);color:var(--text-muted)}.metric-card-trend{font-size:var(--font-size-xs);font-weight:600;padding:2px 6px;border-radius:4px}.metric-card-trend.up{color:var(--status-success);background-color:#22c55e1a}.metric-card-trend.down{color:var(--status-error);background-color:#ef44441a}.metric-card-trend.neutral{color:var(--text-muted);background-color:var(--nav-item-hover)}.live-counter{font-variant-numeric:tabular-nums}.stats-charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--spacing-lg)}.stats-charts-row{width:100%}.pie-charts-row{display:flex;gap:var(--spacing-lg);justify-content:center;flex-wrap:wrap}.pie-chart-item{flex:1;min-width:250px;max-width:350px}.chart-container{position:relative;width:100%}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:var(--text-muted);font-style:italic;text-align:center;gap:var(--spacing-xs)}.chart-empty-hint{font-size:.85em;opacity:.7}.activity-chart-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm)}.chart-actions{display:flex;justify-content:flex-end;padding-top:var(--spacing-sm)}.btn-sm{padding:4px 8px;font-size:.85em}@media(max-width:768px){.metrics-grid{grid-template-columns:repeat(2,1fr)}.stats-charts-grid{grid-template-columns:1fr}.pie-charts-row{flex-direction:column;align-items:center}.pie-chart-item{max-width:none;width:100%}}.session-panel{display:flex;flex-direction:column;gap:var(--spacing-lg)}.session-panel-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--spacing-lg);flex-wrap:wrap;gap:var(--spacing-md)}.session-panel-title{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin:0}.session-panel-subtitle{font-size:var(--font-size-sm);color:var(--text-muted);margin:var(--spacing-xs) 0 0 0}.session-panel-actions{display:flex;gap:var(--spacing-sm)}.session-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.session-list-empty{text-align:center;padding:var(--spacing-xl);color:var(--text-muted)}.session-list-empty p{margin:0}.session-list-empty-hint{font-size:var(--font-size-sm);margin-top:var(--spacing-sm)!important}.session-item{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:var(--spacing-md);transition:border-color var(--transition-fast)}.session-item:hover{border-color:var(--text-muted)}.session-item-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--spacing-sm)}.session-item-info{display:flex;flex-direction:column;gap:2px}.session-item-date{font-size:var(--font-size-base);font-weight:600;color:var(--text-primary)}.session-item-time{font-size:var(--font-size-sm);color:var(--text-muted)}.session-item-duration{font-size:var(--font-size-sm);color:var(--text-secondary);background-color:var(--nav-item-hover);padding:2px 8px;border-radius:4px}.session-item-project{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.session-item-stats{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-sm)}.session-stat{display:flex;flex-direction:column;gap:2px}.session-stat-label{font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.session-stat-value{font-size:var(--font-size-base);font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}.session-item-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end}.session-action-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;font-size:var(--font-size-sm);color:var(--text-secondary);background:none;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all var(--transition-fast)}.session-action-btn:hover{color:var(--text-primary);border-color:var(--text-muted);background-color:var(--nav-item-hover)}.btn-danger{background-color:transparent;color:var(--status-error);border:1px solid var(--status-error)}.btn-danger:hover{background-color:var(--status-error);color:#fff}.export-btn{display:flex;align-items:center}@media(max-width:768px){.session-panel-header{flex-direction:column;align-items:stretch}.session-panel-actions{justify-content:flex-end}.session-item-stats{flex-wrap:wrap;gap:var(--spacing-md)}}.dashboard-overview{display:flex;flex-direction:column;gap:var(--spacing-lg)}.welcome-section{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-md)}.welcome-content{flex:1}.welcome-title{font-size:var(--font-size-xl);font-weight:600;color:var(--text-primary);margin:0 0 var(--spacing-xs) 0}.welcome-description{font-size:var(--font-size-base);color:var(--text-secondary);margin:0}.connection-badge{flex-shrink:0}.connection-status{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:var(--font-size-sm);font-weight:500}.connection-status:before{content:"";width:8px;height:8px;border-radius:50%}.connection-status.streaming{background-color:#22c55e1a;color:var(--status-success)}.connection-status.streaming:before{background-color:var(--status-success);animation:pulse 2s infinite}.connection-status.polling{background-color:#f59e0b1a;color:var(--status-warning)}.connection-status.polling:before{background-color:var(--status-warning)}.connection-status.disconnected{background-color:#ef44441a;color:var(--status-error)}.connection-status.disconnected:before{background-color:var(--status-error)}.quick-nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md)}.quick-nav-card{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all var(--transition-fast);text-align:left;width:100%}.quick-nav-card:hover{border-color:var(--input-focus-border);background-color:var(--nav-item-active)}.quick-nav-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background-color:var(--nav-item-active);color:var(--input-focus-border);flex-shrink:0}.quick-nav-content{flex:1;min-width:0}.quick-nav-title{font-size:var(--font-size-base);font-weight:600;color:var(--text-primary);margin:0}.quick-nav-description{font-size:var(--font-size-sm);color:var(--text-muted);margin:4px 0 0}.quick-nav-arrow{color:var(--text-muted);flex-shrink:0;transition:transform var(--transition-fast)}.quick-nav-card:hover .quick-nav-arrow{transform:translate(4px);color:var(--input-focus-border)}@media(max-width:768px){.welcome-section{flex-direction:column}.quick-nav-grid{grid-template-columns:1fr}}.search-input-wrapper{position:relative;display:flex;align-items:center}.search-input-icon{position:absolute;left:12px;color:var(--text-muted);pointer-events:none;display:flex;align-items:center}.search-input{width:100%;padding:8px 36px;border:1px solid var(--input-border);border-radius:6px;background-color:var(--input-bg);color:var(--text-primary);font-size:var(--font-size-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.search-input:focus{outline:none;border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--input-focus-ring)}.search-input::placeholder{color:var(--text-muted)}.search-input-clear{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;padding:4px;border:none;background:none;color:var(--text-muted);cursor:pointer;border-radius:4px;transition:color var(--transition-fast),background-color var(--transition-fast)}.search-input-clear:hover{color:var(--text-primary);background-color:var(--nav-item-hover)}.dropdown{position:relative;display:inline-block;min-width:140px}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;border:1px solid var(--input-border);border-radius:6px;background-color:var(--input-bg);color:var(--text-primary);font-size:var(--font-size-sm);cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.dropdown-trigger:hover{border-color:var(--text-muted)}.dropdown-trigger:focus{outline:none;border-color:var(--input-focus-border);box-shadow:0 0 0 3px var(--input-focus-ring)}.dropdown-text{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-arrow{display:flex;align-items:center;margin-left:8px;color:var(--text-muted);transition:transform var(--transition-fast)}.dropdown-arrow.open{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:100%;left:0;right:0;margin-top:4px;padding:4px;border:1px solid var(--border-color);border-radius:6px;background-color:var(--bg-secondary);box-shadow:var(--card-shadow);z-index:100;max-height:240px;overflow-y:auto}.dropdown-clear{display:block;width:100%;padding:6px 8px;border:none;background:none;color:var(--status-info);font-size:var(--font-size-xs);text-align:left;cursor:pointer;border-bottom:1px solid var(--border-color);margin-bottom:4px}.dropdown-clear:hover{text-decoration:underline}.dropdown-options{display:flex;flex-direction:column;gap:2px}.dropdown-option{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;cursor:pointer;transition:background-color var(--transition-fast)}.dropdown-option:hover{background-color:var(--nav-item-hover)}.dropdown-option input[type=checkbox],.dropdown-option input[type=radio]{margin:0;accent-color:var(--input-focus-border)}.dropdown-option-label{font-size:var(--font-size-sm);color:var(--text-primary)}.log-filter-bar{display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.log-filter-search{flex:1;min-width:200px;max-width:300px}.log-filter-dropdowns{display:flex;align-items:center;gap:var(--spacing-sm)}.log-filter-clear{padding:8px 12px;font-size:var(--font-size-sm)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--input-border);border-radius:6px;background-color:var(--input-bg);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.icon-btn:hover{border-color:var(--text-muted);color:var(--text-primary);background-color:var(--nav-item-hover)}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.reload-btn.spinning svg{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.filter-stats{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--text-muted)}.filter-stats-count{font-weight:600;color:var(--text-primary)}@media(max-width:768px){.log-filter-bar{flex-direction:column;align-items:stretch}.log-filter-search{max-width:none}.log-filter-dropdowns{flex-wrap:wrap}.dropdown{flex:1;min-width:120px}}

package/dist/smart-edit/standalone-dashboard.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Standalone Dashboard Server for Multi-Instance Mode
+ *
+ * This server runs independently from MCP servers and provides:
+ * - Static file serving for the dashboard UI
+ * - API endpoints to list registered instances
+ * - Proxy capabilities to forward requests to individual MCP instances
+ */
+export interface StandaloneDashboardOptions {
+    port?: number;
+}
+export declare class StandaloneDashboardServer {
+    private server;
+    private listeningPort;
+    private readonly requestedPort;
+    constructor(options?: StandaloneDashboardOptions);
+    start(): Promise<number>;
+    stop(): void;
+    getPort(): number | null;
+    private startServer;
+    private listenOnPort;
+    private handleRequest;
+    private handleGetInstances;
+    private serveDashboardAsset;
+    private respondNotFound;
+    private respondMethodNotAllowed;
+    private sendJson;
+}
+/**
+ * Start a standalone dashboard server and wait for shutdown signal.
+ */
+export declare function runStandaloneDashboard(options?: StandaloneDashboardOptions): Promise<void>;

package/dist/smart-edit/standalone-dashboard.js

@@ -0,0 +1,223 @@
+/**
+ * Standalone Dashboard Server for Multi-Instance Mode
+ *
+ * This server runs independently from MCP servers and provides:
+ * - Static file serving for the dashboard UI
+ * - API endpoints to list registered instances
+ * - Proxy capabilities to forward requests to individual MCP instances
+ */
+import { Buffer } from 'node:buffer';
+import { createServer } from 'node:http';
+import { parse as parseUrl } from 'node:url';
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { createSmartEditLogger } from './util/logging.js';
+import { SMART_EDIT_DASHBOARD_DIR } from './constants.js';
+import { getInstances, DEFAULT_DASHBOARD_PORT } from './instance-registry.js';
+const { logger } = createSmartEditLogger({ name: 'smart-edit.standalone-dashboard', emitToConsole: true, level: 'info' });
+const DASHBOARD_HOST = '127.0.0.1';
+const CONTENT_TYPE_BY_EXTENSION = {
+    '.html': 'text/html; charset=utf-8',
+    '.js': 'application/javascript; charset=utf-8',
+    '.css': 'text/css; charset=utf-8',
+    '.png': 'image/png',
+    '.json': 'application/json; charset=utf-8',
+    '.ico': 'image/x-icon'
+};
+export class StandaloneDashboardServer {
+    server = null;
+    listeningPort = null;
+    requestedPort;
+    constructor(options = {}) {
+        this.requestedPort = options.port ?? DEFAULT_DASHBOARD_PORT;
+    }
+    async start() {
+        if (this.server && this.listeningPort !== null) {
+            return this.listeningPort;
+        }
+        const { server, port } = await this.startServer();
+        this.server = server;
+        this.listeningPort = port;
+        logger.info(`Smart-Edit standalone dashboard listening on http://${DASHBOARD_HOST}:${port}/dashboard/`);
+        return port;
+    }
+    stop() {
+        if (this.server) {
+            this.server.close((error) => {
+                if (error) {
+                    logger.warn('Failed to stop standalone dashboard server cleanly.', error);
+                }
+            });
+            this.server = null;
+            this.listeningPort = null;
+        }
+    }
+    getPort() {
+        return this.listeningPort;
+    }
+    async startServer() {
+        let candidatePort = this.requestedPort;
+        let lastError = null;
+        while (candidatePort <= 65535) {
+            const server = createServer((req, res) => {
+                void this.handleRequest(req, res);
+            });
+            try {
+                const port = await this.listenOnPort(server, candidatePort);
+                return { server, port };
+            }
+            catch (error) {
+                lastError = error;
+                try {
+                    server.close();
+                }
+                catch {
+                    // ignore close errors
+                }
+                if (lastError && (lastError.code === 'EADDRINUSE' || lastError.code === 'EACCES')) {
+                    candidatePort += 1;
+                    continue;
+                }
+                logger.error('Failed to start standalone dashboard server.', lastError ?? undefined);
+                break;
+            }
+        }
+        throw new Error(lastError?.message ?? 'Unable to start standalone dashboard server; no available ports.');
+    }
+    listenOnPort(server, port) {
+        return new Promise((resolve, reject) => {
+            const onError = (error) => {
+                cleanup();
+                reject(error);
+            };
+            const onListening = () => {
+                const address = server.address();
+                cleanup();
+                if (address && typeof address === 'object') {
+                    resolve(address.port);
+                }
+                else {
+                    resolve(port);
+                }
+            };
+            const cleanup = () => {
+                server.off('error', onError);
+                server.off('listening', onListening);
+            };
+            server.once('error', onError);
+            server.once('listening', onListening);
+            server.listen({ port, host: DASHBOARD_HOST, exclusive: true });
+        });
+    }
+    async handleRequest(req, res) {
+        const method = req.method?.toUpperCase() ?? 'GET';
+        const url = parseUrl(req.url ?? '/', true);
+        const pathname = url.pathname ?? '/';
+        // Add CORS headers for cross-origin requests from dashboard UI to MCP instances
+        res.setHeader('Access-Control-Allow-Origin', '*');
+        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, OPTIONS');
+        res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+        if (method === 'OPTIONS') {
+            res.statusCode = 204;
+            res.end();
+            return;
+        }
+        try {
+            // Redirect root to dashboard
+            if (pathname === '/' || pathname === '') {
+                res.statusCode = 302;
+                res.setHeader('Location', '/dashboard/');
+                res.end();
+                return;
+            }
+            if (pathname.startsWith('/dashboard')) {
+                if (method !== 'GET') {
+                    this.respondMethodNotAllowed(res);
+                    return;
+                }
+                await this.serveDashboardAsset(pathname, res);
+                return;
+            }
+            // API endpoints for multi-instance mode
+            if (pathname === '/api/instances') {
+                if (method !== 'GET') {
+                    this.respondMethodNotAllowed(res);
+                    return;
+                }
+                this.handleGetInstances(res);
+                return;
+            }
+            this.respondNotFound(res);
+        }
+        catch (error) {
+            logger.error('Standalone dashboard request failed.', error instanceof Error ? error : undefined);
+            this.sendJson(res, 500, { error: 'Internal server error' });
+        }
+    }
+    handleGetInstances(res) {
+        const instances = getInstances();
+        this.sendJson(res, 200, { instances });
+    }
+    async serveDashboardAsset(pathname, res) {
+        let relativePath = pathname.replace(/^\/dashboard\/?/, '');
+        // Handle directory requests
+        if (relativePath === '' || relativePath.endsWith('/')) {
+            relativePath = relativePath + 'index.html';
+        }
+        const resolvedPath = path.resolve(SMART_EDIT_DASHBOARD_DIR, decodeURIComponent(relativePath));
+        if (!resolvedPath.startsWith(path.resolve(SMART_EDIT_DASHBOARD_DIR))) {
+            this.respondNotFound(res);
+            return;
+        }
+        try {
+            const file = await fs.readFile(resolvedPath);
+            const ext = path.extname(resolvedPath).toLowerCase();
+            const contentType = CONTENT_TYPE_BY_EXTENSION[ext] ?? 'application/octet-stream';
+            res.statusCode = 200;
+            res.setHeader('Content-Type', contentType);
+            res.setHeader('Content-Length', file.length);
+            res.end(file);
+        }
+        catch (error) {
+            if (error.code === 'ENOENT') {
+                this.respondNotFound(res);
+                return;
+            }
+            throw error;
+        }
+    }
+    respondNotFound(res) {
+        res.statusCode = 404;
+        res.end('Not found');
+    }
+    respondMethodNotAllowed(res) {
+        res.statusCode = 405;
+        res.end('Method not allowed');
+    }
+    sendJson(res, statusCode, payload) {
+        const body = JSON.stringify(payload);
+        res.statusCode = statusCode;
+        res.setHeader('Content-Type', 'application/json; charset=utf-8');
+        res.setHeader('Content-Length', Buffer.byteLength(body, 'utf-8'));
+        res.end(body);
+    }
+}
+/**
+ * Start a standalone dashboard server and wait for shutdown signal.
+ */
+export async function runStandaloneDashboard(options = {}) {
+    const server = new StandaloneDashboardServer(options);
+    const port = await server.start();
+    console.log(`Smart-Edit Dashboard is running at: http://127.0.0.1:${port}/dashboard/`);
+    console.log('Press Ctrl+C to stop.');
+    await new Promise((resolve) => {
+        const shutdown = () => {
+            console.log('\nShutting down dashboard...');
+            server.stop();
+            resolve();
+        };
+        process.once('SIGINT', shutdown);
+        process.once('SIGTERM', shutdown);
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nogataka/smart-edit",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Smart Edit is a tool for editing code with AI.",
   "private": false,
   "license": "MIT",