@xxmachina/components 19.21.8 → 19.24.1

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

@@ -1,24 +1,24 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ChangeDetectorRef, computed, input, viewChild, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgAtomicComponent, provideComponent } from '@ng-atomic/core';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { AutoLayoutFrame } from '@ng-atomic/components/frames/auto-layout';
 import { CardFrame } from '@ng-atomic/components/frames/card';
+import { ScrollFrame } from '@ng-atomic/components/frames/scroll';
 import { ActionButtonsSectionOrganism } from '@ng-atomic/components/organisms/action-buttons-section';
 import { HeadingOrganism } from '@ng-atomic/components/organisms/heading';
 import { NgAtomicFormSectionBuilder } from '@ng-atomic/components/templates/form';
 import * as i1 from '@ng-atomic/components/templates/entrance';
 import { EntranceTemplateStore } from '@ng-atomic/components/templates/entrance';
 import { AppService } from '@ng-atomic/common/services/app';
-import * as i3 from '@angular/material/button';
+import { injectAuthState } from '@ng-atomic/common/services/auth';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { XtermOrganism } from '@xxmachina/components/organisms/xterm';
+import { svgToSixel, XtermOrganism } from '@xxmachina/components/organisms/xterm';
+import { NavigatorOrganismStore } from '@ng-atomic/components/organisms/navigator';
 import chalk from 'chalk';
 
 /**
@@ -82,6 +82,15 @@ class AgentTemplate extends NgAtomicComponent {
     store = inject(EntranceTemplateStore);
     cdr = inject(ChangeDetectorRef);
     app = inject(AppService);
+    // 認証状態のチェック（非ログイン時は閉じるボタンを非表示）
+    authState = injectAuthState();
+    isLoggedIn = computed(() => !!this.authState());
+    endActions = input([]);
+    navStartActions = computed(() => {
+        if (!this.isLoggedIn())
+            return [];
+        return [{ id: 'close-side-app', icon: 'close', name: '閉じる' }];
+    });
     xtermComponent = viewChild('xtermComponent');
     inputField = viewChild('inputField');
     statusText = 'Ready';
@@ -106,14 +115,22 @@ class AgentTemplate extends NgAtomicComponent {
             }
         }, 100);
     }
+    onWindowResize() {
+        // ウィンドウリサイズ時にターミナルをフィット
+        this.xtermComponent()?.fit();
+    }
     onTerminalReady(terminal) {
         this.terminal = terminal;
+        // 初期化時にターミナルをコンテナサイズにフィット
+        setTimeout(() => {
+            this.xtermComponent()?.fit();
+        }, 50);
         // 初期メッセージの表示
         this.showWelcomeMessage();
         // 初回ロード時は最上部にスクロール（アスキーアートから見えるように）
         setTimeout(() => {
             this.terminal.scrollToTop();
-        }, 50);
+        }, 100);
         // 入力フィールドにフォーカスと高さ調整
         const textarea = this.inputField()?.nativeElement;
         if (textarea) {
@@ -125,16 +142,26 @@ class AgentTemplate extends NgAtomicComponent {
         const url = `https://github.com/nontangent/x_x_machina/issues/${issueNumber}`;
         window.open(url, '_blank');
     }
-    showWelcomeMessage() {
-        // アスキーアート（lain風の色で）
+    async showWelcomeMessage() {
         this.terminal.writeln('');
-        this.terminal.writeln('');
-        this.terminal.writeln(`${chalk.cyan('███╗   ███╗ █████╗  ██████╗██╗  ██╗██╗███╗   ██╗ █████╗ ')}`);
-        this.terminal.writeln(`${chalk.cyan('████╗ ████║██╔══██╗██╔════╝██║  ██║██║████╗  ██║██╔══██╗')}`);
-        this.terminal.writeln(`${chalk.cyan('██╔████╔██║███████║██║     ███████║██║██╔██╗ ██║███████║')}`);
-        this.terminal.writeln(`${chalk.cyan('██║╚██╔╝██║██╔══██║██║     ██╔══██║██║██║╚██╗██║██╔══██║')}`);
-        this.terminal.writeln(`${chalk.cyan('██║ ╚═╝ ██║██║  ██║╚██████╗██║  ██║██║██║ ╚████║██║  ██║')}`);
-        this.terminal.writeln(`${chalk.cyan('╚═╝     ╚═╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝')}`);
+        // assetsからSVGを読み込んでSIXELフォーマットで表示
+        try {
+            const response = await fetch('/assets/machina-ascii-art.svg');
+            const svgString = await response.text();
+            const sixelData = await svgToSixel(svgString, { width: 400, height: 130 });
+            this.terminal.write(sixelData);
+            this.terminal.writeln('');
+        }
+        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('    ╚███╔╝      ╚███╔╝  ')}`);
+            this.terminal.writeln(`${chalk.cyan('    ██╔██╗      ██╔██╗  ')}`);
+            this.terminal.writeln(`${chalk.cyan('   ██╔╝ ██╗    ██╔╝ ██╗ ')}`);
+            this.terminal.writeln(`${chalk.cyan('   ╚═╝  ╚═╝    ╚═╝  ╚═╝ ')}`);
+        }
         this.terminal.writeln('');
         // ウェルカムメッセージを表示
         WELCOME_MESSAGE.split('\n').forEach(line => this.terminal.writeln(line));
@@ -308,10 +335,12 @@ class AgentTemplate extends NgAtomicComponent {
             this.cdr.markForCheck();
         }, 500);
     }
-    // sideAppを閉じる
-    closeSideApp(event) {
-        event.stopPropagation();
-        this.app.sideApp.collapse();
+    onNavAction(action) {
+        if (action.id === 'close-side-app') {
+            this.app.sideApp.collapse();
+            return;
+        }
+        this.dispatch(action);
     }
     // 入力フィールドにフォーカスを設定
     focusInput() {
@@ -382,62 +411,59 @@ class AgentTemplate extends NgAtomicComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: AgentTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", type: AgentTemplate, isStandalone: true, selector: "templates-agent", host: { 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: `
-  <div class="terminal-window">
-    <div class="terminal-header">
-      <button mat-icon-button class="close-button" (click)="closeSideApp($event)" matTooltip="閉じる">
-        <mat-icon>close</mat-icon>
-      </button>
-      <div class="terminal-title">Machina Agent</div>
-      <div class="terminal-status">{{ statusText }}</div>
-    </div>
-    
-    <div class="terminal-body">
-      <organisms-xterm
-        class="terminal-display"
-        (terminalReady)="onTerminalReady($event)"
-        (githubLinkClick)="onGitHubLinkClick($event)"
-        (click)="focusInput()"
-        #xtermComponent
-      ></organisms-xterm>
-      <div 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>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", 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: `
+  <frames-scroll class="terminal-window">
+    <organisms-navigator top injectable class="terminal-header"
+      [startActions]="navStartActions()"
+      [endActions]="endActions()"
+      (action)="onNavAction($event)"
+    >Machina Agent</organisms-navigator>
+
+    <organisms-xterm
+      class="terminal-display"
+      (terminalReady)="onTerminalReady($event)"
+      (githubLinkClick)="onGitHubLinkClick($event)"
+      (click)="focusInput()"
+      #xtermComponent
+    />
+
+    <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>
-  `, isInline: true, styles: [":host{--h-pad: 20px;--h-pad-SCOPED-IN-entrance-MsBK: var(--h-pad);--text: #e0e0e0;--text-SCOPED-IN-entrance-MsBK: var(--text);--user: #00ff00;--user-SCOPED-IN-entrance-MsBK: var(--user);--sys: #888;--sys-SCOPED-IN-entrance-MsBK: var(--sys);--accent: #ff79c6;--accent-SCOPED-IN-entrance-MsBK: var(--accent);--border: rgba(51, 51, 51, .5);--border-SCOPED-IN-entrance-MsBK: 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{width:100%;max-width:900px;height:600px;background:#0a0a0a;border:1px solid var(--border-SCOPED-IN-entrance-MsBK);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;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;padding:0 20px;background:#1a1a1a99;border-bottom:1px solid var(--border-SCOPED-IN-entrance-MsBK);transition:all .3s ease;position:relative}.terminal-header .close-button{color:var(--sys-SCOPED-IN-entrance-MsBK);margin-right:.5rem;opacity:.7}.terminal-header .close-button:hover{color:var(--text-SCOPED-IN-entrance-MsBK);opacity:1}.terminal-header .terminal-title{font-size:13px;color:var(--text-SCOPED-IN-entrance-MsBK);font-weight:500;flex:1}.terminal-header .terminal-status{font-size:12px;color:var(--sys-SCOPED-IN-entrance-MsBK);opacity:.7}.terminal-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;transition:all .3s ease}.terminal-body .terminal-display{flex:1;position:relative;background:#0a0a0a;overflow:hidden}.input-area{background:#000000e6;border-top:1px solid var(--border-SCOPED-IN-entrance-MsBK);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;caret-shape:block}.input-line .textarea-wrapper .terminal-input::selection{background:#ffffff4d}.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;overflow-y:auto}@container agent-container (max-width: 600px){:host{padding:0}.terminal-window{height:100%;max-height:100vh;max-width:100%;border-radius:0;border:none;box-shadow:none}.terminal-header{height:56px;padding:0 16px}.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 12px}.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-MsBK);border-radius:4px;color:var(--accent-SCOPED-IN-entrance-MsBK)!important;opacity:.9;text-shadow:0 0 10px var(--accent-SCOPED-IN-entrance-MsBK),0 0 20px var(--accent-SCOPED-IN-entrance-MsBK);-webkit-font-smoothing:none!important;-moz-osx-font-smoothing:unset!important;font-variant-ligatures:none!important;text-rendering:optimizeLegibility!important}@media (prefers-color-scheme: light){:host{--text: #333;--text-SCOPED-IN-entrance-MsBK: var(--text);--user: #0066cc;--user-SCOPED-IN-entrance-MsBK: var(--user);--sys: #666;--sys-SCOPED-IN-entrance-MsBK: var(--sys);--border: #ddd;--border-SCOPED-IN-entrance-MsBK: var(--border)}.terminal-window{background:#ffffffd9;box-shadow:0 10px 30px #00000014}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: XtermOrganism, selector: "organisms-xterm", outputs: ["terminalReady", "githubLinkClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+  </frames-scroll>
+  `, isInline: true, styles: [":host{--text: #e0e0e0;--text-SCOPED-IN-entrance-cVkf: var(--text);--user: #00ff00;--user-SCOPED-IN-entrance-cVkf: var(--user);--sys: #888;--sys-SCOPED-IN-entrance-cVkf: var(--sys);--accent: #ff79c6;--accent-SCOPED-IN-entrance-cVkf: var(--accent);--border: rgba(51, 51, 51, .5);--border-SCOPED-IN-entrance-cVkf: 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-cVkf);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 20px;background:#1a1a1a99;border-bottom:1px solid var(--border-SCOPED-IN-entrance-cVkf);transition:all .3s ease;position:relative}.terminal-header .close-button{color:var(--sys-SCOPED-IN-entrance-cVkf);margin-right:.5rem;opacity:.7}.terminal-header .close-button:hover{color:var(--text-SCOPED-IN-entrance-cVkf);opacity:1}.terminal-header .terminal-title{font-size:13px;color:var(--text-SCOPED-IN-entrance-cVkf);font-weight:500;flex:1}.terminal-header .terminal-status{font-size:12px;color:var(--sys-SCOPED-IN-entrance-cVkf);opacity:.7}.terminal-display{width:100%;height:100%;background:#0a0a0a}.input-area{background:#000000e6;border-top:1px solid var(--border-SCOPED-IN-entrance-cVkf);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;caret-shape:block}.input-line .textarea-wrapper .terminal-input::selection{background:#ffffff4d}.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 16px}.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 12px}.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-cVkf);border-radius:4px;color:var(--accent-SCOPED-IN-entrance-cVkf)!important;opacity:.9;text-shadow:0 0 10px var(--accent-SCOPED-IN-entrance-cVkf),0 0 20px var(--accent-SCOPED-IN-entrance-cVkf);-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: CommonModule }, { 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: "20.0.5", ngImport: i0, type: AgentTemplate, decorators: [{
             type: Component,
@@ -446,6 +472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                         FormsModule,
                         AutoLayoutFrame,
                         CardFrame,
+                        ScrollFrame,
                         ActionButtonsSectionOrganism,
                         HeadingOrganism,
                         NgAtomicFormSectionBuilder,
@@ -453,61 +480,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                         MatIconModule,
                         MatTooltipModule,
                         XtermOrganism,
+                        NavigatorOrganismStore,
                     ], template: `
-  <div class="terminal-window">
-    <div class="terminal-header">
-      <button mat-icon-button class="close-button" (click)="closeSideApp($event)" matTooltip="閉じる">
-        <mat-icon>close</mat-icon>
-      </button>
-      <div class="terminal-title">Machina Agent</div>
-      <div class="terminal-status">{{ statusText }}</div>
-    </div>
-    
-    <div class="terminal-body">
-      <organisms-xterm
-        class="terminal-display"
-        (terminalReady)="onTerminalReady($event)"
-        (githubLinkClick)="onGitHubLinkClick($event)"
-        (click)="focusInput()"
-        #xtermComponent
-      ></organisms-xterm>
-      <div 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>
+  <frames-scroll class="terminal-window">
+    <organisms-navigator top injectable class="terminal-header"
+      [startActions]="navStartActions()"
+      [endActions]="endActions()"
+      (action)="onNavAction($event)"
+    >Machina Agent</organisms-navigator>
+
+    <organisms-xterm
+      class="terminal-display"
+      (terminalReady)="onTerminalReady($event)"
+      (githubLinkClick)="onGitHubLinkClick($event)"
+      (click)="focusInput()"
+      #xtermComponent
+    />
+
+    <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'
                     }, changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [
@@ -520,8 +545,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                                 'fieldMap',
                             ],
                         },
-                    ], styles: [":host{--h-pad: 20px;--h-pad-SCOPED-IN-entrance-MsBK: var(--h-pad);--text: #e0e0e0;--text-SCOPED-IN-entrance-MsBK: var(--text);--user: #00ff00;--user-SCOPED-IN-entrance-MsBK: var(--user);--sys: #888;--sys-SCOPED-IN-entrance-MsBK: var(--sys);--accent: #ff79c6;--accent-SCOPED-IN-entrance-MsBK: var(--accent);--border: rgba(51, 51, 51, .5);--border-SCOPED-IN-entrance-MsBK: 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{width:100%;max-width:900px;height:600px;background:#0a0a0a;border:1px solid var(--border-SCOPED-IN-entrance-MsBK);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;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;padding:0 20px;background:#1a1a1a99;border-bottom:1px solid var(--border-SCOPED-IN-entrance-MsBK);transition:all .3s ease;position:relative}.terminal-header .close-button{color:var(--sys-SCOPED-IN-entrance-MsBK);margin-right:.5rem;opacity:.7}.terminal-header .close-button:hover{color:var(--text-SCOPED-IN-entrance-MsBK);opacity:1}.terminal-header .terminal-title{font-size:13px;color:var(--text-SCOPED-IN-entrance-MsBK);font-weight:500;flex:1}.terminal-header .terminal-status{font-size:12px;color:var(--sys-SCOPED-IN-entrance-MsBK);opacity:.7}.terminal-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;transition:all .3s ease}.terminal-body .terminal-display{flex:1;position:relative;background:#0a0a0a;overflow:hidden}.input-area{background:#000000e6;border-top:1px solid var(--border-SCOPED-IN-entrance-MsBK);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;caret-shape:block}.input-line .textarea-wrapper .terminal-input::selection{background:#ffffff4d}.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;overflow-y:auto}@container agent-container (max-width: 600px){:host{padding:0}.terminal-window{height:100%;max-height:100vh;max-width:100%;border-radius:0;border:none;box-shadow:none}.terminal-header{height:56px;padding:0 16px}.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 12px}.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-MsBK);border-radius:4px;color:var(--accent-SCOPED-IN-entrance-MsBK)!important;opacity:.9;text-shadow:0 0 10px var(--accent-SCOPED-IN-entrance-MsBK),0 0 20px var(--accent-SCOPED-IN-entrance-MsBK);-webkit-font-smoothing:none!important;-moz-osx-font-smoothing:unset!important;font-variant-ligatures:none!important;text-rendering:optimizeLegibility!important}@media (prefers-color-scheme: light){:host{--text: #333;--text-SCOPED-IN-entrance-MsBK: var(--text);--user: #0066cc;--user-SCOPED-IN-entrance-MsBK: var(--user);--sys: #666;--sys-SCOPED-IN-entrance-MsBK: var(--sys);--border: #ddd;--border-SCOPED-IN-entrance-MsBK: var(--border)}.terminal-window{background:#ffffffd9;box-shadow:0 10px 30px #00000014}}\n"] }]
-        }] });
+                    ], styles: [":host{--text: #e0e0e0;--text-SCOPED-IN-entrance-cVkf: var(--text);--user: #00ff00;--user-SCOPED-IN-entrance-cVkf: var(--user);--sys: #888;--sys-SCOPED-IN-entrance-cVkf: var(--sys);--accent: #ff79c6;--accent-SCOPED-IN-entrance-cVkf: var(--accent);--border: rgba(51, 51, 51, .5);--border-SCOPED-IN-entrance-cVkf: 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-cVkf);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 20px;background:#1a1a1a99;border-bottom:1px solid var(--border-SCOPED-IN-entrance-cVkf);transition:all .3s ease;position:relative}.terminal-header .close-button{color:var(--sys-SCOPED-IN-entrance-cVkf);margin-right:.5rem;opacity:.7}.terminal-header .close-button:hover{color:var(--text-SCOPED-IN-entrance-cVkf);opacity:1}.terminal-header .terminal-title{font-size:13px;color:var(--text-SCOPED-IN-entrance-cVkf);font-weight:500;flex:1}.terminal-header .terminal-status{font-size:12px;color:var(--sys-SCOPED-IN-entrance-cVkf);opacity:.7}.terminal-display{width:100%;height:100%;background:#0a0a0a}.input-area{background:#000000e6;border-top:1px solid var(--border-SCOPED-IN-entrance-cVkf);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;caret-shape:block}.input-line .textarea-wrapper .terminal-input::selection{background:#ffffff4d}.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 16px}.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 12px}.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-cVkf);border-radius:4px;color:var(--accent-SCOPED-IN-entrance-cVkf)!important;opacity:.9;text-shadow:0 0 10px var(--accent-SCOPED-IN-entrance-cVkf),0 0 20px var(--accent-SCOPED-IN-entrance-cVkf);-webkit-font-smoothing:none!important;-moz-osx-font-smoothing:unset!important;font-variant-ligatures:none!important;text-rendering:optimizeLegibility!important}\n"] }]
+        }], propDecorators: { onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
 function provideAgentTemplate() {
     return [
         provideComponent(EntranceTemplateStore, () => AgentTemplate),