claude-controller 0.1.2 → 0.3.0

package/web/static/{styles.css → jobs.css}

@@ -1,1087 +1,482 @@
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-:root {
-  --bg: #0f1117;
-  --surface: #1a1d27;
-  --surface-hover: #222531;
-  --surface-active: #2a2d3a;
-  --border: #2e3140;
-  --border-light: #3a3d4a;
-  --text: #e4e6ed;
-  --text-secondary: #8b8fa3;
-  --text-muted: #5c5f73;
-  --accent: #6c8cff;
-  --accent-hover: #8aa4ff;
-  --accent-glow: rgba(108, 140, 255, 0.15);
-  --green: #34d399;
-  --green-dim: rgba(52, 211, 153, 0.15);
-  --red: #f87171;
-  --red-dim: rgba(248, 113, 113, 0.15);
-  --yellow: #fbbf24;
-  --yellow-dim: rgba(251, 191, 36, 0.15);
-  --blue: #60a5fa;
-  --blue-dim: rgba(96, 165, 250, 0.15);
-  --radius: 8px;
-  --radius-lg: 12px;
-  --font: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
-  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
-  --transition: 0.2s ease;
-  --shadow: 0 2px 8px rgba(0,0,0,0.3);
-}
-
-html { font-size: 14px; }
-
-body {
-  font-family: var(--font);
+/* ── Jobs & Stream ── */
+
+/* ── Stats Bar ── */
+.stats-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 18px;
+  border-bottom: 1px solid var(--border);
   background: var(--bg);
-  color: var(--text);
-  min-height: 100vh;
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-  max-width: 100vw;
-  overflow-x: hidden;
+  font-size: 0.72rem;
 }
 
