@xxmachina/components 19.51.0 → 19.81.0

package/fesm2022/xxmachina-components-templates-agent.mjs

@@ -20,11 +20,8 @@ import { svgToSixel, XtermOrganism } from '@xxmachina/components/organisms/xterm
 import { NavigatorOrganismStore } from '@ng-atomic/components/organisms/navigator';
 import chalk from 'chalk';
 
-/**
- * コアメッセージ（共通部分）
- */
 const CORE_MESSAGE = `${chalk.cyan('● What is Plan X?')}
-  Plan X is a modern WebRTC-based session manager, an alternative to SSH and Tmux.
+  A modern SSH and tmux alternative, peer-to-peer over WebRTC.
   Connect any machine worldwide with a single command and deploy AI agents anywhere.
 
 ${chalk.cyan(`● Vision: ${chalk.bold.yellow('"The Planet is the Computer"')}`)}
@@ -42,18 +39,12 @@ ${chalk.cyan('● Meta-Kernel')}
 ${chalk.cyan('● Autopoiesis')}
   Self-improving, self-sustaining, self-replicating living system
   Agents evolve themselves and spawn new agents`;
-/**
- * ウェルカムメッセージ（起動時に表示）
- */
 const WELCOME_MESSAGE = `${chalk.cyan(`● Welcome to ${chalk.bold.yellow('Plan X')}`)}
 
 ${CORE_MESSAGE}
 
 ${chalk.gray('powered by Plan X Agent LLC.')}
 `;
