@qodalis/cli 2.0.0-beta.10 → 2.0.0-beta.12

package/assets/cli-panel.css

@@ -171,6 +171,8 @@
   overflow-x: auto;
   overflow-y: hidden;
   flex-shrink: 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.3)) transparent;
 }
 
 .cli-panel-tabs::-webkit-scrollbar {
@@ -809,6 +811,321 @@
   left: auto;
 }
 
+/* ─── Status indicators ──────────────────────────────────── */
+
+.cli-panel-status-indicators {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-left: 24px;
+  font-size: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.cli-panel-status-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+.cli-panel-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--cli-status-neutral, #6b7280);
+}
+
+.cli-panel-status-dot.dot-idle {
+  background: var(--cli-status-idle, #3fb950);
+}
+
+.cli-panel-status-dot.dot-running {
+  background: var(--cli-status-running, #f0883e);
+  animation: cliStatusPulse 1.5s ease-in-out infinite;
+}
+
+.cli-panel-status-dot.dot-error {
+  background: var(--cli-status-error, #f85149);
+}
+
+.cli-panel-status-icon {
+  flex-shrink: 0;
+}
+
+.cli-panel-status-icon.status-success {
+  color: var(--cli-status-idle, #3fb950);
+}
+
+.cli-panel-status-icon.status-error {
+  color: var(--cli-status-error, #f85149);
+}
+
+.cli-panel-status-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cli-panel-status-item.status-muted {
+  color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.4));
+}
+
+.cli-panel-status-item.status-text {
+  color: var(--cli-panel-accent, #818cf8);
+  max-width: 200px;
+}
+
+.cli-panel-status-item.status-running {
+  color: var(--cli-status-running, #f0883e);
+}
+
+.cli-panel-status-item.status-clickable {
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 2px 6px;
+  margin: -2px -6px;
+  transition: background-color 0.15s ease;
+}
+
+.cli-panel-status-item.status-clickable:hover {
+  background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.12));
+}
+
+/* ─── Tab dot ────────────────────────────────────────────── */
+
+.cli-panel-tab-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--cli-status-idle, #3fb950);
+}
+
+.cli-panel-tab-dot.dot-running {
+  background: var(--cli-status-running, #f0883e);
+  animation: cliStatusPulse 1.5s ease-in-out infinite;
+}
+
+.cli-panel-tab-dot.dot-error {
+  background: var(--cli-status-error, #f85149);
+}
+
+/* ─── Services / Servers dropdown ────────────────────────── */
+
+.cli-panel-services-dropdown {
+  position: fixed;
+  background-color: var(--cli-panel-header-bg, #1f2937);
+  border: 1px solid var(--cli-panel-border, #374151);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  z-index: 1100;
+  min-width: 260px;
+  max-width: 380px;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+.cli-panel-services-dropdown-header {
+  padding: 10px 14px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.5));
+  border-bottom: 1px solid var(--cli-panel-border, #374151);
+}
+
+.cli-panel-services-dropdown-list {
+  max-height: 240px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.2)) transparent;
+}
+
+.cli-panel-services-dropdown-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.cli-panel-services-dropdown-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cli-panel-services-dropdown-list::-webkit-scrollbar-thumb {
+  background: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.2));
+  border-radius: 3px;
+}
+
+.cli-panel-services-dropdown-list::-webkit-scrollbar-thumb:hover {
+  background: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.35));
+}
+
+.cli-panel-services-dropdown-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  transition: background-color 0.15s ease;
+}
+
+.cli-panel-services-dropdown-item:last-child {
+  border-bottom: none;
+}
+
+.cli-panel-services-dropdown-item:hover {
+  background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.08));
+}
+
+.cli-panel-svc-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 5px;
+}
+
+.cli-panel-svc-dot.svc-running {
+  background: var(--cli-status-idle, #3fb950);
+}
+
+.cli-panel-svc-dot.svc-stopped {
+  background: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.3));
+}
+
+.cli-panel-svc-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cli-panel-svc-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--cli-panel-text, rgba(255, 255, 255, 0.87));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cli-panel-svc-desc {
+  font-size: 11px;
+  color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.5));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cli-panel-svc-status {
+  font-size: 11px;
+  flex-shrink: 0;
+  color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.5));
+  margin-top: 1px;
+}
+
+.cli-panel-srv-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.cli-panel-services-dropdown-empty {
+  padding: 16px 14px;
+  font-size: 12px;
+  color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.4));
+  text-align: center;
+}
+
+/* ─── Glow line ──────────────────────────────────────────── */
+
+.cli-panel-glow-line {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), #a78bfa, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), transparent);
+  background-size: 200% 100%;
+  opacity: 0.4;
+  animation: cliGlowShift 8s ease-in-out infinite;
+  transition: opacity 0.6s ease;
+  pointer-events: none;
+}
+
+.cli-panel-glow-line.glow-active {
+  opacity: 0.8;
+  animation-duration: 3s;
+}
+
+/* Glow line for vertical positions */
+.cli-panel-wrapper[data-position="left"] .cli-panel-glow-line {
+  bottom: auto;
+  top: 0;
+  left: auto;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(180deg, transparent, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), #a78bfa, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), transparent);
+  background-size: 100% 200%;
+}
+
+.cli-panel-wrapper[data-position="right"] .cli-panel-glow-line {
+  bottom: auto;
+  top: 0;
+  left: 0;
+  right: auto;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(180deg, transparent, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), #a78bfa, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), transparent);
+  background-size: 100% 200%;
+}
+
+/* ─── Animations ─────────────────────────────────────────── */
+
+@keyframes cliStatusPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+@keyframes cliGlowShift {
+  0% { background-position: 200% center; }
+  100% { background-position: -200% center; }
+}
+
+/* ─── Accessibility ──────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .cli-panel-glow-line,
+  .cli-panel-status-dot,
+  .cli-panel-tab-dot {
+    animation: none !important;
+  }
+}
+
+/* ─── Scrollbar styling — scoped to CLI containers ────────── */
+
+.cli-panel-wrapper .xterm .xterm-viewport {
+  overscroll-behavior: contain;
+}
+
+.cli-panel-wrapper .xterm .xterm-viewport::-webkit-scrollbar {
+  width: 8px;
+}
+
+.cli-panel-wrapper .xterm .xterm-viewport::-webkit-scrollbar-thumb {
+  background: #444;
+  border-radius: 4px;
+}
+
+.cli-panel-wrapper .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
+  background: #666;
+}
+
 /* ─── Global helper ──────────────────────────────────────── */
 
 body.cli-pane-resizing {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qodalis/cli",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.12",
   "description": "Framework-agnostic CLI engine for @qodalis terminal applications.",
   "author": "Nicolae Lupei, Qodalis Solutions",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "./assets/*": "./assets/*"
   },
   "dependencies": {
-    "@qodalis/cli-core": "2.0.0-beta.10",
+    "@qodalis/cli-core": "2.0.0-beta.12",
     "@xterm/xterm": "^5.5.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-web-links": "^0.11.0",

package/public-api.d.mts

@@ -142,7 +142,7 @@ declare const CliBackgroundServiceRegistry_TOKEN = "cli-background-service-regis
  */
 declare const CliPackageManagerService_TOKEN = "cli-package-manager-service";
 
-declare const LIBRARY_VERSION = "2.0.0-beta.10";
+declare const LIBRARY_VERSION = "2.0.0-beta.12";
 declare const API_VERSION = 2;
 
 declare class CliAliasCommandProcessor implements ICliCommandProcessor {
@@ -910,6 +910,9 @@ declare class CliCommandExecutionContext implements ICliExecutionContext {
     translator: ICliTranslationService;
     reader: ICliInputReader;
     readonly backgroundServices: ICliBackgroundServiceRegistry;
+    setStatusText(text: string): void;
+    clearStatusText(): void;
+    getStatusText(): string | undefined;
     get promptLength(): number;
     set promptLength(value: number);
     get currentLine(): string;
@@ -928,6 +931,7 @@ declare class CliCommandExecutionContext implements ICliExecutionContext {
     exitFullScreenMode: () => void;
     createInterval: (callback: () => void, ms: number) => ICliManagedInterval;
     createTimeout: (callback: () => void, ms: number) => ICliManagedTimer;
+    submitCommand: (command: string) => Promise<void>;
     constructor(context: ICliExecutionContext, processor: ICliCommandProcessor);
 }
 
@@ -1193,6 +1197,24 @@ declare class CliExecutionContext implements ICliExecutionContext, InputModeHost
     readonly completionEngine: CliCompletionEngine;
     promptLength: number;
     readonly reader: ICliInputReader;
+    /**
+     * Result of the most recently executed command.
+     * Updated by the command executor after each command completes.
+     */
+    lastCommandResult?: {
+        command: string;
+        success: boolean;
+    };
+    /**
+     * Whether a command is currently being executed.
+     * Set by the command executor at start/end of executeCommand().
+     */
+    isExecuting: boolean;
+    private _statusText?;
+    readonly statusTextChange$: Subject<string | undefined>;
+    setStatusText(text: string): void;
+    clearStatusText(): void;
+    getStatusText(): string | undefined;
     readonly lineBuffer: CliLineBuffer;
     readonly lineRenderer: CliTerminalLineRenderer;
     readonly commandHistory: CliCommandHistory;
@@ -1218,6 +1240,12 @@ declare class CliExecutionContext implements ICliExecutionContext, InputModeHost
         newLine?: boolean;
         keepCurrentLine?: boolean;
     }): void;
+    /**
+     * Submit and execute a command — shared by interactive Enter key
+     * and programmatic engine.execute(). Adds to history, runs the
+     * command, and shows a new prompt afterwards.
+     */
+    submitCommand(command: string): Promise<void>;
     clearCurrentLine(): void;
     refreshCurrentLine(previousContentLength?: number): void;
     /**
@@ -1349,6 +1377,11 @@ declare class CliTimerManager {
 interface ICliExecutionHost extends ICliExecutionContext {
     contextProcessor?: ICliCommandProcessor;
     abort?(): void;
+    lastCommandResult?: {
+        command: string;
+        success: boolean;
+    };
+    isExecuting?: boolean;
 }
 declare class CliCommandExecutor implements ICliCommandExecutorService {
     protected readonly registry: ICliCommandProcessorRegistry;
@@ -2034,6 +2067,7 @@ declare class CliEngine {
     private resizeScheduled;
     private bootService?;
     private dragDropService?;
+    private _startedAt?;
     constructor(container: HTMLElement, options?: CliEngineOptions | undefined);
     /**
      * Register a CLI module to be loaded on start().
@@ -2084,7 +2118,13 @@ declare class CliEngine {
      */
     getRegistry(): CliCommandProcessorRegistry;
     /**
-     * Execute a command programmatically.
+     * Timestamp (ms since epoch) when the engine finished starting.
+     */
+    get startedAt(): number | undefined;
+    /**
+     * Execute a command programmatically, behaving the same as if the user
+     * typed it and pressed Enter: echoes the command, adds it to history,
+     * executes it, and shows a new prompt afterwards.
      */
     execute(command: string): Promise<void>;
     /**

package/public-api.d.ts

@@ -142,7 +142,7 @@ declare const CliBackgroundServiceRegistry_TOKEN = "cli-background-service-regis
  */
 declare const CliPackageManagerService_TOKEN = "cli-package-manager-service";
 
-declare const LIBRARY_VERSION = "2.0.0-beta.10";
+declare const LIBRARY_VERSION = "2.0.0-beta.12";
 declare const API_VERSION = 2;
 
 declare class CliAliasCommandProcessor implements ICliCommandProcessor {
@@ -910,6 +910,9 @@ declare class CliCommandExecutionContext implements ICliExecutionContext {
     translator: ICliTranslationService;
     reader: ICliInputReader;
     readonly backgroundServices: ICliBackgroundServiceRegistry;
+    setStatusText(text: string): void;
+    clearStatusText(): void;
+    getStatusText(): string | undefined;
     get promptLength(): number;
     set promptLength(value: number);
     get currentLine(): string;
@@ -928,6 +931,7 @@ declare class CliCommandExecutionContext implements ICliExecutionContext {
     exitFullScreenMode: () => void;
     createInterval: (callback: () => void, ms: number) => ICliManagedInterval;
     createTimeout: (callback: () => void, ms: number) => ICliManagedTimer;
+    submitCommand: (command: string) => Promise<void>;
     constructor(context: ICliExecutionContext, processor: ICliCommandProcessor);
 }
 
@@ -1193,6 +1197,24 @@ declare class CliExecutionContext implements ICliExecutionContext, InputModeHost
     readonly completionEngine: CliCompletionEngine;
     promptLength: number;
     readonly reader: ICliInputReader;
+    /**
+     * Result of the most recently executed command.
+     * Updated by the command executor after each command completes.
+     */
+    lastCommandResult?: {
+        command: string;
+        success: boolean;
+    };
+    /**
+     * Whether a command is currently being executed.
+     * Set by the command executor at start/end of executeCommand().
+     */
+    isExecuting: boolean;
+    private _statusText?;
+    readonly statusTextChange$: Subject<string | undefined>;
+    setStatusText(text: string): void;
+    clearStatusText(): void;
+    getStatusText(): string | undefined;
     readonly lineBuffer: CliLineBuffer;
     readonly lineRenderer: CliTerminalLineRenderer;
     readonly commandHistory: CliCommandHistory;
@@ -1218,6 +1240,12 @@ declare class CliExecutionContext implements ICliExecutionContext, InputModeHost
         newLine?: boolean;
         keepCurrentLine?: boolean;
     }): void;
+    /**
+     * Submit and execute a command — shared by interactive Enter key
+     * and programmatic engine.execute(). Adds to history, runs the
+     * command, and shows a new prompt afterwards.
+     */
+    submitCommand(command: string): Promise<void>;
     clearCurrentLine(): void;
     refreshCurrentLine(previousContentLength?: number): void;
     /**
@@ -1349,6 +1377,11 @@ declare class CliTimerManager {
 interface ICliExecutionHost extends ICliExecutionContext {
     contextProcessor?: ICliCommandProcessor;
     abort?(): void;
+    lastCommandResult?: {
+        command: string;
+        success: boolean;
+    };
+    isExecuting?: boolean;
 }
 declare class CliCommandExecutor implements ICliCommandExecutorService {
     protected readonly registry: ICliCommandProcessorRegistry;
@@ -2034,6 +2067,7 @@ declare class CliEngine {
     private resizeScheduled;
     private bootService?;
     private dragDropService?;
+    private _startedAt?;
     constructor(container: HTMLElement, options?: CliEngineOptions | undefined);
     /**
      * Register a CLI module to be loaded on start().
@@ -2084,7 +2118,13 @@ declare class CliEngine {
      */
     getRegistry(): CliCommandProcessorRegistry;
     /**
-     * Execute a command programmatically.
+     * Timestamp (ms since epoch) when the engine finished starting.
+     */
+    get startedAt(): number | undefined;
+    /**
+     * Execute a command programmatically, behaving the same as if the user
+     * typed it and pressed Enter: echoes the command, adds it to history,
+     * executes it, and shows a new prompt afterwards.
      */
     execute(command: string): Promise<void>;
     /**