-/* ── Scrollbar ── */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
+.stats-period-btns {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
 
-/* ── Buttons ── */
-button {
+.stats-period-btn {
+  padding: 3px 8px;
+  border-radius: var(--radius);
+  font-size: 0.68rem;
+  font-weight: 600;
   font-family: var(--font);
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid transparent;
   cursor: pointer;
-  border: none;
-  outline: none;
-  transition: all var(--transition);
+  transition: all 0.15s ease;
 }
 
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 7px 14px;
-  border-radius: var(--radius);
-  font-size: 0.82rem;
-  font-weight: 500;
+.stats-period-btn:hover {
   background: var(--surface-hover);
   color: var(--text-secondary);
-  border: 1px solid var(--border);
-}
-
-.btn:hover {
-  background: var(--surface-active);
-  color: var(--text);
-  border-color: var(--border-light);
 }
 
-.btn:active { transform: scale(0.97); }
-
-.btn-primary {
-  background: var(--accent);
-  color: #fff;
+.stats-period-btn.active {
+  background: var(--accent-glow);
+  color: var(--accent);
   border-color: var(--accent);
 }
 
-.btn-primary:hover {
-  background: var(--accent-hover);
-  border-color: var(--accent-hover);
-  box-shadow: 0 0 20px var(--accent-glow);
-}
-
-.btn-danger {
-  color: var(--red);
+.stats-metrics {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-left: auto;
+  font-family: var(--font-mono, monospace);
+  font-size: 0.72rem;
+  color: var(--text-secondary);
 }
 
-.btn-danger:hover {
-  background: var(--red-dim);
-  border-color: var(--red);
+.stats-metric {
+  white-space: nowrap;
 }
 
-.btn-success {
-  color: var(--green);
-}
+.stats-metric.stats-success { color: var(--success, #22c55e); }
+.stats-metric.stats-duration { color: var(--text-muted); }
 
-.btn-success:hover {
-  background: var(--green-dim);
-  border-color: var(--green);
+/* ── Project Strip ── */
+.project-strip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 0 10px 18px;
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
 }
-
-.btn-sm {
-  padding: 4px 10px;
-  font-size: 0.75rem;
+.project-strip::after {
+  content: '';
+  flex-shrink: 0;
+  width: 18px;
 }
+.project-strip::-webkit-scrollbar { display: none; }
+.project-strip:empty { display: none; }
 
-.btn-icon {
-  padding: 7px;
+.project-chip {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text-secondary);
+  font-size: 0.74rem;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+  line-height: 1;
 }
 
-/* ── Context Toolbar ── */
-.ctx-toolbar-wrap {
-  position: relative;
-  flex-shrink: 0;
+.project-chip:hover {
+  background: var(--surface-hover);
+  border-color: var(--text-muted);
 }
 
-.ctx-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 2px;
+.project-chip.active {
+  background: var(--accent-glow);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.pchip-icon {
   flex-shrink: 0;
+  opacity: 0.5;
 }
 
-.ctx-btn {
-  padding: 4px 10px;
-  border-radius: var(--radius);
-  font-size: 0.72rem;
-  font-weight: 600;
-  font-family: var(--font-mono);
-  background: transparent;
-  color: var(--text-muted);
-  border: 1px solid transparent;
-  letter-spacing: 0.02em;
-  text-transform: lowercase;
+.project-chip.active .pchip-icon {
+  opacity: 1;
 }
 
-.ctx-btn:hover {
-  background: var(--surface-hover);
-  color: var(--text-secondary);
-  border-color: var(--border);
+.pchip-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--blue);
+  animation: pulse 1.5s ease-in-out infinite;
+  flex-shrink: 0;
 }
 
-.ctx-btn.active {
-  background: var(--accent-glow);
-  color: var(--accent);
-  border-color: var(--accent);
+.pchip-name {
+  font-family: var(--font-mono);
 }
 
-.ctx-btn-x {
-  padding: 4px 6px;
-  border-radius: var(--radius);
-  font-size: 0.78rem;
-  font-weight: 500;
-  background: transparent;
+.pchip-count {
+  font-size: 0.66rem;
+  font-family: var(--font-mono);
+  padding: 2px 7px;
+  border-radius: 10px;
+  background: var(--bg);
   color: var(--text-muted);
-  border: 1px solid transparent;
+  font-weight: 600;
+  min-width: 18px;
+  text-align: center;
   line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-.ctx-btn-x:hover {
-  background: var(--red-dim);
-  color: var(--red);
-  border-color: var(--red);
+.project-chip.active .pchip-count {
+  background: var(--accent);
+  color: var(--surface);
 }
 
-.ctx-session-label {
-  display: none;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 0.7rem;
+.pchip-stat {
+  font-size: 0.62rem;
   font-family: var(--font-mono);
-  background: var(--blue-dim);
-  color: var(--blue);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.6;
-  min-width: 0;
+  font-weight: 700;
+  padding: 2px 5px;
+  border-radius: 8px;
+  min-width: 14px;
+  text-align: center;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.ctx-session-label.visible {
-  display: inline;
+.pchip-stat-running {
+  background: var(--blue-dim);
+  color: var(--blue);
 }
 
-.session-picker {
-  display: none;
-  flex-direction: column;
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 4px;
-  width: 520px;
-  max-width: calc(100vw - 32px);
-  max-height: 420px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
-  z-index: 200;
+.pchip-stat-done {
+  background: var(--green-dim);
+  color: var(--green);
 }
 
-.session-picker.open { display: flex; }
-
-.session-picker-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
+.pchip-stat-failed {
+  background: var(--red-dim);
+  color: var(--red);
 }
 
-.session-picker-title {
-  font-size: 0.78rem;
-  font-weight: 600;
-  color: var(--text-secondary);
+/* ── Registered Project Badge ── */
+.project-chip.registered {
+  border-style: solid;
+  border-width: 1.5px;
 }
 
-.session-picker-search {
-  padding: 8px 14px;
-  border-bottom: 1px solid var(--border);
+.pchip-reg {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--accent);
   flex-shrink: 0;
 }
 
-.session-picker-search input {
-  width: 100%;
-  padding: 6px 10px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--bg);
-  color: var(--text);
-  font-size: 0.78rem;
-  font-family: var(--font);
-  outline: none;
-  transition: border-color var(--transition);
-}
-
-.session-picker-search input:focus {
-  border-color: var(--accent);
-}
-
-.session-picker-search input::placeholder {
-  color: var(--text-muted);
+.project-chip.registered .pchip-icon {
+  opacity: 0.8;
 }
 
-.session-picker-list {
-  overflow-y: auto;
-  flex: 1;
+/* ── Project Detail Panel ── */
+.project-detail {
+  padding: 14px 18px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
 }
+.project-detail:empty { display: none; }
 
-.session-item {
+.pd-header {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 10px 14px;
-  cursor: pointer;
-  border-bottom: 1px solid var(--border);
-  transition: background var(--transition);
 }
 
-.session-item:hover { background: var(--surface-hover); }
-.session-item:last-child { border-bottom: none; }
-
-.session-item-row {
+.pd-title-row {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.session-item-status {
-  display: inline-block;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
+.pd-icon {
   flex-shrink: 0;
-}
-.session-item-status.done { background: var(--green); }
-.session-item-status.failed { background: var(--red); }
-.session-item-status.running { background: var(--yellow); animation: pulse 1.5s infinite; }
-.session-item-status.unknown { background: var(--text-muted); }
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-
-.session-item-id {
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
   color: var(--accent);
-  flex-shrink: 0;
-}
-
-.session-item-slug {
-  font-size: 0.7rem;
-  color: var(--text-muted);
-  flex-shrink: 0;
-  font-style: italic;
-}
-
-.session-item-job {
-  font-family: var(--font-mono);
-  font-size: 0.65rem;
-  color: var(--text-muted);
-  flex-shrink: 0;
 }
 
-.session-item-prompt {
-  font-size: 0.78rem;
+.pd-name {
+  font-size: 0.88rem;
+  font-weight: 600;
   color: var(--text);
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.session-item-meta {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding-left: 15px;
-}
-
-.session-item-time {
-  font-size: 0.68rem;
-  color: var(--text-muted);
-  flex-shrink: 0;
-}
-
-.session-item-cwd {
-  font-size: 0.65rem;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.session-item-cost {
-  font-size: 0.65rem;
-  color: var(--green);
-  font-family: var(--font-mono);
-  flex-shrink: 0;
+.pd-badge {
+  font-size: 0.58rem;
+  font-weight: 700;
+  padding: 2px 7px;
+  border-radius: 8px;
+  background: var(--accent-glow);
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
-.session-filter-bar {
+.pd-actions {
+  margin-left: auto;
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 14px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
 }
 
-.session-filter-toggle {
-  display: inline-flex;
+.pd-close {
+  display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
   border: 1px solid var(--border);
-  border-radius: 4px;
   background: transparent;
   color: var(--text-muted);
-  font-size: 0.68rem;
-  font-family: var(--font);
   cursor: pointer;
-  transition: all var(--transition);
-  white-space: nowrap;
-}
-
-.session-filter-toggle:hover { border-color: var(--accent); color: var(--text-secondary); }
-.session-filter-toggle.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
-
-.session-filter-project {
-  font-size: 0.68rem;
-  color: var(--text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-}
-
-.session-group-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  background: var(--bg);
-  font-size: 0.68rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.session-group-header svg {
-  width: 12px;
-  height: 12px;
-  flex-shrink: 0;
-  opacity: 0.6;
-}
-
-.session-group-count {
-  font-weight: 400;
-  color: var(--text-muted);
-  margin-left: auto;
-}
-
-.session-empty {
-  padding: 24px 14px;
-  text-align: center;
-  font-size: 0.78rem;
-  color: var(--text-muted);
-}
-
-.session-empty-icon {
-  font-size: 1.5rem;
-  margin-bottom: 8px;
-  opacity: 0.5;
-}
-
-/* ── Layout ── */
-.layout {
-  min-height: 100vh;
-}
-
-.main {
-  padding: 8px 0;
-  overflow-x: hidden;
-}
-
-/* ── CWD badge ── */
-.cwd-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 0.7rem;
-  font-weight: 500;
-  background: var(--accent-glow);
-  color: var(--accent);
-  margin-left: 8px;
-  max-width: 180px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.cwd-badge:empty { display: none; }
-
-/* ── Directory Picker ── */
-.dir-picker {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.dir-picker-display {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: var(--radius);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-  font-size: 0.85rem;
-  font-family: var(--font-mono);
-  min-height: 38px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: all var(--transition);
-}
-
-.dir-picker-display:hover {
-  border-color: var(--border-light);
-  background: var(--surface);
-}
-
-.dir-picker-display.has-value {
-  color: var(--text);
-}
-
-.dir-picker-display .dir-icon {
-  flex-shrink: 0;
-  color: var(--text-muted);
-}
-
-.dir-picker-clear {
-  flex-shrink: 0;
-  padding: 4px;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-muted);
-  border: none;
-  cursor: pointer;
-  display: none;
-}
-
-.dir-picker-clear:hover {
-  background: var(--red-dim);
-  color: var(--red);
-}
-
-.dir-picker-clear.visible { display: inline-flex; }
-
-/* ── Recent Directory Chips ── */
-.recent-dirs {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-  margin-bottom: 10px;
-}
-
-.recent-dirs:empty { display: none; }
-
-.recent-dirs-label {
-  font-size: 0.72rem;
-  color: var(--text-muted);
-  font-weight: 500;
-  flex-shrink: 0;
-  margin-right: 2px;
-}
-
-.recent-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 10px;
-  border-radius: 14px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  font-size: 0.75rem;
-  font-family: var(--font-mono);
-  cursor: pointer;
-  transition: all var(--transition);
-  max-width: 200px;
-}
-
-.recent-chip:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: var(--accent-glow);
-}
-
-.recent-chip.active {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: var(--accent-glow);
-  font-weight: 500;
-}
-
-.recent-chip-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.recent-chip-remove {
-  flex-shrink: 0;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  margin-left: 2px;
-  border: none;
-  background: transparent;
-  color: var(--text-muted);
-  cursor: pointer;
-  border-radius: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--transition);
-}
-
-.recent-chip-remove:hover {
-  background: var(--red-dim);
-  color: var(--red);
-}
-
-/* ── Inline Directory Browser Panel ── */
-.dir-browser-panel {
-  display: none;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
-  margin-top: 8px;
-  overflow: hidden;
-  animation: panel-slide 0.15s ease-out;
-}
-
-.dir-browser-panel.open { display: block; }
-
-@keyframes panel-slide {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.dir-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-}
-
-.dir-modal-title {
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: var(--text);
-}
-
-.dir-modal-close {
-  padding: 4px;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-muted);
-  border: none;
-  cursor: pointer;
-}
-
-.dir-modal-close:hover { background: var(--surface-active); color: var(--text); }
-
-.dir-modal-path {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 8px 12px;
-  background: var(--bg);
-  border-bottom: 1px solid var(--border);
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-.dir-modal-path .breadcrumb-seg {
-  padding: 2px 6px;
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--accent);
-  transition: background var(--transition);
-}
-
-.dir-modal-path .breadcrumb-seg:hover {
-  background: var(--accent-glow);
-}
-
-.dir-modal-path .breadcrumb-sep {
-  color: var(--text-muted);
-}
-
-.dir-modal-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px 0;
-  max-height: 240px;
-}
-
-.dir-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 16px;
-  cursor: pointer;
-  font-size: 0.85rem;
-  color: var(--text);
-  transition: background var(--transition);
-}
-
-.dir-item:hover { background: var(--surface-hover); }
-
-.dir-item-icon {
-  flex-shrink: 0;
-  width: 18px;
-  height: 18px;
-  color: var(--text-muted);
-}
-
-.dir-item-icon.is-dir { color: var(--yellow); }
-.dir-item-icon.is-parent { color: var(--accent); }
-
-.dir-item-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dir-item-name.is-dir { font-weight: 500; }
-
-.dir-modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  border-top: 1px solid var(--border);
-  gap: 8px;
-}
-
-.dir-modal-current {
-  flex: 1;
-  font-family: var(--font-mono);
-  font-size: 0.78rem;
-  color: var(--text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dir-modal-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 32px;
-  color: var(--text-muted);
-  font-size: 0.85rem;
-  gap: 8px;
-}
-
-/* ── Cards / Sections ── */
-.section {
-  margin-bottom: 24px;
-  animation: fadeIn 0.3s ease forwards;
-  animation-iteration-count: 1;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-left: none;
-  border-right: none;
-  border-radius: 0;
-  overflow: visible;
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--border);
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.card-title {
-  font-size: 0.92rem;
-  font-weight: 600;
-  color: var(--text);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  flex: 1 1 0;
-}
-
-.card-title svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
-
-.card-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.card-body { padding: 18px; }
-
-/* ── Send Task Form ── */
-.form-group { margin-bottom: 14px; }
-
-.form-label {
-  display: flex;
-  align-items: center;
-  font-size: 0.78rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  margin-bottom: 6px;
-}
-
-textarea, input[type="text"] {
-  width: 100%;
-  padding: 10px 14px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-family: var(--font);
-  font-size: 0.85rem;
-  line-height: 1.6;
-  resize: vertical;
-  transition: border-color var(--transition);
+  transition: all 0.15s ease;
 }
 
-textarea:focus, input[type="text"]:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
+.pd-close:hover {
+  background: var(--surface-hover);
+  color: var(--text);
+  border-color: var(--text-muted);
 }
 
-textarea { min-height: unset; position: relative; }
-
-/* ── Prompt Input + Mirror (color-only highlight, no text replacement) ── */
-#promptInput {
-  color: transparent;
-  caret-color: var(--text);
-  padding-right: 44px;
+.pd-meta {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  padding-left: 24px;
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  row-gap: 2px;
 }
 
-#promptInput::selection {
-  background: rgba(108, 140, 255, 0.3);
-  color: transparent;
+.pd-sep {
+  color: var(--border);
+  margin: 0 3px;
+  flex-shrink: 0;
 }
 
-.prompt-mirror {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 10px 14px;
-  padding-right: 44px;
-  font-family: var(--font);
-  font-size: 0.85rem;
-  line-height: 1.6;
-  color: var(--text);
-  white-space: pre-wrap;
-  word-wrap: break-word;
+.pd-path-text {
+  color: var(--text-muted);
   overflow: hidden;
-  pointer-events: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: min(100%, 360px);
+  flex-shrink: 1;
 }
 
-.prompt-at-ref {
+.pd-branch {
   color: var(--green);
-  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
-/* ── Image Attachments ── */
-.prompt-wrapper {
-  position: relative;
+.pd-branch::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 3px;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='6' y1='3' x2='6' y2='15'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M18 9a9 9 0 0 1-9 9'/%3E%3C/svg%3E") no-repeat center / contain;
+  vertical-align: middle;
 }
 
-.prompt-wrapper.drag-over textarea {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
+.pd-remote {
+  color: var(--text-muted);
+  opacity: 0.75;
+  white-space: nowrap;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
 }
 
-.drop-overlay {
-  display: none;
-  position: absolute;
-  inset: 0;
-  background: rgba(108, 140, 255, 0.08);
-  border: 2px dashed var(--accent);
-  border-radius: var(--radius);
-  z-index: 10;
-  pointer-events: none;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--accent);
+.pd-stats {
+  display: flex;
   gap: 8px;
+  padding: 10px 0 2px 24px;
+  flex-wrap: wrap;
 }
 
-.prompt-wrapper.drag-over .drop-overlay {
+.pd-stat {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 5px 12px;
+  border-radius: 8px;
+  background: var(--bg);
+  min-width: 50px;
 }
 
-.image-previews {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 8px;
+.pd-stat-val {
+  font-size: 0.84rem;
+  font-weight: 700;
+  color: var(--text);
+  font-family: var(--font-mono);
+  line-height: 1.2;
 }
 
-.image-previews:empty { display: none; }
-
-.img-thumb {
-  position: relative;
-  width: 72px;
-  height: 72px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  overflow: hidden;
-  background: var(--bg);
-  flex-shrink: 0;
-  animation: fadeIn 0.2s ease;
+.pd-stat-label {
+  font-size: 0.58rem;
+  color: var(--text-muted);
+  font-weight: 500;
+  margin-top: 1px;
 }
 
-.img-thumb img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  cursor: pointer;
-}
+.pd-running { background: var(--blue-dim); }
+.pd-running .pd-stat-val { color: var(--blue); }
+.pd-done { background: var(--green-dim); }
+.pd-done .pd-stat-val { color: var(--green); }
+.pd-failed { background: var(--red-dim); }
+.pd-failed .pd-stat-val { color: var(--red); }
+.pd-rate-ok .pd-stat-val { color: var(--green); }
+.pd-rate-warn .pd-stat-val { color: var(--red); }
 
-.img-thumb .img-remove {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: rgba(0,0,0,0.7);
-  color: #fff;
-  font-size: 11px;
+/* ── Job Filter Bar ── */
+.job-filter-bar {
   display: flex;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s;
-  border: none;
-  padding: 0;
-  line-height: 1;
+  gap: 10px;
+  padding: 8px 18px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
 }
 
-.img-thumb:hover .img-remove {
-  opacity: 1;
+.job-filter-btns {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
 }
 
-.img-thumb.uploading {
-  opacity: 0.5;
+.job-filter-btn {
+  padding: 4px 10px;
+  border-radius: var(--radius);
+  font-size: 0.72rem;
+  font-weight: 600;
+  font-family: var(--font);
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid transparent;
+  transition: all 0.15s ease;
 }
 
-.img-thumb.uploading::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0,0,0,0.3);
+.job-filter-btn:hover {
+  background: var(--surface-hover);
+  color: var(--text-secondary);
 }
 
-.img-count-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 0.7rem;
-  font-weight: 600;
+.job-filter-btn.active {
   background: var(--accent-glow);
   color: var(--accent);
-  margin-left: 8px;
+  border-color: var(--accent);
 }
 
-.img-count-badge:empty { display: none; }
+.job-filter-btn[data-filter="running"].active { background: var(--blue-dim); color: var(--blue); border-color: var(--blue); }
+.job-filter-btn[data-filter="done"].active { background: var(--green-dim); color: var(--green); border-color: var(--green); }
+.job-filter-btn[data-filter="failed"].active { background: var(--red-dim); color: var(--red); border-color: var(--red); }
 
-/* ── File Attachments (non-image) ── */
-.file-thumb {
-  position: relative;
-  display: inline-flex;
+/* ── Project Filter Dropdown ── */
+.job-project-filter {
+  display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 10px 6px 8px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: var(--surface);
-  max-width: 200px;
-  animation: fadeIn 0.2s ease;
+  gap: 5px;
   flex-shrink: 0;
 }
-.file-thumb .file-icon {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  background: var(--surface-active);
+
+.job-project-filter svg {
   color: var(--text-muted);
   flex-shrink: 0;
-  font-size: 0.6rem;
-  font-weight: 700;
-  font-family: var(--font-mono);
-  text-transform: uppercase;
-  letter-spacing: -0.02em;
-}
-.file-thumb .file-info {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  overflow: hidden;
-  min-width: 0;
 }
-.file-thumb .file-name {
-  font-size: 0.75rem;
+
+.job-project-filter select {
+  padding: 4px 24px 4px 8px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text-secondary);
+  font-size: 0.72rem;
   font-weight: 500;
-  color: var(--text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+  max-width: 180px;
+  transition: border-color var(--transition);
 }
-.file-thumb .file-size {
-  font-size: 0.65rem;
-  color: var(--text-muted);
+
+.job-project-filter select:focus {
+  border-color: var(--accent);
 }
-.file-thumb .file-remove {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: rgba(0,0,0,0.7);
-  color: #fff;
-  font-size: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s;
-  border: none;
-  padding: 0;
-  line-height: 1;
+
+.job-project-filter select:hover {
+  background-color: var(--surface-hover);
 }
-.file-thumb:hover .file-remove { opacity: 1; }
-.file-thumb.uploading { opacity: 0.5; }
 
-/* ── Attach Button (inside prompt-wrapper) ── */
-.attach-float-btn {
-  position: absolute;
-  bottom: 12px;
-  right: 10px;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  background: var(--surface-hover);
-  border: 1px solid var(--border);
-  color: var(--text-muted);
+.job-search-wrap {
   display: flex;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all var(--transition);
-  z-index: 5;
+  gap: 6px;
+  flex: 1;
+  max-width: 280px;
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  transition: border-color var(--transition);
 }
-.attach-float-btn:hover {
-  background: var(--surface-active);
-  color: var(--accent);
+
+.job-search-wrap:focus-within {
   border-color: var(--accent);
 }
 
-textarea::placeholder, input::placeholder {
+.job-search-wrap svg {
   color: var(--text-muted);
+  flex-shrink: 0;
 }
 
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+.job-search-input {
+  flex: 1;
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  font-size: 0.78rem !important;
+  color: var(--text) !important;
+  outline: none !important;
+  box-shadow: none !important;
+  min-width: 0;
+}
+
+.job-search-input::placeholder {
+  color: var(--text-muted);
 }
 
 /* ── Job Table ── */
@@ -1160,6 +555,22 @@ thead tr { cursor: default; }
   color: var(--yellow);
 }
 
+.badge-zombie {
+  background: var(--red-dim);
+  color: var(--red);
+  font-size: 0.65rem;
+  padding: 2px 6px;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.badge-dep {
+  background: var(--blue-dim, rgba(59, 130, 246, 0.1));
+  color: var(--blue, #3b82f6);
+  font-size: 0.6rem;
+  padding: 2px 5px;
+  letter-spacing: -0.02em;
+}
+
 .job-id {
   font-family: var(--font-mono);
   font-size: 0.78rem;
@@ -1281,7 +692,7 @@ thead tr { cursor: default; }
   max-height: 400px;
   overflow-y: auto;
   padding: 14px 18px;
-  background: #080a0e;
+  background: var(--stream-bg, #080a0e);
   font-family: var(--font-mono);
   font-size: 0.78rem;
   line-height: 1.7;
@@ -1300,7 +711,7 @@ thead tr { cursor: default; }
 }
 
 .stream-event-text {
-  color: #e4e6ed;
+  color: var(--text);
   white-space: pre-wrap;
 }
 
@@ -1332,7 +743,7 @@ thead tr { cursor: default; }
 }
 
 .stream-tool-input {
-  color: #d4d4d4;
+  color: var(--text-secondary);
   white-space: pre-wrap;
   flex: 1;
   min-width: 0;
@@ -1385,6 +796,42 @@ thead tr { cursor: default; }
   font-size: 0.8rem;
 }
 
+.stream-no-output {
+  color: var(--text-muted);
+  text-align: center;
+  padding: 24px;
+  font-size: 0.8rem;
+  font-style: italic;
+  opacity: 0.7;
+}
+
+.stream-error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 24px;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+}
+.stream-error-state svg { opacity: 0.5; }
+.stream-error-state .btn { margin-top: 4px; }
+
+.stream-poll-warning {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--yellow-dim, rgba(234, 179, 8, 0.1));
+  color: var(--yellow, #eab308);
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-bottom: 1px solid rgba(234, 179, 8, 0.15);
+  animation: pollWarnIn 0.3s ease;
+}
+.stream-poll-warning svg { flex-shrink: 0; opacity: 0.7; }
+@keyframes pollWarnIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
+
 .stream-done-banner {
   display: flex;
   align-items: center;
@@ -1404,6 +851,75 @@ thead tr { cursor: default; }
   border-top-color: rgba(248, 113, 113, 0.2);
 }
 
+/* ── User Error Card ── */
+.user-error-card {
+  margin: 0;
+  padding: 12px 18px;
+  background: var(--red-dim);
+  border-top: 1px solid rgba(248, 113, 113, 0.15);
+  font-size: 0.78rem;
+  line-height: 1.5;
+}
+.user-error-summary {
+  font-weight: 700;
+  color: var(--red);
+  margin-bottom: 4px;
+}
+.user-error-cause {
+  color: var(--text-secondary, var(--text-muted));
+  margin-bottom: 6px;
+}
+.user-error-steps {
+  margin: 0 0 6px 0;
+  padding-left: 18px;
+  color: var(--text);
+}
+.user-error-steps li {
+  margin-bottom: 2px;
+}
+.user-error-details {
+  margin-top: 6px;
+}
+.user-error-details summary {
+  cursor: pointer;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  user-select: none;
+}
+.user-error-details summary:hover {
+  color: var(--text);
+}
+.user-error-raw {
+  margin-top: 6px;
+  padding: 8px 10px;
+  background: var(--bg-secondary, rgba(0,0,0,0.15));
+  border-radius: var(--radius);
+  font-size: 0.68rem;
+  color: var(--text-muted);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.stream-event-result-error .stream-result-icon {
+  color: var(--red);
+}
+.stream-event-result-error .stream-result-text {
+  color: var(--red);
+}
+
+/* ── Job Meta Info (duration) ── */
+.job-meta-info {
+  display: inline-block;
+  margin-left: 6px;
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  vertical-align: middle;
+}
+
 /* ── Stream Action Buttons ── */
 .stream-actions {
   display: flex;
@@ -1577,6 +1093,37 @@ thead tr { cursor: default; }
   background: var(--green-dim) !important;
 }
 
+/* ── Connection Lost Banner ── */
+.conn-lost-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--red-dim);
+  border-bottom: 1px solid var(--red);
+  color: var(--red);
+  font-size: 0.78rem;
+  font-weight: 500;
+  transform: translateY(-100%);
+  opacity: 0;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.conn-lost-banner.visible {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.conn-lost-banner svg { flex-shrink: 0; }
+
 /* ── Toast ── */
 .toast-container {
   position: fixed;
@@ -1589,6 +1136,7 @@ thead tr { cursor: default; }
 }
 
 .toast {
+  --toast-duration: 3000ms;
   padding: 10px 16px;
   border-radius: var(--radius);
   font-size: 0.82rem;
@@ -1597,11 +1145,21 @@ thead tr { cursor: default; }
   border: 1px solid var(--border);
   color: var(--text);
   box-shadow: var(--shadow);
-  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
+  animation: toastIn 0.3s ease;
   display: flex;
   align-items: center;
   gap: 8px;
+  cursor: pointer;
+}
+
+.toast .toast-msg { flex: 1; }
+.toast .toast-close {
+  font-size: 1.1rem;
+  opacity: 0.4;
+  margin-left: 4px;
+  line-height: 1;
 }
+.toast:hover .toast-close { opacity: 0.8; }
 
 .toast.success { border-color: var(--green); color: var(--green); }
 .toast.error { border-color: var(--red); color: var(--red); }
@@ -1652,271 +1210,318 @@ thead tr { cursor: default; }
   flex-shrink: 0;
 }
 
-@media (max-width: 900px) {
-  th, td { padding: 10px 10px; font-size: 0.78rem; }
-}
+/* ── Job Group View ── */
+.job-group-row { cursor: pointer; }
+.job-group-row:hover td { background: var(--surface-hover); }
 
-@media (max-width: 600px) {
-  .main { padding: 4px 0; }
-  .card-body { padding: 14px; }
-  th, td { padding: 8px 6px; font-size: 0.74rem; }
-  .stream-content { max-height: 300px; }
+.job-group-cell {
+  padding: 12px 18px !important;
+  background: var(--surface) !important;
+  border-bottom: 1px solid var(--border) !important;
 }
 
-/* ── Settings Panel ── */
-.settings-fab {
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  z-index: 300;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
+.job-group-content {
   display: flex;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-  transition: all var(--transition);
+  gap: 10px;
 }
-.settings-fab:hover {
-  background: var(--surface-hover);
+
+.job-group-chevron {
+  transition: transform 0.2s ease;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.job-group-chevron.collapsed { transform: rotate(-90deg); }
+
+.job-group-folder {
   color: var(--accent);
-  border-color: var(--accent);
-  transform: rotate(30deg);
+  flex-shrink: 0;
 }
 
-.settings-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  z-index: 400;
-  background: rgba(0,0,0,0.5);
-  backdrop-filter: blur(4px);
-  animation: fadeIn 0.2s ease;
-}
-.settings-overlay.open { display: flex; align-items: center; justify-content: center; }
-
-.settings-panel {
-  width: 520px;
-  max-width: 90vw;
-  max-height: 85vh;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: panel-slide 0.2s ease-out;
+.job-group-name {
+  font-weight: 600;
+  font-size: 0.82rem;
+  color: var(--text);
+  font-family: var(--font-mono);
+}
+
+.job-group-count {
+  font-size: 0.68rem;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: var(--bg);
+  color: var(--text-muted);
+  font-weight: 600;
+  font-family: var(--font-mono);
 }
 
-.settings-header {
+.job-group-stats {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border);
+  gap: 6px;
+  margin-left: auto;
 }
-.settings-title {
-  font-size: 1rem;
+
+.grp-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.68rem;
   font-weight: 700;
-  color: var(--text);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.grp-stat-running { background: var(--blue-dim); color: var(--blue); }
+.grp-stat-done { background: var(--green-dim); color: var(--green); }
+.grp-stat-failed { background: var(--red-dim); color: var(--red); }
+
+.grp-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--blue);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.job-group-meta {
   display: flex;
   align-items: center;
   gap: 8px;
+  margin-left: 8px;
+  padding-left: 8px;
+  border-left: 1px solid var(--border);
 }
-.settings-title svg { width: 18px; height: 18px; color: var(--accent); }
-.settings-close {
-  padding: 6px;
-  border-radius: var(--radius);
-  background: transparent;
-  color: var(--text-muted);
-  border: none;
-  cursor: pointer;
-}
-.settings-close:hover { background: var(--surface-active); color: var(--text); }
 
-.settings-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
+.grp-meta {
+  font-size: 0.66rem;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  white-space: nowrap;
 }
 
-.settings-section {
-  margin-bottom: 20px;
-}
-.settings-section-title {
-  font-size: 0.72rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-bottom: 12px;
+.grp-meta-dur { color: var(--text-muted); }
+.grp-meta-rate-ok { color: var(--green); }
+.grp-meta-rate-warn { color: var(--red); }
+
+.job-group-item td:first-child { padding-left: 36px; }
+
+#btnViewMode.active {
+  background: var(--accent-glow);
+  color: var(--accent);
+  border-color: var(--accent);
 }
 
-.setting-row {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 10px 0;
-  border-bottom: 1px solid var(--border);
-  gap: 16px;
+@media (max-width: 900px) {
+  th, td { padding: 10px 10px; font-size: 0.78rem; }
+  .project-detail { padding: 12px 14px 10px; }
+  .pd-meta { padding-left: 0; }
+  .pd-path-text { max-width: min(100%, 260px); }
+  .pd-stats { padding-left: 0; gap: 6px; }
+  .pd-stat { padding: 4px 10px; min-width: 44px; }
 }
-.setting-row:last-child { border-bottom: none; }
 
-.setting-info { flex: 1; min-width: 0; }
-.setting-label {
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: var(--text);
-  margin-bottom: 2px;
+/* ── Checkpoint Diff Viewer ── */
+
+.ckpt-panel {
+  border-top: 1px solid var(--border, #2a2a2a);
+  padding: 12px 0 0;
+  margin-top: 10px;
 }
-.setting-desc {
+.ckpt-loading, .ckpt-empty {
+  color: var(--text-muted, #888);
+  font-size: 0.8rem;
+  text-align: center;
+  padding: 16px 0;
+}
+.ckpt-hint {
+  color: var(--text-muted, #888);
   font-size: 0.72rem;
-  color: var(--text-muted);
-  line-height: 1.4;
+  margin: 4px 0 8px;
 }
-
-.setting-control { flex-shrink: 0; }
-
-/* Toggle Switch */
-.toggle {
-  position: relative;
-  width: 40px;
-  height: 22px;
-  cursor: pointer;
+.ckpt-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
 }
-.toggle input { display: none; }
-.toggle-track {
-  position: absolute;
-  inset: 0;
-  background: var(--border);
-  border-radius: 11px;
-  transition: background var(--transition);
+.ckpt-select-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
-.toggle input:checked + .toggle-track { background: var(--accent); }
-.toggle-thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: #fff;
-  transition: transform var(--transition);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+.ckpt-select-group label {
+  font-size: 0.68rem;
+  color: var(--text-muted, #888);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
-.toggle input:checked ~ .toggle-thumb { transform: translateX(18px); }
-
-.setting-input {
-  width: 100%;
-  padding: 7px 10px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 0.8rem;
-  transition: border-color var(--transition);
+.ckpt-select-group select {
+  background: var(--bg-secondary, #1a1a1a);
+  color: var(--text, #e0e0e0);
+  border: 1px solid var(--border, #2a2a2a);
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 0.78rem;
+  font-family: inherit;
+  min-width: 180px;
 }
-.setting-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
+.ckpt-arrow {
+  color: var(--text-muted, #888);
+  font-size: 1.1rem;
+  margin-top: 14px;
 }
-.setting-input-sm { width: 80px; text-align: center; }
 
-.settings-footer {
+/* diff summary */
+.diff-summary {
   display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 14px 20px;
-  border-top: 1px solid var(--border);
+  gap: 12px;
+  font-size: 0.78rem;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border, #2a2a2a);
+  margin-bottom: 8px;
 }
+.diff-stat-files { color: var(--text, #e0e0e0); }
+.diff-stat-add { color: #4ade80; }
+.diff-stat-del { color: #f87171; }
 
-.setting-restart-hint {
-  font-size: 0.7rem;
-  color: var(--yellow);
-  margin-right: auto;
+/* diff file blocks */
+.diff-file {
+  margin-bottom: 6px;
+  border: 1px solid var(--border, #2a2a2a);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.diff-file.collapsed .diff-file-body { display: none; }
+.diff-file-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 4px;
+  padding: 6px 10px;
+  background: var(--bg-secondary, #1a1a1a);
+  cursor: pointer;
+  font-size: 0.78rem;
+  user-select: none;
 }
-
-/* ── Connection Modal ── */
-.conn-message {
-  font-size: 0.8rem;
-  color: var(--red);
-  background: var(--red-dim);
-  border: 1px solid rgba(248, 113, 113, 0.25);
-  border-radius: var(--radius);
-  padding: 8px 12px;
+.diff-file-header:hover { background: var(--bg-hover, #222); }
+.diff-file-name {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  color: var(--text, #e0e0e0);
+  font-weight: 500;
 }
-
-/* ── Running Job Preview Row ── */
-.preview-row {
-  cursor: default !important;
+.diff-file-stats {
+  display: flex;
+  gap: 8px;
+  font-size: 0.72rem;
+  font-weight: 600;
 }
-.preview-row,
-.preview-row:hover {
-  background: transparent !important;
+.diff-file-body {
+  overflow-x: auto;
 }
-.preview-row td {
-  padding: 0 !important;
-  border-bottom: 1px solid var(--border) !important;
+.diff-code {
+  margin: 0;
+  padding: 0;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 0.74rem;
+  line-height: 1.45;
+  tab-size: 4;
 }
 
-.job-preview {
-  padding: 6px 14px;
-  background: var(--bg);
-  font-family: var(--font-mono);
-  font-size: 0.78rem;
-  line-height: 1.7;
-  color: var(--text-muted);
-  max-height: calc(0.78rem * 1.7 * 2 + 6px + 6px);
-  overflow: hidden;
-  box-sizing: content-box;
+/* diff lines */
+.diff-line {
+  padding: 0 10px;
+  white-space: pre;
+  min-height: 1.45em;
 }
-.preview-lines {
-  min-width: 0;
-  overflow: hidden;
+.diff-add {
+  background: rgba(74, 222, 128, 0.1);
+  color: #4ade80;
 }
-.preview-line {
-  padding: 2px 0;
-  word-break: break-word;
+.diff-del {
+  background: rgba(248, 113, 113, 0.1);
+  color: #f87171;
 }
-.preview-line + .preview-line {
-  margin-top: 1px;
+.diff-hunk {
+  background: rgba(96, 165, 250, 0.08);
+  color: #60a5fa;
+  font-style: italic;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin-top: 2px;
 }
-.preview-tool {
-  display: inline-flex;
+.diff-meta {
+  color: var(--text-muted, #888);
+  font-style: italic;
+}
+
+.diff-result {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+@media (max-width: 600px) {
+  .main { padding: 4px 0; }
+  .card-body { padding: 14px; }
+  th, td { padding: 8px 6px; font-size: 0.74rem; }
+  .stream-content { max-height: 300px; }
+  .ckpt-selector { flex-direction: column; align-items: stretch; }
+  .ckpt-arrow { display: none; }
+  .diff-result { max-height: 350px; }
+
+  .project-detail { padding: 10px 12px 8px; }
+  .pd-title-row { flex-wrap: wrap; gap: 6px; }
+  .pd-meta { padding-left: 0; font-size: 0.66rem; }
+  .pd-path-text { max-width: 100%; }
+  .pd-remote { max-width: 150px; }
+  .pd-stats { padding: 8px 0 2px 0; gap: 5px; }
+  .pd-stat { padding: 4px 8px; min-width: 40px; }
+  .pd-stat-val { font-size: 0.78rem; }
+  .pd-stat-label { font-size: 0.54rem; }
+  .pd-actions .btn { font-size: 0.68rem; padding: 4px 8px; }
+}
+
+/* ── Pagination ── */
+.job-pagination {
+  display: flex;
   align-items: center;
+  justify-content: center;
   gap: 4px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: var(--yellow-dim);
-  color: var(--yellow);
-  font-size: 0.7rem;
-  font-weight: 600;
-  white-space: nowrap;
-  margin-right: 4px;
+  padding: 10px 0 6px;
 }
-.preview-tool::before {
-  content: '>';
-  opacity: 0.5;
+.pg-btn {
+  min-width: 32px;
+  height: 32px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 0.82rem;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
 }
-.preview-result {
-  color: var(--green);
+.pg-btn:hover:not(:disabled):not(.active) {
+  background: var(--hover);
+  border-color: var(--accent);
 }
-.preview-result::before {
-  content: '✓ ';
-  font-weight: 700;
+.pg-btn.active {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+  font-weight: 600;
 }
-.preview-text {
-  color: var(--text-muted);
+.pg-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.pg-ellipsis {
+  padding: 0 4px;
+  color: var(--text-secondary);
+  font-size: 0.82rem;
+}
+.pg-info {
+  margin-left: 10px;
+  font-size: 0.78rem;
+  color: var(--text-secondary);
 }