-/**
- * aboutコマンドのメッセージ
- */
 const ABOUT_MESSAGE = `${chalk.bold.cyan('● Plan X - OS for the LLM Era')}
 
 ${CORE_MESSAGE}
@@ -82,10 +73,10 @@ class AgentTemplate extends NgAtomicComponent {
     store = inject(EntranceTemplateStore);
     cdr = inject(ChangeDetectorRef);
     app = inject(AppService);
-    // 認証状態のチェック（非ログイン時は閉じるボタンを非表示）
     authState = injectAuthState();
     isLoggedIn = computed(() => !!this.authState(), ...(ngDevMode ? [{ debugName: "isLoggedIn" }] : []));
     endActions = input([], ...(ngDevMode ? [{ debugName: "endActions" }] : []));
+    hideInputArea = input(false, ...(ngDevMode ? [{ debugName: "hideInputArea" }] : []));
     navStartActions = computed(() => {
         if (!this.isLoggedIn())
             return [];
@@ -98,40 +89,31 @@ class AgentTemplate extends NgAtomicComponent {
     showCursor = false;
     cursorLeft = 60;
     cursorTop = 12;
-    // xterm関連
     terminal;
     commandHistory = [];
     historyIndex = -1;
-    // 入力管理
     currentInput = '';
     ngAfterViewInit() {
-        // 入力フィールドにフォーカス
         setTimeout(() => {
             const textarea = this.inputField()?.nativeElement;
             if (textarea) {
                 textarea.focus();
-                // 初期高さを適切に設定
                 this.adjustTextareaHeight();
             }
         }, 100);
     }
     onWindowResize() {
-        // ウィンドウリサイズ時にターミナルをフィット
         this.xtermComponent()?.fit();
     }
     onTerminalReady(terminal) {
         this.terminal = terminal;
-        // 初期化時にターミナルをコンテナサイズにフィット
         setTimeout(() => {
             this.xtermComponent()?.fit();
         }, 50);
-        // 初期メッセージの表示
         this.showWelcomeMessage();
-        // 初回ロード時は最上部にスクロール（アスキーアートから見えるように）
         setTimeout(() => {
             this.terminal.scrollToTop();
         }, 100);
-        // 入力フィールドにフォーカスと高さ調整
         const textarea = this.inputField()?.nativeElement;
         if (textarea) {
             textarea.focus();
@@ -144,7 +126,6 @@ class AgentTemplate extends NgAtomicComponent {
     }
     async showWelcomeMessage() {
         this.terminal.writeln('');
-        // assetsからSVGを読み込んでSIXELフォーマットで表示
         try {
             const response = await fetch('/assets/machina-ascii-art.svg');
             const svgString = await response.text();
@@ -154,7 +135,6 @@ class AgentTemplate extends NgAtomicComponent {
         }
         catch (error) {
             console.warn('SIXEL logo display failed, using ASCII fallback:', error);
-            // フォールバック: ASCII artでX_Xロゴを表示
             this.terminal.writeln(`${chalk.cyan('  ██╗  ██╗    ██╗  ██╗')}`);
             this.terminal.writeln(`${chalk.cyan('   ╚██╗██╔╝    ╚██╗██╔╝ ')}`);
             this.terminal.writeln(`${chalk.cyan('    ╚███╔╝      ╚███╔╝  ')}`);
@@ -163,23 +143,20 @@ class AgentTemplate extends NgAtomicComponent {
             this.terminal.writeln(`${chalk.cyan('   ╚═╝  ╚═╝    ╚═╝  ╚═╝ ')}`);
         }
         this.terminal.writeln('');
-        // ウェルカムメッセージを表示
         WELCOME_MESSAGE.split('\n').forEach(line => this.terminal.writeln(line));
         this.terminal.writeln('');
         this.terminal.writeln(`${chalk.cyan('● Type \x1b[1;36mlogin\x1b[1;33m to sign in with Google\x1b[0m')}`);
         this.terminal.writeln(`${chalk.cyan('● Type \x1b[1;36mhelp\x1b[1;33m for more commands\x1b[0m')}`);
         this.terminal.writeln('');
-        // プロンプト表示
         this.showPrompt();
     }
     showPrompt() {
-        // プロンプトはHTML側の入力フィールドで表示するため不要
+        void 0;
     }
     processCommand(command) {
         this.isProcessing = true;
         this.statusText = 'Processing...';
         this.cdr.markForCheck();
-        // ログインコマンド
         if (command === 'login') {
             this.terminal.writeln('\x1b[1;32m● Initiating Google authentication...\x1b[0m');
             setTimeout(() => {
@@ -217,7 +194,6 @@ class AgentTemplate extends NgAtomicComponent {
                 this.completeProcessing();
             }
         }
-        // ログアウトコマンド
         else if (command === 'logout' || command === 'signout') {
             this.terminal.writeln('\x1b[1;32m● Signing out...\x1b[0m');
             setTimeout(() => {
@@ -229,7 +205,6 @@ class AgentTemplate extends NgAtomicComponent {
                 }, 500);
             }, 300);
         }
-        // ヘルプコマンド
         else if (command === 'help' || command === '?') {
             this.terminal.writeln('\x1b[1;32m● Available commands:\x1b[0m');
             this.terminal.writeln('  \x1b[36mlogin\x1b[0m            - Sign in with Google (default)');
@@ -247,12 +222,10 @@ class AgentTemplate extends NgAtomicComponent {
             this.terminal.writeln('  \x1b[36m↑\x1b[0m / \x1b[36m↓\x1b[0m           - Navigate command history');
             this.completeProcessing();
         }
-        // machina情報コマンド
         else if (command === 'about') {
             ABOUT_MESSAGE.split('\n').forEach(line => this.terminal.writeln(line));
             this.completeProcessing();
         }
-        // 利用規約コマンド
         else if (command === 'terms') {
             this.terminal.writeln('\x1b[1;32m● Opening Terms of Service...\x1b[0m');
             setTimeout(() => {
@@ -260,13 +233,11 @@ class AgentTemplate extends NgAtomicComponent {
                 this.completeProcessing();
             }, 300);
         }
-        // クリアコマンド
         else if (command === 'clear' || command === 'cls') {
             this.terminal.clear();
             this.terminal.scrollToBottom();
             this.completeProcessing();
         }
-        // 不明なコマンド
         else {
             this.terminal.writeln(`\x1b[1;31m● Command not found: ${command}\x1b[0m`);
             this.terminal.writeln('  Type "help" for available commands.');
@@ -278,32 +249,24 @@ class AgentTemplate extends NgAtomicComponent {
         this.statusText = 'Ready';
         this.cdr.markForCheck();
         this.terminal.writeln('');
-        // 最新の出力が見えるようにスクロール
         this.terminal.scrollToBottom();
-        // 入力フィールドにフォーカスを戻す
         setTimeout(() => {
             this.inputField()?.nativeElement?.focus();
         }, 100);
     }
     handleEnter(event) {
-        // Shift+EnterまたはCtrl+Enterの場合は改行を許可
         if (event.shiftKey || event.ctrlKey) {
-            return; // デフォルト動作（改行）を許可
+            return;
         }
         event.preventDefault();
         const actualCommand = this.currentInput.trim();
         if (actualCommand) {
-            // コマンドをターミナルに表示（改行を含む場合は適切に処理）
             const displayCommand = actualCommand.split('\n').map(line => '\x1b[32m> \x1b[0m' + line).join('\r\n');
             this.terminal.write(displayCommand + '\r\n');
-            // 履歴に追加
             this.commandHistory.push(actualCommand);
             this.historyIndex = this.commandHistory.length;
-            // コマンドを処理
             this.processCommand(actualCommand);
-            // 入力を初期状態にリセット
             this.currentInput = '';
-            // textareaの高さをリセット
             const textarea = this.inputField()?.nativeElement;
             if (textarea) {
                 textarea.style.height = 'auto';
@@ -313,12 +276,10 @@ class AgentTemplate extends NgAtomicComponent {
     navigateHistory(event, direction) {
         event.preventDefault();
         if (direction === -1 && this.historyIndex > 0) {
-            // 上矢印
             this.historyIndex--;
             this.currentInput = this.commandHistory[this.historyIndex];
         }
         else if (direction === 1) {
-            // 下矢印
             if (this.historyIndex < this.commandHistory.length - 1) {
                 this.historyIndex++;
                 this.currentInput = this.commandHistory[this.historyIndex];
@@ -351,76 +312,59 @@ class AgentTemplate extends NgAtomicComponent {
         }
         this.dispatch(action);
     }
-    // 入力フィールドにフォーカスを設定
     focusInput() {
         this.inputField()?.nativeElement?.focus();
     }
-    // textareaの高さを内容に合わせて調整
     adjustTextareaHeight() {
         const textarea = this.inputField()?.nativeElement;
         if (textarea) {
-            // 一旦高さをリセット
             textarea.style.height = '20px';
-            // scrollHeightを確認し、実際に必要な高さを設定
             const scrollHeight = textarea.scrollHeight;
-            // パディングを考慮した最小高さ
-            const minHeight = 44; // padding: 12px * 2 + line-height: 20px
+            const minHeight = 44;
             textarea.style.height = Math.max(minHeight, scrollHeight) + 'px';
         }
     }
-    // キーダウンイベントのハンドラ（プレフィックス削除防止は不要になったためノーオペレーション）
     preventPrefixDeletion(_event) {
-        // No-op: prefix protection no longer needed
+        void 0;
     }
-    // 入力時の処理
     handleInput(event) {
         const textarea = event.target;
-        // 高さ調整（改行が含まれている場合のみ）
         if (this.currentInput.includes('\n')) {
             this.adjustTextareaHeight();
         }
         else {
-            // 1行の場合は固定高さ
             textarea.style.height = '44px';
         }
-        // カーソル位置を更新
         this.updateCursorPosition();
     }
-    // フォーカス時の処理
     handleFocus() {
         this.showCursor = true;
         this.updateCursorPosition();
     }
-    // ブラー時の処理
     handleBlur() {
         this.showCursor = false;
     }
-    // カーソル位置の更新
     updateCursorPosition() {
         const textarea = this.inputField()?.nativeElement;
         if (!textarea)
             return;
         const cursorPos = textarea.selectionStart;
         const textBeforeCursor = this.currentInput.substring(0, cursorPos);
-        // 改行で分割
         const lines = textBeforeCursor.split('\n');
         const currentLineIndex = lines.length - 1;
         const currentLineText = lines[currentLineIndex];
-        // 仮のcanvasを使って現在の行のテキスト幅を計算
         const canvas = document.createElement('canvas');
         const context = canvas.getContext('2d');
         if (context) {
             context.font = '14px "SF Mono", Monaco, monospace';
             const textWidth = context.measureText(currentLineText).width;
-            // カーソル位置を設定（パディング分を考慮）
-            this.cursorLeft = 8 + textWidth; // 8px は textarea の左パディング
-            // 垂直位置を調整（行数に基づいて、スクロール位置も考慮）
+            this.cursorLeft = 8 + textWidth;
             const scrollTop = textarea.scrollTop;
-            this.cursorTop = 12 + (currentLineIndex * 20) - scrollTop; // スクロール分を引く
+            this.cursorTop = 12 + (currentLineIndex * 20) - scrollTop;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AgentTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.6", type: AgentTemplate, isStandalone: true, selector: "templates-agent", inputs: { endActions: { classPropertyName: "endActions", publicName: "endActions", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "template" }, viewQueries: [{ propertyName: "xtermComponent", first: true, predicate: ["xtermComponent"], descendants: true, isSignal: true }, { propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.EntranceTemplateStore, inputs: ["form", "form", "actions", "actions", "title", "title", "fieldMap", "fieldMap"] }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: AgentTemplate, isStandalone: true, selector: "templates-agent", inputs: { endActions: { classPropertyName: "endActions", publicName: "endActions", isSignal: true, isRequired: false, transformFunction: null }, hideInputArea: { classPropertyName: "hideInputArea", publicName: "hideInputArea", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" }, classAttribute: "template" }, viewQueries: [{ propertyName: "xtermComponent", first: true, predicate: ["xtermComponent"], descendants: true, isSignal: true }, { propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.EntranceTemplateStore, inputs: ["form", "form", "actions", "actions", "title", "title", "fieldMap", "fieldMap"] }], ngImport: i0, template: `
   <frames-scroll class="terminal-window">
     <organisms-navigator top injectable class="terminal-header"
       [startActions]="navStartActions()"
@@ -428,51 +372,55 @@ class AgentTemplate extends NgAtomicComponent {
       (action)="onNavAction($event)"
     >MACHINA</organisms-navigator>
 
-    <organisms-xterm
-      class="terminal-display"
-      (terminalReady)="onTerminalReady($event)"
-      (githubLinkClick)="onGitHubLinkClick($event)"
-      (click)="focusInput()"
-      #xtermComponent
-    />
+    <ng-content select="[terminalSlot]">
+      <organisms-xterm
+        class="terminal-display"
+        (terminalReady)="onTerminalReady($event)"
+        (githubLinkClick)="onGitHubLinkClick($event)"
+        (click)="focusInput()"
+        #xtermComponent
+      />
+    </ng-content>
 
-    <div bottom class="input-area">
-      <div class="input-line">
-        <span class="input-prefix">></span>
-        <div class="textarea-wrapper">
-          <span class="arrow-prefix">></span>
-          <div class="input-container">
-            <textarea
-              #inputField
-              class="terminal-input"
-              [(ngModel)]="currentInput"
-              (keydown.enter)="handleEnter($event)"
-              (keydown.arrowUp)="navigateHistory($event, -1)"
-              (keydown.arrowDown)="navigateHistory($event, 1)"
-              (keydown.control.k)="generateCommand($event)"
-              (keydown.meta.k)="generateCommand($event)"
-              (keydown)="preventPrefixDeletion($event)"
-              (input)="handleInput($event)"
-              (focus)="handleFocus()"
-              (blur)="handleBlur()"
-              (keyup)="updateCursorPosition()"
-              (click)="updateCursorPosition()"
-              (scroll)="updateCursorPosition()"
-              [disabled]="isProcessing"
-              placeholder="Type a command..."
-              rows="1"
-            ></textarea>
-            <div class="block-cursor"
-              [class.visible]="showCursor"
-              [style.left.px]="cursorLeft"
-              [style.top.px]="cursorTop"
-            ></div>
+    @if (!hideInputArea()) {
+      <div bottom class="input-area">
+        <div class="input-line">
+          <span class="input-prefix">></span>
+          <div class="textarea-wrapper">
+            <span class="arrow-prefix">></span>
+            <div class="input-container">
+              <textarea
+                #inputField
+                class="terminal-input"
+                [(ngModel)]="currentInput"
+                (keydown.enter)="handleEnter($event)"
+                (keydown.arrowUp)="navigateHistory($event, -1)"
+                (keydown.arrowDown)="navigateHistory($event, 1)"
+                (keydown.control.k)="generateCommand($event)"
+                (keydown.meta.k)="generateCommand($event)"
+                (keydown)="preventPrefixDeletion($event)"
+                (input)="handleInput($event)"
+                (focus)="handleFocus()"
+                (blur)="handleBlur()"
+                (keyup)="updateCursorPosition()"
+                (click)="updateCursorPosition()"
+                (scroll)="updateCursorPosition()"
+                [disabled]="isProcessing"
+                placeholder="Type a command..."
+                rows="1"
+              ></textarea>
+              <div class="block-cursor"
+                [class.visible]="showCursor"
+                [style.left.px]="cursorLeft"
+                [style.top.px]="cursorTop"
+              ></div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    }
   </frames-scroll>
-  `, isInline: true, styles: [":host{--text: #e0e0e0;--text-SCOPED-IN-entrance-GDNr: var(--text);--user: #00ff00;--user-SCOPED-IN-entrance-GDNr: var(--user);--sys: #888;--sys-SCOPED-IN-entrance-GDNr: var(--sys);--accent: #ff79c6;--accent-SCOPED-IN-entrance-GDNr: var(--accent);--border: rgba(51, 51, 51, .5);--border-SCOPED-IN-entrance-GDNr: var(--border)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}:host{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:transparent;font-family:SF Mono,Monaco,monospace;container-type:inline-size;container-name:agent-container;transition:all .3s ease}.terminal-window{--height: 100%;--contents-gap: 0;width:100%;max-width:900px;height:600px;background:#0a0a0a;border:1px solid var(--border-SCOPED-IN-entrance-GDNr);border-radius:8px;box-shadow:0 20px 40px #0000004d;animation:fadeIn .3s;transition:all .3s ease}.terminal-header{display:flex;justify-content:space-between;align-items:center;height:56px;min-height:56px;flex-shrink:0;padding:0;background:#1a1a1a99;border-bottom:1px solid var(--border-SCOPED-IN-entrance-GDNr);transition:all .3s ease;position:relative}.terminal-header .close-button{color:var(--sys-SCOPED-IN-entrance-GDNr);margin-right:.5rem;opacity:.7}.terminal-header .close-button:hover{color:var(--text-SCOPED-IN-entrance-GDNr);opacity:1}.terminal-header .terminal-title{font-size:13px;color:var(--text-SCOPED-IN-entrance-GDNr);font-weight:500;flex:1}.terminal-header .terminal-status{font-size:12px;color:var(--sys-SCOPED-IN-entrance-GDNr);opacity:.7}.terminal-display{width:100%;height:100%;background:#0a0a0a}.input-area{background:#000000e6;border-top:1px solid var(--border-SCOPED-IN-entrance-GDNr);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s ease;padding:16px 20px}.input-line{display:block;position:relative}.input-line .input-prefix{display:none}.input-line .textarea-wrapper{display:flex;align-items:flex-start;position:relative;border:1px solid rgba(255,255,255,.2);border-radius:4px;transition:border-color .2s ease}.input-line .textarea-wrapper:focus-within{border-color:#fff6}.input-line .textarea-wrapper .arrow-prefix{color:#e0e0e0;font-family:SF Mono,Monaco,monospace;font-size:14px;font-weight:400;padding:12px 0 12px 16px;flex-shrink:0;pointer-events:none}.input-line .textarea-wrapper .input-container{flex:1;position:relative;overflow:hidden}.input-line .textarea-wrapper .terminal-input{width:100%;background:transparent;border:none;outline:none;color:#e0e0e0;font-family:SF Mono,Monaco,monospace;font-size:14px;font-weight:400;caret-color:transparent;padding:12px 16px 12px 8px;transition:none;resize:none;height:44px;min-height:44px;max-height:200px;overflow-y:auto;overflow-x:hidden;line-height:20px;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word}.input-line .textarea-wrapper .terminal-input::selection{background:#ffffff4d}.input-line .textarea-wrapper .terminal-input{caret-shape:block}.input-line .textarea-wrapper .terminal-input:disabled{opacity:.5;cursor:not-allowed}.input-line .textarea-wrapper .terminal-input:-webkit-autofill{-webkit-text-fill-color:#e0e0e0;-webkit-box-shadow:0 0 0 1000px rgba(0,0,0,.9) inset}.input-line .textarea-wrapper .terminal-input::placeholder{color:#ffffff4d;opacity:1}.input-line .textarea-wrapper .block-cursor{position:absolute;width:10px;height:20px;background:#e0e0e0;opacity:0;pointer-events:none}.input-line .textarea-wrapper .block-cursor.visible{animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:.8}51%,to{opacity:0}}:host:has(.terminal-window){height:100vh;height:100dvh;overflow-y:auto}@container agent-container (max-width: 600px){:host{padding:0;padding-top:env(safe-area-inset-top)}.terminal-window{height:100%;max-height:100vh;max-height:100dvh;max-width:100%;border-radius:0;border:none;box-shadow:none}.terminal-header{height:56px;padding:0}.terminal-header .terminal-title{font-size:12px}.terminal-header .terminal-status{font-size:11px}.terminal-header .close-button{margin-right:.25rem}}@container agent-container (min-width: 601px) and (max-width: 900px){.terminal-window{max-width:100%;height:100%;border-radius:0}}@container agent-container (max-width: 400px){.terminal-header{height:56px;padding:0}.terminal-header .close-button{margin-right:.2rem}.input-area{padding:12px 16px}.textarea-wrapper .arrow-prefix{font-size:13px;padding:10px 0 10px 12px}.textarea-wrapper .terminal-input{font-size:12px;padding:10px 12px 10px 6px;height:40px;min-height:40px;line-height:20px}}.ascii-art{font-family:Consolas,Monaco,Liberation Mono,Menlo,Courier New,monospace!important;font-size:10px!important;line-height:1.1!important;letter-spacing:0!important;font-weight:400!important;margin:1em 0!important;padding:1em!important;white-space:pre!important;overflow-x:auto!important;overflow-y:hidden!important;display:block!important;width:fit-content!important;background:#ffffff08;border:1px solid var(--border-SCOPED-IN-entrance-GDNr);border-radius:4px;color:var(--accent-SCOPED-IN-entrance-GDNr)!important;opacity:.9;text-shadow:0 0 10px var(--accent-SCOPED-IN-entrance-GDNr),0 0 20px var(--accent-SCOPED-IN-entrance-GDNr);-webkit-font-smoothing:none!important;-moz-osx-font-smoothing:unset!important;font-variant-ligatures:none!important;text-rendering:optimizeLegibility!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: XtermOrganism, selector: "organisms-xterm", outputs: ["terminalReady", "githubLinkClick"] }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "endActions", "title"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+  `, isInline: true, styles: [":host{--text: #e0e0e0;--text-SCOPED-IN-entrance-0hAu: var(--text);--user: #33ff33;--user-SCOPED-IN-entrance-0hAu: var(--user);--sys: #888;--sys-SCOPED-IN-entrance-0hAu: var(--sys);--accent: #ff79c6;--accent-SCOPED-IN-entrance-0hAu: var(--accent);--border: rgba(51, 51, 51, .5);--border-SCOPED-IN-entrance-0hAu: var(--border)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}:host{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:transparent;font-family:SF Mono,Monaco,monospace;container-type:inline-size;container-name:agent-container;transition:all .3s ease}.terminal-window{--height: 100%;--contents-gap: 0;width:100%;max-width:900px;height:600px;background:#0a0a0a;border:1px solid var(--border-SCOPED-IN-entrance-0hAu);border-radius:8px;box-shadow:0 20px 40px #0000004d;animation:fadeIn .3s;transition:all .3s ease}.terminal-header{display:flex;justify-content:space-between;align-items:center;height:56px;min-height:56px;flex-shrink:0;padding:0;background:#1a1a1a99;border-bottom:1px solid var(--border-SCOPED-IN-entrance-0hAu);transition:all .3s ease;position:relative}.terminal-header .close-button{color:var(--sys-SCOPED-IN-entrance-0hAu);margin-right:.5rem;opacity:.7}.terminal-header .close-button:hover{color:var(--text-SCOPED-IN-entrance-0hAu);opacity:1}.terminal-header .terminal-title{font-size:13px;color:var(--text-SCOPED-IN-entrance-0hAu);font-weight:500;flex:1}.terminal-header .terminal-status{font-size:12px;color:var(--sys-SCOPED-IN-entrance-0hAu);opacity:.7}.terminal-display{width:100%;height:100%;background:#0a0a0a}.input-area{background:#000000e6;border-top:1px solid var(--border-SCOPED-IN-entrance-0hAu);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s ease;padding:16px 20px}.input-line{display:block;position:relative}.input-line .input-prefix{display:none}.input-line .textarea-wrapper{display:flex;align-items:flex-start;position:relative;border:1px solid rgba(255,255,255,.2);border-radius:4px;transition:border-color .2s ease}.input-line .textarea-wrapper:focus-within{border-color:#fff6}.input-line .textarea-wrapper .arrow-prefix{color:#e0e0e0;font-family:SF Mono,Monaco,monospace;font-size:14px;font-weight:400;padding:12px 0 12px 16px;flex-shrink:0;pointer-events:none}.input-line .textarea-wrapper .input-container{flex:1;position:relative;overflow:hidden}.input-line .textarea-wrapper .terminal-input{width:100%;background:transparent;border:none;outline:none;color:#e0e0e0;font-family:SF Mono,Monaco,monospace;font-size:14px;font-weight:400;caret-color:transparent;padding:12px 16px 12px 8px;transition:none;resize:none;height:44px;min-height:44px;max-height:200px;overflow-y:auto;overflow-x:hidden;line-height:20px;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word}.input-line .textarea-wrapper .terminal-input::selection{background:#ffffff4d}.input-line .textarea-wrapper .terminal-input{caret-shape:block}.input-line .textarea-wrapper .terminal-input:disabled{opacity:.5;cursor:not-allowed}.input-line .textarea-wrapper .terminal-input:-webkit-autofill{-webkit-text-fill-color:#e0e0e0;-webkit-box-shadow:0 0 0 1000px rgba(0,0,0,.9) inset}.input-line .textarea-wrapper .terminal-input::placeholder{color:#ffffff4d;opacity:1}.input-line .textarea-wrapper .block-cursor{position:absolute;width:10px;height:20px;background:#e0e0e0;opacity:0;pointer-events:none}.input-line .textarea-wrapper .block-cursor.visible{animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:.8}51%,to{opacity:0}}:host:has(.terminal-window){height:100vh;height:100dvh;overflow-y:auto}@container agent-container (max-width: 600px){:host{padding:0;padding-top:env(safe-area-inset-top)}.terminal-window{height:100%;max-height:100vh;max-height:100dvh;max-width:100%;border-radius:0;border:none;box-shadow:none}.terminal-header{height:56px;padding:0}.terminal-header .terminal-title{font-size:12px}.terminal-header .terminal-status{font-size:11px}.terminal-header .close-button{margin-right:.25rem}}@container agent-container (min-width: 601px) and (max-width: 900px){.terminal-window{max-width:100%;height:100%;border-radius:0}}@container agent-container (max-width: 400px){.terminal-header{height:56px;padding:0}.terminal-header .close-button{margin-right:.2rem}.input-area{padding:12px 16px}.textarea-wrapper .arrow-prefix{font-size:13px;padding:10px 0 10px 12px}.textarea-wrapper .terminal-input{font-size:12px;padding:10px 12px 10px 6px;height:40px;min-height:40px;line-height:20px}}.ascii-art{font-family:Consolas,Monaco,Liberation Mono,Menlo,Courier New,monospace!important;font-size:10px!important;line-height:1.1!important;letter-spacing:0!important;font-weight:400!important;margin:1em 0!important;padding:1em!important;white-space:pre!important;overflow-x:auto!important;overflow-y:hidden!important;display:block!important;width:fit-content!important;background:#ffffff08;border:1px solid var(--border-SCOPED-IN-entrance-0hAu);border-radius:4px;color:var(--accent-SCOPED-IN-entrance-0hAu)!important;opacity:.9;text-shadow:0 0 10px var(--accent-SCOPED-IN-entrance-0hAu),0 0 20px var(--accent-SCOPED-IN-entrance-0hAu);-webkit-font-smoothing:none!important;-moz-osx-font-smoothing:unset!important;font-variant-ligatures:none!important;text-rendering:optimizeLegibility!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: XtermOrganism, selector: "organisms-xterm", outputs: ["terminalReady", "githubLinkClick"] }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "endActions", "title"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AgentTemplate, decorators: [{
             type: Component,
@@ -497,49 +445,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
       (action)="onNavAction($event)"
     >MACHINA</organisms-navigator>
 
-    <organisms-xterm
-      class="terminal-display"
-      (terminalReady)="onTerminalReady($event)"
-      (githubLinkClick)="onGitHubLinkClick($event)"
-      (click)="focusInput()"
-      #xtermComponent
-    />
+    <ng-content select="[terminalSlot]">
+      <organisms-xterm
+        class="terminal-display"
+        (terminalReady)="onTerminalReady($event)"
+        (githubLinkClick)="onGitHubLinkClick($event)"
+        (click)="focusInput()"
+        #xtermComponent
+      />
+    </ng-content>
 
-    <div bottom class="input-area">
-      <div class="input-line">
-        <span class="input-prefix">></span>
-        <div class="textarea-wrapper">
-          <span class="arrow-prefix">></span>
-          <div class="input-container">
-            <textarea
-              #inputField
-              class="terminal-input"
-              [(ngModel)]="currentInput"
-              (keydown.enter)="handleEnter($event)"
-              (keydown.arrowUp)="navigateHistory($event, -1)"
-              (keydown.arrowDown)="navigateHistory($event, 1)"
-              (keydown.control.k)="generateCommand($event)"
-              (keydown.meta.k)="generateCommand($event)"
-              (keydown)="preventPrefixDeletion($event)"
-              (input)="handleInput($event)"
-              (focus)="handleFocus()"
-              (blur)="handleBlur()"
-              (keyup)="updateCursorPosition()"
-              (click)="updateCursorPosition()"
-              (scroll)="updateCursorPosition()"
-              [disabled]="isProcessing"
-              placeholder="Type a command..."
-              rows="1"
-            ></textarea>
-            <div class="block-cursor"
-              [class.visible]="showCursor"
-              [style.left.px]="cursorLeft"
-              [style.top.px]="cursorTop"
-            ></div>
+    @if (!hideInputArea()) {
+      <div bottom class="input-area">
+        <div class="input-line">
+          <span class="input-prefix">></span>
+          <div class="textarea-wrapper">
+            <span class="arrow-prefix">></span>
+            <div class="input-container">
+              <textarea
+                #inputField
+                class="terminal-input"
+                [(ngModel)]="currentInput"
+                (keydown.enter)="handleEnter($event)"
+                (keydown.arrowUp)="navigateHistory($event, -1)"
+                (keydown.arrowDown)="navigateHistory($event, 1)"
+                (keydown.control.k)="generateCommand($event)"
+                (keydown.meta.k)="generateCommand($event)"
+                (keydown)="preventPrefixDeletion($event)"
+                (input)="handleInput($event)"
+                (focus)="handleFocus()"
+                (blur)="handleBlur()"
+                (keyup)="updateCursorPosition()"
+                (click)="updateCursorPosition()"
+                (scroll)="updateCursorPosition()"
+                [disabled]="isProcessing"
+                placeholder="Type a command..."
+                rows="1"
+              ></textarea>
+              <div class="block-cursor"
+                [class.visible]="showCursor"
+                [style.left.px]="cursorLeft"
+                [style.top.px]="cursorTop"
+              ></div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    }
   </frames-scroll>
   `, host: {
                         class: 'template'
@@ -553,8 +505,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                                 'fieldMap',
                             ],
                         },
-                    ], styles: [":host{--text: #e0e0e0;--text-SCOPED-IN-entrance-GDNr: var(--text);--user: #00ff00;--user-SCOPED-IN-entrance-GDNr: var(--user);--sys: #888;--sys-SCOPED-IN-entrance-GDNr: var(--sys);--accent: #ff79c6;--accent-SCOPED-IN-entrance-GDNr: var(--accent);--border: rgba(51, 51, 51, .5);--border-SCOPED-IN-entrance-GDNr: var(--border)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}:host{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:transparent;font-family:SF Mono,Monaco,monospace;container-type:inline-size;container-name:agent-container;transition:all .3s ease}.terminal-window{--height: 100%;--contents-gap: 0;width:100%;max-width:900px;height:600px;background:#0a0a0a;border:1px solid var(--border-SCOPED-IN-entrance-GDNr);border-radius:8px;box-shadow:0 20px 40px #0000004d;animation:fadeIn .3s;transition:all .3s ease}.terminal-header{display:flex;justify-content:space-between;align-items:center;height:56px;min-height:56px;flex-shrink:0;padding:0;background:#1a1a1a99;border-bottom:1px solid var(--border-SCOPED-IN-entrance-GDNr);transition:all .3s ease;position:relative}.terminal-header .close-button{color:var(--sys-SCOPED-IN-entrance-GDNr);margin-right:.5rem;opacity:.7}.terminal-header .close-button:hover{color:var(--text-SCOPED-IN-entrance-GDNr);opacity:1}.terminal-header .terminal-title{font-size:13px;color:var(--text-SCOPED-IN-entrance-GDNr);font-weight:500;flex:1}.terminal-header .terminal-status{font-size:12px;color:var(--sys-SCOPED-IN-entrance-GDNr);opacity:.7}.terminal-display{width:100%;height:100%;background:#0a0a0a}.input-area{background:#000000e6;border-top:1px solid var(--border-SCOPED-IN-entrance-GDNr);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s ease;padding:16px 20px}.input-line{display:block;position:relative}.input-line .input-prefix{display:none}.input-line .textarea-wrapper{display:flex;align-items:flex-start;position:relative;border:1px solid rgba(255,255,255,.2);border-radius:4px;transition:border-color .2s ease}.input-line .textarea-wrapper:focus-within{border-color:#fff6}.input-line .textarea-wrapper .arrow-prefix{color:#e0e0e0;font-family:SF Mono,Monaco,monospace;font-size:14px;font-weight:400;padding:12px 0 12px 16px;flex-shrink:0;pointer-events:none}.input-line .textarea-wrapper .input-container{flex:1;position:relative;overflow:hidden}.input-line .textarea-wrapper .terminal-input{width:100%;background:transparent;border:none;outline:none;color:#e0e0e0;font-family:SF Mono,Monaco,monospace;font-size:14px;font-weight:400;caret-color:transparent;padding:12px 16px 12px 8px;transition:none;resize:none;height:44px;min-height:44px;max-height:200px;overflow-y:auto;overflow-x:hidden;line-height:20px;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word}.input-line .textarea-wrapper .terminal-input::selection{background:#ffffff4d}.input-line .textarea-wrapper .terminal-input{caret-shape:block}.input-line .textarea-wrapper .terminal-input:disabled{opacity:.5;cursor:not-allowed}.input-line .textarea-wrapper .terminal-input:-webkit-autofill{-webkit-text-fill-color:#e0e0e0;-webkit-box-shadow:0 0 0 1000px rgba(0,0,0,.9) inset}.input-line .textarea-wrapper .terminal-input::placeholder{color:#ffffff4d;opacity:1}.input-line .textarea-wrapper .block-cursor{position:absolute;width:10px;height:20px;background:#e0e0e0;opacity:0;pointer-events:none}.input-line .textarea-wrapper .block-cursor.visible{animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:.8}51%,to{opacity:0}}:host:has(.terminal-window){height:100vh;height:100dvh;overflow-y:auto}@container agent-container (max-width: 600px){:host{padding:0;padding-top:env(safe-area-inset-top)}.terminal-window{height:100%;max-height:100vh;max-height:100dvh;max-width:100%;border-radius:0;border:none;box-shadow:none}.terminal-header{height:56px;padding:0}.terminal-header .terminal-title{font-size:12px}.terminal-header .terminal-status{font-size:11px}.terminal-header .close-button{margin-right:.25rem}}@container agent-container (min-width: 601px) and (max-width: 900px){.terminal-window{max-width:100%;height:100%;border-radius:0}}@container agent-container (max-width: 400px){.terminal-header{height:56px;padding:0}.terminal-header .close-button{margin-right:.2rem}.input-area{padding:12px 16px}.textarea-wrapper .arrow-prefix{font-size:13px;padding:10px 0 10px 12px}.textarea-wrapper .terminal-input{font-size:12px;padding:10px 12px 10px 6px;height:40px;min-height:40px;line-height:20px}}.ascii-art{font-family:Consolas,Monaco,Liberation Mono,Menlo,Courier New,monospace!important;font-size:10px!important;line-height:1.1!important;letter-spacing:0!important;font-weight:400!important;margin:1em 0!important;padding:1em!important;white-space:pre!important;overflow-x:auto!important;overflow-y:hidden!important;display:block!important;width:fit-content!important;background:#ffffff08;border:1px solid var(--border-SCOPED-IN-entrance-GDNr);border-radius:4px;color:var(--accent-SCOPED-IN-entrance-GDNr)!important;opacity:.9;text-shadow:0 0 10px var(--accent-SCOPED-IN-entrance-GDNr),0 0 20px var(--accent-SCOPED-IN-entrance-GDNr);-webkit-font-smoothing:none!important;-moz-osx-font-smoothing:unset!important;font-variant-ligatures:none!important;text-rendering:optimizeLegibility!important}\n"] }]
-        }], propDecorators: { endActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "endActions", required: false }] }], xtermComponent: [{ type: i0.ViewChild, args: ['xtermComponent', { isSignal: true }] }], inputField: [{ type: i0.ViewChild, args: ['inputField', { isSignal: true }] }], onWindowResize: [{
+                    ], styles: [":host{--text: #e0e0e0;--text-SCOPED-IN-entrance-0hAu: var(--text);--user: #33ff33;--user-SCOPED-IN-entrance-0hAu: var(--user);--sys: #888;--sys-SCOPED-IN-entrance-0hAu: var(--sys);--accent: #ff79c6;--accent-SCOPED-IN-entrance-0hAu: var(--accent);--border: rgba(51, 51, 51, .5);--border-SCOPED-IN-entrance-0hAu: var(--border)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}:host{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:transparent;font-family:SF Mono,Monaco,monospace;container-type:inline-size;container-name:agent-container;transition:all .3s ease}.terminal-window{--height: 100%;--contents-gap: 0;width:100%;max-width:900px;height:600px;background:#0a0a0a;border:1px solid var(--border-SCOPED-IN-entrance-0hAu);border-radius:8px;box-shadow:0 20px 40px #0000004d;animation:fadeIn .3s;transition:all .3s ease}.terminal-header{display:flex;justify-content:space-between;align-items:center;height:56px;min-height:56px;flex-shrink:0;padding:0;background:#1a1a1a99;border-bottom:1px solid var(--border-SCOPED-IN-entrance-0hAu);transition:all .3s ease;position:relative}.terminal-header .close-button{color:var(--sys-SCOPED-IN-entrance-0hAu);margin-right:.5rem;opacity:.7}.terminal-header .close-button:hover{color:var(--text-SCOPED-IN-entrance-0hAu);opacity:1}.terminal-header .terminal-title{font-size:13px;color:var(--text-SCOPED-IN-entrance-0hAu);font-weight:500;flex:1}.terminal-header .terminal-status{font-size:12px;color:var(--sys-SCOPED-IN-entrance-0hAu);opacity:.7}.terminal-display{width:100%;height:100%;background:#0a0a0a}.input-area{background:#000000e6;border-top:1px solid var(--border-SCOPED-IN-entrance-0hAu);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s ease;padding:16px 20px}.input-line{display:block;position:relative}.input-line .input-prefix{display:none}.input-line .textarea-wrapper{display:flex;align-items:flex-start;position:relative;border:1px solid rgba(255,255,255,.2);border-radius:4px;transition:border-color .2s ease}.input-line .textarea-wrapper:focus-within{border-color:#fff6}.input-line .textarea-wrapper .arrow-prefix{color:#e0e0e0;font-family:SF Mono,Monaco,monospace;font-size:14px;font-weight:400;padding:12px 0 12px 16px;flex-shrink:0;pointer-events:none}.input-line .textarea-wrapper .input-container{flex:1;position:relative;overflow:hidden}.input-line .textarea-wrapper .terminal-input{width:100%;background:transparent;border:none;outline:none;color:#e0e0e0;font-family:SF Mono,Monaco,monospace;font-size:14px;font-weight:400;caret-color:transparent;padding:12px 16px 12px 8px;transition:none;resize:none;height:44px;min-height:44px;max-height:200px;overflow-y:auto;overflow-x:hidden;line-height:20px;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word}.input-line .textarea-wrapper .terminal-input::selection{background:#ffffff4d}.input-line .textarea-wrapper .terminal-input{caret-shape:block}.input-line .textarea-wrapper .terminal-input:disabled{opacity:.5;cursor:not-allowed}.input-line .textarea-wrapper .terminal-input:-webkit-autofill{-webkit-text-fill-color:#e0e0e0;-webkit-box-shadow:0 0 0 1000px rgba(0,0,0,.9) inset}.input-line .textarea-wrapper .terminal-input::placeholder{color:#ffffff4d;opacity:1}.input-line .textarea-wrapper .block-cursor{position:absolute;width:10px;height:20px;background:#e0e0e0;opacity:0;pointer-events:none}.input-line .textarea-wrapper .block-cursor.visible{animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:.8}51%,to{opacity:0}}:host:has(.terminal-window){height:100vh;height:100dvh;overflow-y:auto}@container agent-container (max-width: 600px){:host{padding:0;padding-top:env(safe-area-inset-top)}.terminal-window{height:100%;max-height:100vh;max-height:100dvh;max-width:100%;border-radius:0;border:none;box-shadow:none}.terminal-header{height:56px;padding:0}.terminal-header .terminal-title{font-size:12px}.terminal-header .terminal-status{font-size:11px}.terminal-header .close-button{margin-right:.25rem}}@container agent-container (min-width: 601px) and (max-width: 900px){.terminal-window{max-width:100%;height:100%;border-radius:0}}@container agent-container (max-width: 400px){.terminal-header{height:56px;padding:0}.terminal-header .close-button{margin-right:.2rem}.input-area{padding:12px 16px}.textarea-wrapper .arrow-prefix{font-size:13px;padding:10px 0 10px 12px}.textarea-wrapper .terminal-input{font-size:12px;padding:10px 12px 10px 6px;height:40px;min-height:40px;line-height:20px}}.ascii-art{font-family:Consolas,Monaco,Liberation Mono,Menlo,Courier New,monospace!important;font-size:10px!important;line-height:1.1!important;letter-spacing:0!important;font-weight:400!important;margin:1em 0!important;padding:1em!important;white-space:pre!important;overflow-x:auto!important;overflow-y:hidden!important;display:block!important;width:fit-content!important;background:#ffffff08;border:1px solid var(--border-SCOPED-IN-entrance-0hAu);border-radius:4px;color:var(--accent-SCOPED-IN-entrance-0hAu)!important;opacity:.9;text-shadow:0 0 10px var(--accent-SCOPED-IN-entrance-0hAu),0 0 20px var(--accent-SCOPED-IN-entrance-0hAu);-webkit-font-smoothing:none!important;-moz-osx-font-smoothing:unset!important;font-variant-ligatures:none!important;text-rendering:optimizeLegibility!important}\n"] }]
+        }], propDecorators: { endActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "endActions", required: false }] }], hideInputArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideInputArea", required: false }] }], xtermComponent: [{ type: i0.ViewChild, args: ['xtermComponent', { isSignal: true }] }], inputField: [{ type: i0.ViewChild, args: ['inputField', { isSignal: true }] }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });