vg-coder-cli 2.0.31 → 2.0.32

package/src/server/views/css/bubble.css

@@ -0,0 +1,81 @@
+/* --- BUBBLE FEATURE STYLES --- */
+
+.vg-bubble {
+    position: fixed;
+    bottom: 50px;
+    right: 20px;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    cursor: grab;
+    z-index: 2147483647; /* Highest priority */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    pointer-events: auto; /* Always clickable */
+    user-select: none;
+}
+
+.vg-bubble:active {
+    cursor: grabbing;
+    transform: scale(0.95);
+}
+
+.vg-bubble:hover {
+    transform: scale(1.1);
+}
+
+.vg-bubble-icon {
+    font-size: 30px;
+    line-height: 1;
+    pointer-events: none; /* Let clicks pass to bubble */
+}
+
+/* Bubble Quick Actions Menu */
+.vg-bubble-menu {
+    position: absolute;
+    bottom: 70px;
+    right: 0;
+    background: var(--ios-card);
+    border-radius: 12px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    transition: all 0.2s ease;
+    pointer-events: auto;
+}
+
+.vg-bubble:hover .vg-bubble-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    pointer-events: auto;
+}
+
+.bubble-action-btn {
+    background: var(--ios-input-bg);
+    border: none;
+    border-radius: 8px;
+    padding: 8px 12px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    color: var(--text-primary);
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    transition: background 0.2s;
+}
+
+.bubble-action-btn:hover {
+    background: var(--ios-blue);
+    color: white;
+}

package/src/server/views/css/code-viewer.css

@@ -0,0 +1,58 @@
+/* Code Viewer Styles */
+.code-viewer-container {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background: var(--code-bg, #1e1e1e);
+    position: relative;
+}
+
+.cv-wrapper {
+    min-height: 100%;
+}
+
+.cv-wrapper pre {
+    margin: 0;
+    padding: 0;
+}
+
+.cv-wrapper code {
+    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+    font-size: 13px;
+    line-height: 1.5;
+    display: block;
+    padding: 15px;
+    overflow-x: auto;
+    background: transparent; /* Let container handle bg */
+}
+
+/* Scrollbar styling for code view */
+.code-viewer-container::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+.code-viewer-container::-webkit-scrollbar-thumb {
+    background: #424242;
+    border-radius: 5px;
+}
+
+.code-viewer-container::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
+/* States */
+.cv-loading, .cv-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-secondary, #888);
+    font-size: 13px;
+}
+
+.cv-error {
+    padding: 20px;
+    color: var(--ios-red, #ff3b30);
+    font-family: monospace;
+}

package/src/server/views/css/terminal.css

@@ -5,7 +5,7 @@
     left: 0;
     width: 0;
     height: 0;
-    z-index: 10000; /* Cao hơn mọi thứ */
+    z-index: 10000;
 }
 
 /* Style cho từng cửa sổ terminal */
@@ -20,26 +20,13 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    resize: both; /* Cho phép resize cửa sổ */
+    resize: both;
     min-width: 300px;
     min-height: 200px;
     transition: height 0.2s ease, width 0.2s ease;
 }
 
-/* --- TRẠNG THÁI MINIMIZED --- */
-.floating-terminal.minimized {
-    height: 36px !important; /* Chỉ hiện header */
-    min-height: 36px !important;
-    width: 200px !important; /* Thu nhỏ chiều ngang */
-    resize: none; /* Không cho resize khi đang minimize */
-    overflow: hidden;
-}
-
-.floating-terminal.minimized .terminal-body {
-    display: none;
-}
-
-/* Header dùng để drag */
+/* Header */
 .terminal-header {
     background: #252526;
     padding: 8px 12px;
@@ -50,168 +37,85 @@
     border-bottom: 1px solid #333;
     user-select: none;
     height: 36px;
+    flex-shrink: 0;
 }
 
