bgrun 3.12.1 → 3.12.2

package/dashboard/app/globals.css

@@ -54,6 +54,40 @@
     --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
+/* ─── Light Theme ─── */
+[data-theme="light"] {
+    --bg-primary: #f8fafc;
+    --bg-secondary: #f1f5f9;
+    --bg-surface: #e2e8f0;
+    --bg-card: rgba(255, 255, 255, 0.9);
+    --bg-glass: rgba(0, 0, 0, 0.03);
+    --bg-hover: rgba(0, 0, 0, 0.05);
+    --bg-elevated: rgba(0, 0, 0, 0.04);
+    --bg-deeper: #e2e8f0;
+    --border-glass: rgba(0, 0, 0, 0.1);
+    --border-hover: rgba(0, 0, 0, 0.18);
+    --border-subtle: rgba(0, 0, 0, 0.06);
+    --border: rgba(0, 0, 0, 0.12);
+    --text-primary: #0f172a;
+    --text-secondary: #475569;
+    --text-muted: #64748b;
+    --text-dim: #94a3b8;
+    --text: #1e293b;
+    --shadow-glow: 0 0 80px rgba(99, 102, 241, 0.06);
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 20px rgba(0, 0, 0, 0.04);
+    --shadow-elevated: 0 4px 24px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+
+[data-theme="light"] body::before,
+[data-theme="light"] body::after {
+    display: none;
+}
+
+[data-theme="light"] html {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -353,6 +387,50 @@ body::after {
     opacity: 1;
 }
 
+.stat-clickable {
+    cursor: pointer;
+}
+
+.stat-clickable.stat-active {
+    box-shadow: inset 0 0 0 2px var(--accent-primary), var(--shadow-elevated);
+    transform: translateY(-2px);
+}
+
+.stat-filter-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.3rem 0.55rem 0.3rem 0.7rem;
+    border-radius: 999px;
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    background: rgba(99, 102, 241, 0.12);
+    color: #a5b4fc;
+    font-size: 0.72rem;
+    font-weight: 600;
+    white-space: nowrap;
+    animation: fadeIn 0.2s ease;
+}
+
+.stat-filter-badge-clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.2rem;
+    height: 1.2rem;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.1);
+    color: inherit;
+    font-size: 0.6rem;
+    cursor: pointer;
+    line-height: 1;
+}
+
+.stat-filter-badge-clear:hover {
+    background: rgba(239, 68, 68, 0.3);
+    color: #fca5a5;
+}
+
 .stat-card.running {
     border-left: 3px solid var(--success);
 }
@@ -463,6 +541,40 @@ body::after {
     color: var(--warning);
 }
 
