@quanta-intellect/vessel-browser 0.1.58 → 0.1.60

package/out/renderer/assets/{index-Bn4ixapT.css → index-CBe7EN_l.css}

@@ -403,6 +403,11 @@
     transform: scale(0.9);
 }
 
+.nav-btn-muted {
+    opacity: 0.5;
+    filter: grayscale(0.6);
+}
+
 .nav-btn:disabled {
     opacity: 0.25;
     cursor: default;
@@ -682,10 +687,298 @@
     border-color: rgba(240, 198, 54, 0.25);
 }
 
+/* ═══════════════════════════════════════
+   Download toast — progress & completion
+   ═══════════════════════════════════════ */
+
+.download-toast-stack {
+    position: absolute;
+    bottom: 14px;
+    left: 14px;
+    z-index: 50;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    pointer-events: none;
+    max-width: min(340px, calc(100vw - 28px));
+}
+
+.download-toast {
+    padding: 10px 14px;
+    border: 1px solid rgba(138, 173, 107, 0.22);
+    border-radius: var(--radius-lg);
+    background: linear-gradient(
+        180deg,
+        rgba(50, 50, 54, 0.97),
+        rgba(34, 34, 38, 0.97)
+    );
+    box-shadow:
+        0 4px 12px rgba(0, 0, 0, 0.2),
+        0 16px 40px rgba(0, 0, 0, 0.16);
+    backdrop-filter: blur(16px);
+    animation: toast-enter var(--duration-enter) var(--ease-out-expo) both;
+}
+
+.download-toast-leaving {
+    animation: toast-exit 300ms var(--ease-in-out) both;
+}
+
+.download-toast-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.download-toast-filename {
+    color: var(--text-primary);
+    font-size: 12px;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+}
+
+.download-toast-done {
+    color: var(--accent-secondary, #8aad6b);
+    font-size: 13px;
+    font-weight: 700;
+    flex-shrink: 0;
+}
+
+.download-toast-failed {
+    color: #ff8e8e;
+    font-size: 13px;
+    font-weight: 700;
+    flex-shrink: 0;
+}
+
+.download-toast-bar-track {
+    margin-top: 8px;
+    height: 3px;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.08);
+    overflow: hidden;
+}
+
+.download-toast-bar-fill {
+    height: 100%;
+    border-radius: 2px;
+    background: var(--accent-secondary, #8aad6b);
+    transition: width 300ms var(--ease-in-out);
+}
+
+.download-toast-size {
+    margin-top: 4px;
+    color: var(--text-muted);
+    font-size: 11px;
+    font-family: var(--font-mono);
+}
+
+.download-toast-size-done {
+    color: var(--accent-secondary, #8aad6b);
+}
+
+/* ═══════════════════════════════════════
+   Flow progress — agent workflow steps
+   ═══════════════════════════════════════ */
+
+.flow-progress {
+    position: absolute;
+    right: 14px;
+    bottom: 300px;
+    width: min(320px, calc(100vw - 28px));
+    z-index: 40;
+    padding: 14px;
+    border: 1px solid rgba(196, 160, 90, 0.18);
+    border-radius: var(--radius-lg);
+    background: linear-gradient(
+        180deg,
+        rgba(50, 50, 54, 0.97),
+        rgba(34, 34, 38, 0.97)
+    );
+    box-shadow:
+        0 4px 12px rgba(0, 0, 0, 0.2),
+        0 16px 40px rgba(0, 0, 0, 0.16);
+    backdrop-filter: blur(16px);
+    animation: toast-enter var(--duration-enter) var(--ease-out-expo) both;
+}
+
+.flow-progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.flow-progress-goal {
+    color: var(--text-primary);
+    font-size: 12px;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+}
+
+.flow-progress-pct {
+    color: var(--text-muted);
+    font-size: 11px;
+    font-family: var(--font-mono);
+    flex-shrink: 0;
+}
+
+.flow-progress-bar-track {
+    height: 3px;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.08);
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+
+.flow-progress-bar-fill {
+    height: 100%;
+    border-radius: 2px;
+    background: var(--accent-primary);
+    transition: width 400ms var(--ease-out-expo);
+}
+
+.flow-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.flow-step {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 11.5px;
+    line-height: 1.4;
+}
+
+.flow-step-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background: var(--text-muted);
+    opacity: 0.3;
+}
+
+.flow-step-label {
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.flow-step-pending .flow-step-dot {
+    background: var(--text-muted);
+    opacity: 0.3;
+}
+
+.flow-step-active .flow-step-dot {
+    background: var(--accent-primary);
+    opacity: 1;
+    box-shadow: 0 0 6px rgba(196, 160, 90, 0.4);
+}
+
+.flow-step-active .flow-step-label {
+    color: var(--text-primary);
+    font-weight: 500;
+}
+
+.flow-step-done .flow-step-dot {
+    background: var(--accent-secondary, #8aad6b);
+    opacity: 1;
+}
+
+.flow-step-done .flow-step-label {
+    color: var(--text-muted);
+    text-decoration: line-through;
+    text-decoration-color: rgba(255, 255, 255, 0.15);
+}
+
+.flow-step-failed .flow-step-dot {
+    background: #ff6b5b;
+    opacity: 1;
+}
+
+.flow-step-failed .flow-step-label {
+    color: #ff8e8e;
+}
+
+.flow-step-skipped .flow-step-dot {
+    background: var(--text-muted);
+    opacity: 0.3;
+}
+
+.flow-step-skipped .flow-step-label {
+    color: var(--text-muted);
+    opacity: 0.5;
+}
+
+.flow-progress-hint {
+    margin-top: 8px;
+    font-size: 11px;
+    color: var(--text-muted);
+    line-height: 1.4;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 /* ═══════════════════════════════════════
    Agent transcript dock — floating panel
    ═══════════════════════════════════════ */
 
+.agent-summary-hud {
+    position: absolute;
+    right: 14px;
+    bottom: 14px;
+    z-index: 40;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    border: 1px solid rgba(196, 160, 90, 0.14);
+    border-radius: var(--radius-lg);
+    background: linear-gradient(
+        180deg,
+        rgba(50, 50, 54, 0.94),
+        rgba(34, 34, 38, 0.94)
+    );
+    box-shadow:
+        0 2px 8px rgba(0, 0, 0, 0.15),
+        0 8px 24px rgba(0, 0, 0, 0.12);
+    backdrop-filter: blur(16px);
+    animation: toast-enter var(--duration-enter) var(--ease-out-expo) both;
+    max-width: min(420px, calc(100vw - 28px));
+}
+
+.agent-summary-live-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--accent-primary);
+    box-shadow: 0 0 6px rgba(196, 160, 90, 0.5);
+    animation: agent-transcript-live-pulse 2s ease-in-out infinite;
+    flex-shrink: 0;
+}
+
+.agent-summary-text {
+    color: var(--text-secondary);
+    font-size: 11.5px;
+    line-height: 1.45;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .agent-transcript-dock {
     position: absolute;
     right: 14px;
@@ -4113,6 +4406,100 @@
     justify-content: center;
 }
 }
+
+/* ═══════════════════════════════════════
+   History panel
+   ═══════════════════════════════════════ */
+
+.history-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.history-panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.history-panel-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.history-clear-btn {
+    font-size: 11px;
+    color: var(--text-muted);
+    background: none;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: 2px 10px;
+    cursor: pointer;
+    transition: color var(--duration-fast), border-color var(--duration-fast);
+}
+
+.history-clear-btn:hover {
+    color: #ff8e8e;
+    border-color: rgba(255, 108, 91, 0.3);
+}
+
+.history-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px 0;
+}
+
+.history-entry {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    width: 100%;
+    text-align: left;
+    padding: 8px 14px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: background var(--duration-fast);
+}
+
+.history-entry:hover {
+    background: var(--bg-tertiary);
+}
+
+.history-entry-title {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.history-entry-url {
+    font-size: 11px;
+    font-family: var(--font-mono);
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.history-entry-time {
+    font-size: 10px;
+    color: var(--text-muted);
+    opacity: 0.7;
+}
+
+.history-empty {
+    padding: 20px 14px;
+    font-size: 12px;
+    color: var(--text-muted);
+    text-align: center;
+}
 .devtools-panel {
   width: 100%;
   height: 100%;
@@ -4671,6 +5058,28 @@
   --font-reader: Charter, Georgia, serif;
 }
 
+[data-theme="light"] {
+  --bg-primary: #f8f7f5;
+  --bg-secondary: #efeeec;
+  --bg-tertiary: #e5e4e2;
+  --bg-elevated: #dbd9d7;
+
+  --text-primary: #1c1c1e;
+  --text-secondary: #555558;
+  --text-muted: #8e8e93;
+
+  --accent-primary: #8a6d2f;
+  --accent-secondary: #5a7a42;
+  --accent-warm: #8a5e3a;
+
+  --border-subtle: #d4d3d1;
+  --border-visible: #c0bfbd;
+
+  --loading-bar: #8a6d2f;
+  --error: #b04040;
+  --success: #408040;
+}
+
 *,
 *::before,
 *::after {
@@ -4817,6 +5226,89 @@ button:active:not(:disabled) {
     }
 }
 
+/* ═══════════════════════════════════════
+   Find bar (Ctrl+F)
+   ═══════════════════════════════════════ */
+
+.find-bar {
+    position: absolute;
+    top: calc(32px + var(--tab-height) + var(--address-bar-height) + 4px);
+    right: 14px;
+    z-index: 60;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    border: 1px solid var(--border-visible);
+    border-radius: var(--radius-lg);
+    background: linear-gradient(
+        180deg,
+        rgba(50, 50, 54, 0.97),
+        rgba(34, 34, 38, 0.97)
+    );
+    box-shadow:
+        0 4px 12px rgba(0, 0, 0, 0.2),
+        0 16px 40px rgba(0, 0, 0, 0.16);
+    backdrop-filter: blur(16px);
+    animation: toast-enter var(--duration-enter) var(--ease-out-expo) both;
+}
+
+.find-bar-input {
+    width: 200px;
+    height: 28px;
+    padding: 0 8px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-size: 13px;
+    font-family: var(--font-mono);
+    outline: none;
+    transition: border-color var(--duration-fast) var(--ease-in-out);
+}
+
+.find-bar-input:focus {
+    border-color: var(--accent-primary);
+}
+
+.find-bar-count {
+    color: var(--text-muted);
+    font-size: 11px;
+    font-family: var(--font-mono);
+    white-space: nowrap;
+    min-width: 60px;
+    text-align: center;
+}
+
+.find-bar-btn {
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 11px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background var(--duration-fast), color var(--duration-fast);
+}
+
+.find-bar-btn:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+.find-bar-close {
+    font-size: 16px;
+    color: var(--text-muted);
+}
+
+.find-bar-close:hover {
+    color: var(--text-primary);
+}
+
 /* ═══════════════════════════════════════
    Scroll fade indicators
    ═══════════════════════════════════════ */