@mrquake/quakecode-cli 0.64.3 → 0.64.6

package/dist/modes/interactive/interactive-mode.js

@@ -42,6 +42,7 @@ import { ModelSelectorComponent } from "./components/model-selector.js";
 import { OAuthSelectorComponent } from "./components/oauth-selector.js";
 import { ScopedModelsSelectorComponent } from "./components/scoped-models-selector.js";
 import { SessionSelectorComponent } from "./components/session-selector.js";
+import { SessionTabsComponent } from "./components/session-tabs.js";
 import { SettingsSelectorComponent } from "./components/settings-selector.js";
 import { SkillInvocationMessageComponent } from "./components/skill-invocation-message.js";
 import { ToolExecutionComponent } from "./components/tool-execution.js";
@@ -161,6 +162,8 @@ export class InteractiveMode {
         this.defaultEditor = new CustomEditor(this.ui, getEditorTheme(), this.keybindings, {
             paddingX: editorPaddingX,
             autocompleteMaxVisible,
+            noBorders: true,
+            prompt: theme.bold(theme.fg("accent", "› ")),
         });
         this.editor = this.defaultEditor;
         this.editorContainer = new Container();
@@ -291,17 +294,20 @@ export class InteractiveMode {
         this.fdPath = fdPath;
         // Add header container as first child
         this.ui.addChild(this.headerContainer);
+        this.headerContainer.addChild(new SessionTabsComponent(() => this.getSessionTabLabel(), () => DISPLAY_NAME));
+        this.headerContainer.addChild(new Spacer(1));
         // Add header with keybindings from config (unless silenced)
         if (this.options.verbose || !this.settingsManager.getQuietStartup()) {
             const currentModel = this.session.model?.id ?? "no model";
             const cwd = this.sessionManager.getCwd();
             const owner = os.userInfo().username;
             const title = `${DISPLAY_NAME} v${this.version}`;
-            const leftInner = 36;
-            const maxTotalWidth = Math.max(120, Math.min(this.ui.terminal.columns - 6, 170));
+            const leftInner = 44;
+            const maxTotalWidth = Math.max(128, Math.min(this.ui.terminal.columns - 6, 172));
             const rightInner = maxTotalWidth - leftInner - 7;
             const totalWidth = leftInner + rightInner + 7;
             const border = (s) => theme.fg("borderAccent", s);
+            const accent = (s) => theme.bold(theme.fg("accent", s));
             const fit = (text, width) => {
                 let out = text;
                 while (visibleWidth(out) > width && out.length > 0) {
@@ -316,19 +322,28 @@ export class InteractiveMode {
                 return out + " ".repeat(remaining);
             };
             const row = (left, right) => `${border("│")} ${fit(left, leftInner)} ${border("│")} ${fit(right, rightInner)} ${border("│")}`;
-            const top = `╭─── ${title} ${"─".repeat(Math.max(0, totalWidth - title.length - 6))}╮`;
+            const top = `╭── ${title} ${"─".repeat(Math.max(0, totalWidth - title.length - 5))}╮`;
             const bottom = `╰${"─".repeat(totalWidth - 2)}╯`;
-            const ruleRight = border("─".repeat(rightInner));
-            const mascotTop = theme.fg("borderAccent", "          ▐▛◉▜▌");
-            const mascotBottom = theme.fg("borderAccent", "          ▝▜▛▘");
+            const logo1 = accent(" ██████╗ ██╗   ██╗ █████╗ ██╗  ██╗███████╗ ");
+            const logo2 = accent("██╔═══██╗██║   ██║██╔══██╗██║ ██╔╝██╔════╝ ");
+            const logo3 = accent("██║   ██║██║   ██║███████║█████╔╝ █████╗   ");
+            const logo4 = accent("██║▄▄ ██║██║   ██║██╔══██║██╔═██╗ ██╔══╝   ");
+            const logo5 = accent("╚██████╔╝╚██████╔╝██║  ██║██║  ██╗███████╗ ");
+            const logo6 = accent(" ╚══▀▀═╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝ ");
+            const quick = theme.fg("muted", "/login") + " · " + theme.fg("muted", "/model") + " · " + theme.fg("muted", "/resume") + " · " + theme.fg("muted", "/agents");
+            const tips = `${theme.bold("Quick start")}  ${quick}`;
+            const status = `${theme.bold("Model")} ${theme.fg("borderAccent", currentModel)}  ·  ${theme.bold("User")} ${owner}`;
+            const workspace = `${theme.bold("Workspace")} ${cwd}`;
+            const note = theme.fg("dim", "Built for terminal-native coding, sessions, tools, and fast iteration.");
             const dashboard = [
                 border(top),
-                row(` Welcome back ${owner}!`, theme.bold(theme.fg("borderAccent", "Tips for getting started"))),
-                row(mascotTop, "Run /init to create AGENTS.md for Quake Code"),
-                row(mascotBottom, "Use /login, /model, and /settings to configure your session."),
-                row(` ${currentModel} · API Usage Billing · ${owner}'s`, ruleRight),
-                row(` ${cwd}`, theme.bold(theme.fg("borderAccent", "Recent activity"))),
-                row(" Individual Org", theme.fg("dim", "No recent activity")),
+                row(logo1, `${theme.bold("Welcome back")} ${owner}`),
+                row(logo2, tips),
+                row(logo3, "Run /init to generate AGENTS.md for this repo."),
+                row(logo4, "Use Tab for completion, Ctrl+R to resume, and /settings to tune Quake."),
+                row(logo5, status),
+                row(logo6, workspace),
+                row(theme.fg("dim", " "), note),
                 border(bottom),
             ].join("\n");
             this.builtInHeader = new Text(dashboard, 1, 0);
@@ -402,17 +417,21 @@ export class InteractiveMode {
         // Initialize available provider count for footer display
         await this.updateAvailableProviderCount();
     }
-    /**
-     * Update terminal title with session name and cwd.
-     */
+    getSessionTabLabel() {
+        return this.sessionManager.getSessionName() || path.basename(this.sessionManager.getCwd()) || "new session";
+    }
     updateTerminalTitle() {
-        const cwdBasename = path.basename(this.sessionManager.getCwd());
         const sessionName = this.sessionManager.getSessionName();
-        if (sessionName) {
-            this.ui.terminal.setTitle(`${DISPLAY_NAME} - ${sessionName} - ${cwdBasename}`);
+        const title = sessionName ? `${DISPLAY_NAME} - ${sessionName}` : DISPLAY_NAME;
+        // Add spinner if agent is thinking or working
+        const isActive = this.session.agent.state.isStreaming || this.session.agent.state.pendingToolCalls.size > 0;
+        if (isActive) {
+            const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+            const frame = frames[Math.floor(Date.now() / 100) % frames.length];
+            this.ui.terminal.setTitle(`${frame} ${title}`);
         }
         else {
-            this.ui.terminal.setTitle(`${DISPLAY_NAME} - ${cwdBasename}`);
+            this.ui.terminal.setTitle(title);
         }
     }
     /**
@@ -439,6 +458,13 @@ export class InteractiveMode {
                 this.showWarning(warning);
             }
         });
+        // Start thinking/working animation loop for terminal title
+        setInterval(() => {
+            const state = this.session.agent.state;
+            if (state.isStreaming || state.pendingToolCalls.size > 0) {
+                this.updateTerminalTitle();
+            }
+        }, 100);
         // Show startup warnings
         const { migratedProviders, modelFallbackMessage, initialMessage, initialImages, initialMessages } = this.options;
         if (migratedProviders && migratedProviders.length > 0) {
@@ -1885,7 +1911,27 @@ export class InteractiveMode {
                     this.loadingAnimation.stop();
                 }
                 this.statusContainer.clear();
-                this.loadingAnimation = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), this.defaultWorkingMessage);
+                // Create loading animation with "shimmer" effect support
+                this.loadingAnimation = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => {
+                    // Custom "shimmer" effect for the working message text
+                    const chars = text.split("");
+                    if (chars.length === 0)
+                        return "";
+                    const sweepSeconds = 2.0;
+                    const padding = 10;
+                    const period = chars.length + padding * 2;
+                    const posF = ((Date.now() / 1000) % sweepSeconds) / sweepSeconds * period;
+                    const pos = Math.floor(posF);
+                    const bandHalfWidth = 5;
+                    return chars.map((ch, i) => {
+                        const dist = Math.abs(i + padding - pos);
+                        if (dist <= bandHalfWidth) {
+                            // Glow effect: Bold + Accent color
+                            return theme.bold(theme.fg("accent", ch));
+                        }
+                        return theme.fg("muted", ch);
+                    }).join("");
+                }, this.defaultWorkingMessage);
                 this.statusContainer.addChild(this.loadingAnimation);
                 // Apply any pending working message queued before loader existed
                 if (this.pendingWorkingMessage !== undefined) {