-.terminal-header:active {
-    cursor: grabbing;
-}
+.terminal-header:active { cursor: grabbing; }
 
 .terminal-title-group {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: #ccc;
-    font-family: monospace;
-    font-size: 12px;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    display: flex; align-items: center; gap: 8px;
+    color: #ccc; font-family: monospace; font-size: 12px; font-weight: 600;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 
-/* Copy Button Group */
-.terminal-copy-group {
-    display: flex;
-    gap: 4px;
-    margin-left: auto;
-    margin-right: 8px;
-    align-items: center;
-}
+.terminal-controls { display: flex; gap: 6px; }
 
-.copy-btn {
-    padding: 3px 6px;
-    font-size: 10px;
-    border-radius: 3px;
-    background: #2d2d30;
-    border: 1px solid #3e3e42;
-    color: #ccc;
-    cursor: pointer;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 3px;
-    white-space: nowrap;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-}
-
-.copy-btn:hover {
-    background: #3e3e42;
-    border-color: #555;
-    transform: translateY(-1px);
-}
-
-.copy-btn:active {
-    transform: translateY(0);
-}
-
-.token-badge {
-    font-size: 9px;
-    color: #888;
-    font-weight: 600;
-    min-width: 20px;
-    text-align: right;
-}
-
-/* Specific button colors */
-.copy-smart:hover {
-    border-color: #4a9eff;
-}
-
-.copy-errors:hover {
-    border-color: #f48771;
+.term-btn {
+    width: 12px; height: 12px; border-radius: 50%; border: none;
+    cursor: pointer; display: flex; align-items: center; justify-content: center;
+    padding: 0; font-size: 8px; color: rgba(0,0,0,0.5);
 }
+.term-btn:hover { color: rgba(0,0,0,0.8); }
+.term-btn.close { background: #FF5F56; }
+.term-btn.minimize { background: #FFBD2E; }
+.term-btn.maximize { background: #27C93F; }
 
-.copy-recent:hover {
-    border-color: #89d185;
+/* Body Xterm */
+.terminal-body {
+    flex: 1;
+    position: relative;
+    padding: 5px 5px 0 5px; /* Bottom padding 0 để dính với input */
+    background: #1e1e1e;
+    overflow: hidden;
 }
 
-.copy-all:hover {
-    border-color: #dcdcaa;
-}
+/* Scrollbar customization */
+.xterm-viewport::-webkit-scrollbar { width: 8px; }
+.xterm-viewport::-webkit-scrollbar-thumb { background: #424242; border-radius: 4px; }
 
-/* Clear Button */
-.term-btn-clear {
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    background: #2d2d30;
-    border: 1px solid #3e3e42;
-    color: #ccc;
-    cursor: pointer;
+/* --- NEW: SEPARATE INPUT ROW --- */
+.terminal-input-row {
     display: flex;
     align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    margin-left: 4px;
-    margin-right: 8px;
-    transition: all 0.2s;
-}
-
-.term-btn-clear:hover {
-    background: #3e3e42;
-    border-color: #f48771;
-    transform: translateY(-1px);
+    padding: 4px 8px;
+    background: #252526; /* Slightly lighter than body */
+    border-top: 1px solid #333;
+    height: 32px;
+    flex-shrink: 0;
 }
 
-.term-btn-clear:active {
-    transform: translateY(0);
-}
-
-.terminal-controls {
-    display: flex;
-    gap: 6px;
+.terminal-prompt {
+    color: #34C759; /* Green prompt */
+    font-family: 'Menlo', 'Monaco', monospace;
+    font-weight: bold;
+    margin-right: 8px;
+    user-select: none;
+    font-size: 14px;
 }
 
-.term-btn {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
+.terminal-input {
+    flex: 1;
+    background: transparent;
     border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    color: #fff;
+    font-family: 'Menlo', 'Monaco', monospace;
+    font-size: 13px;
+    outline: none;
     padding: 0;
-    font-size: 8px;
-    color: rgba(0,0,0,0.5);
-}
-
-.term-btn:hover {
-    color: rgba(0,0,0,0.8);
 }
 
-.term-btn.close {
-    background: #FF5F56;
-}
-.term-btn.close:hover {
-    background: #ff3b30;
+.terminal-input::placeholder {
+    color: #666;
 }
 
-.term-btn.minimize {
-    background: #FFBD2E;
-}
-.term-btn.minimize:hover {
-    background: #ffad08;
-}
-
-.term-btn.maximize {
-    background: #27C93F;
-}
-
-/* Phần nội dung chứa xterm */
-.terminal-body {
-    flex: 1;
-    position: relative;
-    padding: 5px;
-    background: #1e1e1e;
-    overflow: hidden;
-}
-
-/* Scrollbar customization */
-.xterm-viewport::-webkit-scrollbar {
-    width: 8px;
+/* Minimized State */
+.floating-terminal.minimized {
+    height: 36px !important;
+    min-height: 36px !important;
+    width: 200px !important;
+    resize: none;
 }
-.xterm-viewport::-webkit-scrollbar-thumb {
-    background: #424242;
-    border-radius: 4px;
+.floating-terminal.minimized .terminal-body,
+.floating-terminal.minimized .terminal-input-row {
+    display: none;
 }