+.stat-card.uptime {
+    border-left: 3px solid var(--info);
+}
+
+.stat-card.uptime::before {
+    background: var(--info);
+    opacity: 0.08;
+}
+
+.stat-card.uptime:hover::before {
+    opacity: 0.12;
+}
+
+.stat-card.uptime .stat-value {
+    color: var(--info);
+}
+
+.stat-card.uptime-total {
+    border-left: 3px solid var(--accent-secondary);
+}
+
+.stat-card.uptime-total::before {
+    background: var(--accent-secondary);
+    opacity: 0.08;
+}
+
+.stat-card.uptime-total:hover::before {
+    opacity: 0.12;
+}
+
+.stat-card.uptime-total .stat-value {
+    color: var(--accent-secondary);
+}
+
 /* ─── Guard Toggle (inline shield icon in process name) ─── */
 .guard-toggle {
     display: inline-flex;
@@ -542,6 +654,99 @@ body::after {
     border-color: var(--text-muted);
 }
 
+.deploy-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.deploy-concurrency-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.35rem 0.55rem;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+}
+
+.deploy-concurrency-label {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    font-weight: 600;
+}
+
+.deploy-concurrency-select {
+    border: none;
+    background: transparent;
+    color: var(--text);
+    font-size: 0.82rem;
+    font-weight: 700;
+    cursor: pointer;
+    outline: none;
+}
+
+.deploy-concurrency-select:disabled {
+    opacity: 0.6;
+    cursor: wait;
+}
+
+#deploy-preset-reset-btn[disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+.deploy-preset-source {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 3.9rem;
+    padding: 0.22rem 0.5rem;
+    border-radius: 999px;
+    background: rgba(139, 148, 158, 0.16);
+    color: var(--text-muted);
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.deploy-preset-source.is-preset {
+    background: rgba(34, 197, 94, 0.15);
+    color: #86efac;
+}
+
+.deploy-preset-scopes {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    flex-wrap: wrap;
+}
+
+.deploy-preset-scope {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.18rem 0.45rem;
+    border-radius: 999px;
+    background: rgba(139, 148, 158, 0.14);
+    color: var(--text-muted);
+    font-size: 0.7rem;
+    font-weight: 700;
+    border: none;
+    cursor: pointer;
+}
+
+.deploy-preset-scope:hover {
+    color: var(--text);
+    background: rgba(139, 148, 158, 0.22);
+}
+
+.deploy-preset-scope.active {
+    background: rgba(34, 197, 94, 0.18);
+    color: #86efac;
+}
+
 /* Guard action button styling */
 .action-btn.guard {
     color: var(--text-muted);
@@ -605,6 +810,7 @@ body::after {
     align-items: center;
     gap: 1rem;
     flex: 1;
+    flex-wrap: wrap;
 }
 
 .toolbar-right {
@@ -1472,6 +1678,61 @@ a.port-link:hover {
     color: var(--text-muted);
 }
 
+.port-input-wrap {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.port-input-wrap input {
+    flex: 1;
+}
+
+.port-input-wrap .btn {
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
+.port-range-wrap {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-top: 0.45rem;
+}
+
+.port-range-label {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.port-range-input {
+    width: 80px;
+    padding: 0.3rem 0.5rem;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-glass);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: 0.78rem;
+    font-family: var(--font-mono);
+}
+
+.port-range-input:focus {
+    border-color: var(--accent-primary);
+    outline: none;
+}
+
+.port-range-sep {
+    color: var(--text-dim);
+    font-size: 0.8rem;
+}
+
+.port-conflict {
+    border-color: var(--danger) !important;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
+}
+
 .modal-footer {
     padding: 1rem 1.5rem;
     border-top: 1px solid var(--border-glass);
@@ -2027,33 +2288,33 @@ a.port-link:hover {
     text-align: center;
 }
 
-/* ─── Config Editor Panel ─── */
-.drawer-config {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-#config-panel-toml {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-#config-panel-env {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-.config-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1rem;
+/* ─── Config Editor Panel ─── */
+.drawer-config {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+#config-panel-toml {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+#config-panel-env {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.config-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
     border-bottom: 1px solid var(--border-glass);
     background: rgba(0, 0, 0, 0.12);
     flex-shrink: 0;
@@ -2071,21 +2332,21 @@ a.port-link:hover {
     min-width: 0;
 }
 
-.config-editor {
-    flex: 1;
-    width: 100%;
-    resize: vertical;
-    background: rgba(0, 0, 0, 0.25);
-    color: var(--text-primary);
-    font-family: var(--font-mono);
-    font-size: 0.78rem;
-    line-height: 1.7;
-    padding: 1rem 1.5rem;
-    border: none;
-    outline: none;
-    min-height: 220px;
-    tab-size: 4;
-}
+.config-editor {
+    flex: 1;
+    width: 100%;
+    resize: vertical;
+    background: rgba(0, 0, 0, 0.25);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: 0.78rem;
+    line-height: 1.7;
+    padding: 1rem 1.5rem;
+    border: none;
+    outline: none;
+    min-height: 220px;
+    tab-size: 4;
+}
 
 .config-editor:focus {
     background: rgba(0, 0, 0, 0.3);
@@ -2331,7 +2592,7 @@ a.port-link:hover {
 
 @media (max-width: 768px) {
     .container {
-        padding: 1rem;
+        padding: 0.75rem;
     }
 
     .header {
@@ -2341,22 +2602,58 @@ a.port-link:hover {
     }
 
     .stats-grid {
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.6rem;
+        margin-bottom: 1rem;
+    }
+
+    .stat-card {
+        padding: 0.85rem 1rem;
+        border-radius: var(--radius-md);
+    }
+
+    .stat-label {
+        font-size: 0.62rem;
+    }
+
+    .stat-value {
+        font-size: 1.2rem;
     }
 
     .toolbar {
         flex-direction: column;
+        gap: 0.6rem;
     }
 
     .toolbar-left {
         flex-direction: column;
         width: 100%;
+        gap: 0.5rem;
+    }
+
+    .toolbar-right {
+        flex-wrap: wrap;
+        gap: 0.4rem;
+        justify-content: center;
+    }
+
+    .toolbar-brand h2 {
+        font-size: 1rem;
     }
 
     .search-wrapper {
         max-width: 100%;
     }
 
+    .deploy-controls {
+        flex-wrap: wrap;
+    }
+
+    .guard-sentinel-pill {
+        font-size: 0.62rem;
+        padding: 3px 8px;
+    }
+
     /* Hide table, show cards */
     .table-container {
         display: none;
@@ -2373,32 +2670,87 @@ a.port-link:hover {
         max-width: 100%;
     }
 
-    /* ─── Process Card ─── */
-    .process-card {
-        background: var(--bg-card);
-        border: 1px solid var(--border-glass);
-        border-radius: var(--radius-lg);
-        padding: 1rem;
-        cursor: pointer;
-        transition: all 0.2s ease;
+    /* Modals full-width on mobile */
+    .modal {
+        width: 95vw;
+        max-width: 95vw;
+        max-height: 90vh;
     }
 
-    .process-card:hover {
-        border-color: var(--accent-primary);
-        box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
-        transform: translateY(-1px);
+    .modal-wide {
+        width: 95vw;
+        max-width: 95vw;
     }
 
-    .card-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 0.75rem;
+    /* History filters stack vertically */
+    .history-filters {
+        flex-direction: column;
+        gap: 0.5rem;
     }
 
-    .card-header .process-name {
-        font-size: 0.95rem;
-        font-weight: 600;
+    .history-search {
+        min-width: unset;
+    }
+
+    .history-hints-bar {
+        flex-direction: column;
+        gap: 0.4rem;
+        align-items: flex-start;
+    }
+
+    .history-hints-bar-left {
+        flex-direction: column;
+        gap: 0.4rem;
+        align-items: flex-start;
+    }
+
+    .history-keyboard-hints {
+        gap: 0.35rem;
+    }
+
+    /* Guard activity compact */
+    .guard-activity {
+        padding: 8px 10px;
+    }
+
+    /* Shortcuts overlay compact */
+    .shortcuts-panel {
+        min-width: unset;
+        max-width: 95vw;
+        padding: 1rem;
+    }
+
+    .shortcuts-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    /* ─── Process Card ─── */
+    .process-card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-glass);
+        border-radius: var(--radius-lg);
+        padding: 1rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .process-card:hover {
+        border-color: var(--accent-primary);
+        box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
+        transform: translateY(-1px);
+    }
+
+    .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.75rem;
+    }
+
+    .card-header .process-name {
+        font-size: 0.95rem;
+        font-weight: 600;
     }
 
     .card-details {
@@ -2883,83 +3235,936 @@ tr.keyboard-focus td:first-child .process-name span {
     cursor: pointer;
 }
 
-.history-list {
-    max-height: 400px;
-    overflow-y: auto;
+.history-search {
+    min-width: 220px;
+    cursor: text;
 }
 
-.history-empty {
-    text-align: center;
+#history-clear-filters-btn[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.history-density-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0 0.15rem;
     color: var(--text-muted);
-    padding: 2rem;
-    font-size: 0.9rem;
+    font-size: 0.72rem;
+    font-weight: 600;
 }
 
-.history-item {
+.history-density-label {
+    white-space: nowrap;
+}
+
+.history-density-select {
+    min-width: 88px;
+}
+
+.history-shortcuts-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    color: var(--text-muted);
+    font-size: 0.72rem;
+    font-weight: 600;
+    user-select: none;
+    cursor: pointer;
+}
+
+.history-shortcuts-toggle input {
+    margin: 0;
+    accent-color: var(--accent-primary);
+}
+
+.history-hints-bar {
     display: flex;
     align-items: center;
-    padding: 0.6rem 0.75rem;
-    border-radius: var(--radius-sm);
-    background: var(--bg-secondary);
-    margin-bottom: 0.4rem;
+    justify-content: space-between;
     gap: 0.75rem;
+    margin: 0.35rem 0 0.4rem;
 }
 
-.history-item-time {
-    font-size: 0.75rem;
+.history-hints-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+.history-hint-groups-menu {
+    position: relative;
+}
+
+.history-hint-groups-panel {
+    position: absolute;
+    top: calc(100% + 0.35rem);
+    right: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    min-width: 150px;
+    padding: 0.6rem;
+    border-radius: 0.7rem;
+    border: 1px solid var(--border-glass);
+    background: rgba(15, 23, 42, 0.96);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+}
+
+.history-hint-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    margin-bottom: 0.2rem;
+}
+
+.history-hint-preset {
+    border: 1px solid rgba(139, 148, 158, 0.18);
+    background: rgba(139, 148, 158, 0.1);
     color: var(--text-muted);
-    font-family: var(--font-mono);
-    flex-shrink: 0;
-    width: 85px;
+    border-radius: 999px;
+    padding: 0.16rem 0.48rem;
+    font-size: 0.66rem;
+    font-weight: 700;
+    cursor: pointer;
 }
 
-.history-item-process {
+.history-hint-preset:hover,
+.history-hint-preset.active {
+    background: rgba(96, 165, 250, 0.18);
+    color: #93c5fd;
+}
+
+.history-hint-preset-state {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.16rem 0.48rem;
+    border-radius: 999px;
+    border: 1px solid rgba(139, 148, 158, 0.14);
+    background: rgba(139, 148, 158, 0.08);
+    color: var(--text-dim);
+    font-size: 0.66rem;
+    font-weight: 700;
+}
+
+.history-hint-preset-state.custom {
+    color: #fbbf24;
+    border-color: rgba(251, 191, 36, 0.22);
+    background: rgba(251, 191, 36, 0.12);
+}
+
+.history-hint-group-option {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    color: var(--text-secondary);
+    font-size: 0.72rem;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.history-hint-group-option input {
+    margin: 0;
+    accent-color: var(--accent-primary);
+}
+
+.history-hint-density-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--text-muted);
+    font-size: 0.72rem;
     font-weight: 600;
-    color: var(--text-primary);
-    flex: 1;
+}
+
+.history-hint-density-select {
+    min-width: 84px;
+}
+
+.history-hints-bar-left {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    min-width: 0;
+    flex-wrap: wrap;
+}
+
+.history-auto-open-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--text-muted);
+    font-size: 0.72rem;
+    font-weight: 600;
+    user-select: none;
+    cursor: pointer;
+}
+
+.history-auto-open-toggle input {
+    margin: 0;
+    accent-color: var(--accent-primary);
+}
+
+.history-hints-title {
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.history-focus-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
     min-width: 0;
+    max-width: 100%;
+}
+
+.history-focus-jump {
+    width: 1.7rem;
+    height: 1.7rem;
+    border-radius: 999px;
+    border: 1px solid rgba(139, 148, 158, 0.18);
+    background: rgba(139, 148, 158, 0.1);
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    font-weight: 700;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.history-focus-jump:hover:not(:disabled) {
+    background: rgba(96, 165, 250, 0.18);
+    color: #93c5fd;
+}
+
+.history-focus-jump:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+.history-focus-status {
+    display: inline-flex;
+    align-items: center;
+    min-height: 1.5rem;
+    padding: 0.2rem 0.55rem;
+    border-radius: 999px;
+    border: 1px solid rgba(139, 148, 158, 0.14);
+    background: rgba(139, 148, 158, 0.08);
+    color: var(--text-dim);
+    font-size: 0.68rem;
+    font-family: var(--font-mono);
     white-space: nowrap;
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.history-item-event {
-    font-size: 0.75rem;
-    padding: 0.2rem 0.5rem;
+.history-focus-status.active {
+    color: #c4b5fd;
+    border-color: rgba(168, 85, 247, 0.24);
+    background: rgba(168, 85, 247, 0.12);
+}
+
+.history-hints-toggle {
+    border: 1px solid rgba(139, 148, 158, 0.18);
+    background: rgba(139, 148, 158, 0.1);
+    color: var(--text-muted);
     border-radius: 999px;
-    text-transform: uppercase;
-    font-weight: 600;
-    flex-shrink: 0;
+    padding: 0.18rem 0.55rem;
+    font-size: 0.68rem;
+    font-weight: 700;
+    cursor: pointer;
 }
 
-.history-item-event.start {
-    background: rgba(34, 197, 94, 0.15);
-    color: #22c55e;
+.history-hints-toggle:hover {
+    background: rgba(96, 165, 250, 0.18);
+    color: #93c5fd;
 }
 
-.history-item-event.stop {
-    background: rgba(239, 68, 68, 0.15);
-    color: #ef4444;
+.history-keyboard-hints {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 0.35rem 0 0.75rem;
 }
 
-.history-item-event.restart {
-    background: rgba(251, 191, 36, 0.15);
-    color: #fbbf24;
+.history-keyboard-hints.compact {
+    gap: 0.35rem;
 }
 
-.history-item-event.guard_on {
-    background: rgba(59, 130, 246, 0.15);
-    color: #3b82f6;
+.history-keyboard-hints.compact .history-keyboard-hint {
+    padding: 0.2rem 0.38rem;
+    font-size: 0.66rem;
 }
 
-.history-item-event.guard_off {
-    background: rgba(139, 148, 158, 0.15);
-    color: #8b949e;
+.history-keyboard-hints.compact .history-keyboard-hint span {
+    display: none;
 }
 
-.history-item-pid {
-    font-size: 0.7rem;
+.history-keyboard-hints.compact .history-keyboard-hint kbd {
+    min-width: 1.15rem;
+    height: 1.15rem;
+    font-size: 0.64rem;
+}
+
+.history-keyboard-hint {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.28rem 0.5rem;
+    border-radius: 999px;
+    border: 1px solid rgba(139, 148, 158, 0.14);
+    background: rgba(139, 148, 158, 0.08);
     color: var(--text-muted);
+    font-size: 0.7rem;
+    white-space: nowrap;
+}
+
+.history-keyboard-hint kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.3rem;
+    height: 1.3rem;
+    padding: 0 0.28rem;
+    border-radius: 0.38rem;
+    border: 1px solid rgba(139, 148, 158, 0.18);
+    background: rgba(15, 23, 42, 0.75);
+    color: var(--text-secondary);
+    font-size: 0.68rem;
     font-family: var(--font-mono);
-    flex-shrink: 0;
+    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.history-list {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.history-empty {
+    text-align: center;
+    color: var(--text-muted);
+    padding: 2rem;
+    font-size: 0.9rem;
+}
+
+.history-item {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 0.6rem 0.75rem;
+    border-radius: var(--radius-sm);
+    background: var(--bg-secondary);
+    margin-bottom: 0.4rem;
+    gap: 0.75rem;
+    transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+}
+
+.history-item.jump-highlight {
+    background: rgba(96, 165, 250, 0.12);
+    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35);
+}
+
+.history-item.keyboard-focused {
+    outline: none;
+    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.45), 0 0 0 1px rgba(168, 85, 247, 0.12);
+    background: rgba(168, 85, 247, 0.08);
+}
+
+.history-list.history-density-compact .history-item {
+    padding: 0.45rem 0.6rem;
+    gap: 0.55rem;
+    margin-bottom: 0.28rem;
+}
+
+.history-list.history-density-compact .history-item-main {
+    gap: 0.3rem;
+}
+
+.history-list.history-density-compact .history-item-meta {
+    gap: 0.4rem;
+}
+
+.history-list.history-density-compact .history-item-time,
+.history-list.history-density-compact .history-item-event,
+.history-list.history-density-compact .history-item-pid,
+.history-list.history-density-compact .history-item-details-summary,
+.history-list.history-density-compact .history-item-detail {
+    font-size: 0.68rem;
+}
+
+.history-list.history-density-compact .history-item-actions {
+    min-width: 200px;
+    padding: 0.4rem;
+}
+
+.history-list.history-density-compact .history-item-detail {
+    padding: 0.14rem 0.28rem 0.14rem 0.38rem;
+}
+
+.history-item-time {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    flex-shrink: 0;
+    width: 85px;
+}
+
+.history-item-main {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.history-item-meta {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.55rem;
+    min-width: 0;
+}
+
+.history-item-process {
+    font-weight: 600;
+    color: var(--text-primary);
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.history-static-label {
+    cursor: default;
+}
+
+.history-item-actions-menu {
+    position: relative;
+    margin-left: auto;
+    flex-shrink: 0;
+}
+
+.history-item-actions {
+    position: absolute;
+    top: calc(100% + 0.35rem);
+    right: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 0.35rem;
+    padding: 0.5rem;
+    border-radius: 0.7rem;
+    border: 1px solid var(--border-glass);
+    background: rgba(15, 23, 42, 0.96);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+    min-width: 220px;
+}
+
+.history-filter-shortcut {
+    border: none;
+    background: transparent;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    text-align: left;
+}
+
+.history-filter-shortcut:hover {
+    opacity: 0.85;
+    text-decoration: underline;
+}
+
+.history-item-actions-toggle {
+    list-style: none;
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid rgba(139, 148, 158, 0.18);
+    background: rgba(139, 148, 158, 0.1);
+    color: var(--text-muted);
+    border-radius: 999px;
+    padding: 0.12rem 0.5rem;
+    font-size: 0.66rem;
+    font-weight: 700;
+    cursor: pointer;
+    user-select: none;
+}
+
+.history-item-actions-toggle::-webkit-details-marker {
+    display: none;
+}
+
+.history-item-actions-toggle:hover,
+.history-item-actions-menu[open] .history-item-actions-toggle {
+    background: rgba(96, 165, 250, 0.18);
+    color: #93c5fd;
+}
+
+.history-action-btn,
+.history-item-copy {
+    border: 1px solid rgba(139, 148, 158, 0.18);
+    background: rgba(139, 148, 158, 0.1);
+    color: var(--text-muted);
+    border-radius: 999px;
+    padding: 0.12rem 0.42rem;
+    font-size: 0.66rem;
+    font-weight: 700;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.history-action-btn:hover,
+.history-item-copy:hover {
+    background: rgba(96, 165, 250, 0.18);
+    color: #93c5fd;
+}
+
+.history-item-event {
+    font-size: 0.75rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 999px;
+    text-transform: uppercase;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.history-item-event.start {
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+}
+
+.history-item-event.stop {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+}
+
+.history-item-event.restart {
+    background: rgba(251, 191, 36, 0.15);
+    color: #fbbf24;
+}
+
+.history-item-event.guard_on {
+    background: rgba(59, 130, 246, 0.15);
+    color: #3b82f6;
+}
+
+.history-item-event.guard_off {
+    background: rgba(139, 148, 158, 0.15);
+    color: #8b949e;
+}
+
+.history-item-event.deploy {
+    background: rgba(168, 85, 247, 0.15);
+    color: #a855f7;
+}
+
+.history-item-pid {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    flex-shrink: 0;
+}
+
+.history-item-details-wrap {
+    width: 100%;
+}
+
+.history-item-details-summary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    cursor: pointer;
+    color: var(--text-muted);
+    font-size: 0.78rem;
+    user-select: none;
+    list-style: none;
+}
+
+.history-item-details-summary::-webkit-details-marker {
+    display: none;
+}
+
+.history-item-details-summary::before {
+    content: '▸';
+    font-size: 0.8rem;
+    transition: transform 0.15s ease;
+}
+
+.history-item-details-wrap[open] .history-item-details-summary::before {
+    transform: rotate(90deg);
+}
+
+.history-item-details-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.2rem;
+    height: 1.2rem;
+    padding: 0 0.3rem;
+    border-radius: 999px;
+    background: rgba(139, 148, 158, 0.18);
+    color: var(--text-secondary);
+    font-size: 0.7rem;
+    font-weight: 700;
+}
+
+.history-item-details {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    width: 100%;
+    margin-top: 0.45rem;
+}
+
+.history-item-detail {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    padding: 0.18rem 0.3rem 0.18rem 0.45rem;
+    border-radius: 999px;
+    background: rgba(139, 148, 158, 0.12);
+    border: 1px solid rgba(139, 148, 158, 0.18);
+}
+
+.history-item-detail-text {
+    min-width: 0;
+}
+
+.history-item-filter-chip {
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    padding: 0;
+    cursor: pointer;
+    text-align: left;
+}
+
+.history-item-filter-chip:hover {
+    color: #93c5fd;
+}
+
+
+/* Deploy Results Modal */
+.deploy-results-summary {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+    padding: 0.8rem 0.9rem;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.deploy-results-list {
+    max-height: 420px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.deploy-result-item {
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: var(--bg-secondary);
+    padding: 0.85rem 0.95rem;
+}
+
+.deploy-result-item.ok {
+    border-color: rgba(34, 197, 94, 0.35);
+}
+
+.deploy-result-item.skipped {
+    border-color: rgba(245, 158, 11, 0.35);
+}
+
+.deploy-result-item.failed {
+    border-color: rgba(239, 68, 68, 0.35);
+}
+
+.deploy-result-item.running {
+    border-color: rgba(59, 130, 246, 0.35);
+}
+
+.deploy-result-item.pending {
+    border-color: rgba(139, 148, 158, 0.35);
+}
+
+.deploy-result-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+}
+
+.deploy-result-head-right {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.deploy-result-name {
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.deploy-result-status {
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.22rem 0.55rem;
+    border-radius: 999px;
+    text-transform: uppercase;
+}
+
+.deploy-result-status.ok {
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+}
+
+.deploy-result-status.skipped {
+    background: rgba(245, 158, 11, 0.15);
+    color: #f59e0b;
+}
+
+.deploy-result-status.failed {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+}
+
+.deploy-result-status.running {
+    background: rgba(59, 130, 246, 0.15);
+    color: #3b82f6;
+}
+
+.deploy-result-status.pending {
+    background: rgba(139, 148, 158, 0.15);
+    color: #8b949e;
+}
+
+.deploy-result-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 1rem;
+    margin-bottom: 0.55rem;
+    color: var(--text-muted);
+    font-size: 0.82rem;
+}
+
+.deploy-result-reason {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+}
+
+.deploy-result-details summary {
+    cursor: pointer;
+    color: var(--text-accent);
+    font-size: 0.85rem;
+    margin-bottom: 0.45rem;
+}
+
+.deploy-result-details pre {
+    margin: 0;
+    padding: 0.75rem;
+    white-space: pre-wrap;
+    word-break: break-word;
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.22);
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    font-family: var(--font-mono);
+}
+
+.deploy-history-btn,
+.deploy-retry-btn {
+    min-width: 78px;
+}
+
+.deploy-retry-btn[disabled] {
+    opacity: 0.6;
+    cursor: wait;
+}
+
+/* ─── Dependencies Graph ─── */
+
+.deps-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.25rem;
+    flex-wrap: wrap;
+}
+
+.deps-arrow {
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    white-space: nowrap;
+}
+
+.deps-graph-container {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    margin-bottom: 1.25rem;
+    overflow: hidden;
+    min-height: 300px;
+    position: relative;
+}
+
+.deps-graph-container svg {
+    display: block;
+}
+
+.deps-node {
+    cursor: pointer;
+}
+
+.deps-node rect {
+    rx: 8;
+    ry: 8;
+    stroke-width: 2;
+    transition: filter 0.15s;
+}
+
+.deps-node:hover rect {
+    filter: brightness(1.3);
+}
+
+.deps-node text {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    fill: var(--text-primary);
+    pointer-events: none;
+}
+
+.deps-edge {
+    stroke: var(--text-secondary);
+    stroke-width: 1.5;
+    fill: none;
+    opacity: 0.6;
+    marker-end: url(#deps-arrowhead);
+}
+
+.deps-edge-highlight {
+    stroke: var(--accent);
+    opacity: 1;
+    stroke-width: 2;
+}
+
+.deps-list {
+    margin-bottom: 1rem;
+}
+
+.deps-list-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+    font-size: 0.85rem;
+}
+
+.deps-list-item:last-child {
+    border-bottom: none;
+}
+
+.deps-list-item .deps-item-process {
+    font-weight: 600;
+    color: var(--accent);
+    font-family: var(--font-mono);
+}
+
+.deps-list-item .deps-item-arrow {
+    color: var(--text-secondary);
+}
+
+.deps-list-item .deps-item-target {
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+}
+
+.deps-list-item .deps-remove-btn {
+    margin-left: auto;
+    background: none;
+    border: none;
+    color: var(--red);
+    cursor: pointer;
+    font-size: 1rem;
+    padding: 0 0.25rem;
+    opacity: 0.6;
+    transition: opacity 0.15s;
+}
+
+.deps-list-item .deps-remove-btn:hover {
+    opacity: 1;
+}
+
+.deps-start-order {
+    padding: 0.75rem;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+
+.deps-start-order .deps-order-title {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.35rem;
+}
+
+.deps-start-order .deps-order-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+}
+
+.deps-order-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.2rem 0.5rem;
+    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
+    border-radius: 6px;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+}
+
+.deps-order-badge .deps-order-num {
+    color: var(--accent);
+    font-weight: 700;
+    font-size: 0.7rem;
+}
+
+.deps-empty {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+@media (max-width: 768px) {
+    .deps-controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .deps-arrow {
+        text-align: center;
+    }
 }