@xxmachina/components 19.0.0-preview.9 → 19.1.0

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

@@ -0,0 +1,549 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, viewChild, 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 { 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 { 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 chalk from 'chalk';
+
+var ActionId;
+(function (ActionId) {
+    ActionId["SIGN_IN"] = "[@ng-atomic/components] Sign In";
+    ActionId["SIGN_IN_WITH_GOOGLE"] = "[@ng-atomic/components] Sign In With Google";
+    ActionId["SIGN_IN_WITH_TWITTER"] = "[@ng-atomic/components] Sign In With Twitter";
+    ActionId["SIGN_OUT"] = "[@ng-atomic/components] Sign Out";
+})(ActionId || (ActionId = {}));
+class AgentTemplate extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.ActionId = ActionId;
+        this.store = inject(EntranceTemplateStore);
+        this.cdr = inject(ChangeDetectorRef);
+        this.app = inject(AppService);
+        this.xtermComponent = viewChild('xtermComponent');
+        this.inputField = viewChild('inputField');
+        this.statusText = 'Ready';
+        this.isProcessing = false;
+        this.showCursor = false;
+        this.cursorLeft = 60;
+        this.cursorTop = 12;
+        this.commandHistory = [];
+        this.historyIndex = -1;
+        // 入力管理
+        this.currentInput = 'x_x ';
+    }
+    static { this.ActionId = ActionId; }
+    ngAfterViewInit() {
+        // 入力フィールドにフォーカス
+        setTimeout(() => {
+            const textarea = this.inputField()?.nativeElement;
+            if (textarea) {
+                textarea.focus();
+                // 初期高さを適切に設定
+                this.adjustTextareaHeight();
+            }
+        }, 100);
+    }
+    onTerminalReady(terminal) {
+        this.terminal = terminal;
+        // 初期メッセージの表示
+        this.showWelcomeMessage();
+        // 初回ロード時は最上部にスクロール（アスキーアートから見えるように）
+        setTimeout(() => {
+            this.terminal.scrollToTop();
+        }, 50);
+        // 入力フィールドにフォーカスと高さ調整
+        const textarea = this.inputField()?.nativeElement;
+        if (textarea) {
+            textarea.focus();
+            this.adjustTextareaHeight();
+        }
+    }
+    showWelcomeMessage() {
+        // アスキーアート（lain風の色で）
+        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('╚═╝     ╚═╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝')}`);
+        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('');
+        this.terminal.writeln(`${chalk.cyan('● Welcome to \x1b[1;93m合同会社マキナエージェント\x1b[0m')}`);
+        this.terminal.writeln('');
+        this.terminal.writeln(`${chalk.cyan('● 会社概要\x1b[0m')}`);
+        this.terminal.writeln('  合同会社マキナエージェントは、AI技術を活用した');
+        this.terminal.writeln('  革新的なソリューションを提供する企業です。');
+        this.terminal.writeln('');
+        this.terminal.writeln(`${chalk.cyan('● 事業内容\x1b[0m')}`);
+        this.terminal.writeln('  - システム開発のコンサルティング事業');
+        this.terminal.writeln('  - AIアジャイル開発の導入支援事業');
+        this.terminal.writeln('  - 自己改変型AIエージェント(オートポイエーシス)の開発事業');
+        this.terminal.writeln('');
+        this.terminal.writeln(`${chalk.cyan('● ビジョン\x1b[0m')}`);
+        this.terminal.writeln('  人とAIが協働する未来を創造し、');
+        this.terminal.writeln('  あらゆるビジネスの可能性を拡げます。');
+        this.terminal.writeln('');
+        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側の入力フィールドで表示するため不要
+    }
+    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(() => {
+                this.dispatch({ id: ActionId.SIGN_IN_WITH_GOOGLE });
+                this.completeProcessing();
+            }, 300);
+        }
+        else if (command.startsWith('auth')) {
+            if (command.includes('google')) {
+                this.terminal.writeln('\x1b[1;32m● Initiating Google authentication...\x1b[0m');
+                setTimeout(() => {
+                    this.dispatch({ id: ActionId.SIGN_IN_WITH_GOOGLE });
+                    this.completeProcessing();
+                }, 300);
+            }
+            else if (command.includes('twitter')) {
+                this.terminal.writeln('\x1b[1;32m● Initiating Twitter authentication...\x1b[0m');
+                setTimeout(() => {
+                    this.dispatch({ id: ActionId.SIGN_IN_WITH_TWITTER });
+                    this.completeProcessing();
+                }, 300);
+            }
+            else if (command.includes('local')) {
+                this.terminal.writeln('\x1b[1;32m● Initiating local authentication...\x1b[0m');
+                setTimeout(() => {
+                    this.dispatch({ id: ActionId.SIGN_IN });
+                    this.completeProcessing();
+                }, 300);
+            }
+            else {
+                this.terminal.writeln('\x1b[1;32m● Available authentication methods:\x1b[0m');
+                this.terminal.writeln('  - auth --provider=google');
+                this.terminal.writeln('  - auth --provider=twitter');
+                this.terminal.writeln('  - auth --provider=local');
+                this.completeProcessing();
+            }
+        }
+        // ログアウトコマンド
+        else if (command === 'logout' || command === 'signout') {
+            this.terminal.writeln('\x1b[1;32m● Signing out...\x1b[0m');
+            setTimeout(() => {
+                this.dispatch({ id: ActionId.SIGN_OUT });
+                setTimeout(() => {
+                    this.terminal.writeln('\x1b[1;32m● You have been signed out.\x1b[0m');
+                    this.terminal.writeln('\x1b[1;33m● Type "login" to sign in again.\x1b[0m');
+                    this.completeProcessing();
+                }, 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)');
+            this.terminal.writeln('  \x1b[36mauth\x1b[0m --provider=\x1b[33mgoogle\x1b[0m   - Sign in with Google');
+            this.terminal.writeln('  \x1b[36mauth\x1b[0m --provider=\x1b[33mtwitter\x1b[0m  - Sign in with Twitter');
+            this.terminal.writeln('  \x1b[36mauth\x1b[0m --provider=\x1b[33mlocal\x1b[0m    - Sign in with email/password');
+            this.terminal.writeln('  \x1b[36mlogout\x1b[0m / \x1b[36msignout\x1b[0m - Sign out from the application');
+            this.terminal.writeln('  \x1b[36mabout\x1b[0m            - Show company information');
+            this.terminal.writeln('  \x1b[36mclear\x1b[0m            - Clear terminal');
+            this.terminal.writeln('  \x1b[36mhelp\x1b[0m / \x1b[36m?\x1b[0m        - Show this help');
+            this.terminal.writeln('');
+            this.terminal.writeln('\x1b[1;33m● Keyboard shortcuts:\x1b[0m');
+            this.terminal.writeln('  \x1b[36m⌘K\x1b[0m / \x1b[36mCtrl+K\x1b[0m    - Generate command suggestions');
+            this.terminal.writeln('  \x1b[36m↑\x1b[0m / \x1b[36m↓\x1b[0m           - Navigate command history');
+            this.completeProcessing();
+        }
+        // 会社情報コマンド
+        else if (command === 'about') {
+            this.terminal.writeln('\x1b[1;36m● 合同会社マキナエージェント\x1b[0m');
+            this.terminal.writeln('');
+            this.terminal.writeln('\x1b[1;32m● 会社概要\x1b[0m');
+            this.terminal.writeln('  合同会社マキナエージェントは、AI技術を活用した');
+            this.terminal.writeln('  革新的なソリューションを提供する企業です。');
+            this.terminal.writeln('');
+            this.terminal.writeln('\x1b[1;32m● 事業内容\x1b[0m');
+            this.terminal.writeln('  - システム開発のコンサルティング事業');
+            this.terminal.writeln('  - AIアジャイル開発の導入支援事業');
+            this.terminal.writeln('  - 自己改変型AIエージェント(オートポイエーシス)の開発事業');
+            this.terminal.writeln('');
+            this.terminal.writeln('\x1b[1;32m● ビジョン\x1b[0m');
+            this.terminal.writeln('  人とAIが協働する未来を創造し、');
+            this.terminal.writeln('  あらゆるビジネスの可能性を拡げます。');
+            this.terminal.writeln('');
+            this.terminal.writeln('\x1b[1;32m● お問い合わせ\x1b[0m');
+            this.terminal.writeln('  詳細については、ログイン後にお問い合わせください。');
+            this.completeProcessing();
+        }
+        // クリアコマンド
+        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.');
+            this.completeProcessing();
+        }
+    }
+    completeProcessing() {
+        this.isProcessing = false;
+        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; // デフォルト動作（改行）を許可
+        }
+        event.preventDefault();
+        const prefix = 'x_x ';
+        const actualCommand = this.currentInput.startsWith(prefix)
+            ? this.currentInput.slice(prefix.length).trim()
+            : this.currentInput.trim();
+        if (actualCommand) {
+            // コマンドをターミナルに表示（改行を含む場合は適切に処理）
+            const displayCommand = actualCommand.split('\n').map(line => '\x1b[32m> x_x \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 = prefix;
+            // textareaの高さをリセット
+            const textarea = this.inputField()?.nativeElement;
+            if (textarea) {
+                textarea.style.height = 'auto';
+            }
+        }
+    }
+    navigateHistory(event, direction) {
+        event.preventDefault();
+        const prefix = 'x_x ';
+        if (direction === -1 && this.historyIndex > 0) {
+            // 上矢印
+            this.historyIndex--;
+            this.currentInput = prefix + this.commandHistory[this.historyIndex];
+        }
+        else if (direction === 1) {
+            // 下矢印
+            if (this.historyIndex < this.commandHistory.length - 1) {
+                this.historyIndex++;
+                this.currentInput = prefix + this.commandHistory[this.historyIndex];
+            }
+            else {
+                this.historyIndex = this.commandHistory.length;
+                this.currentInput = prefix;
+            }
+        }
+    }
+    generateCommand(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        this.terminal.writeln('');
+        this.terminal.writeln('\x1b[1;32m● Generating command suggestions...\x1b[0m');
+        setTimeout(() => {
+            this.terminal.writeln('\x1b[1;33m● Suggested commands:\x1b[0m');
+            this.terminal.writeln('  1. \x1b[36mauth --provider=google\x1b[0m');
+            this.terminal.writeln('  2. \x1b[36mlogin\x1b[0m');
+            this.terminal.writeln('  3. \x1b[36mhelp\x1b[0m');
+            this.terminal.writeln('');
+            this.cdr.markForCheck();
+        }, 500);
+    }
+    // sideAppを閉じる
+    closeSideApp(event) {
+        event.stopPropagation();
+        this.app.sideApp.collapse();
+    }
+    // 入力フィールドにフォーカスを設定
+    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
+            textarea.style.height = Math.max(minHeight, scrollHeight) + 'px';
+        }
+    }
+    // プレフィックスの削除を防止
+    preventPrefixDeletion(event) {
+        const textarea = event.target;
+        const prefix = 'x_x ';
+        const selectionStart = textarea.selectionStart;
+        // バックスペースまたはDeleteキーの処理
+        if (event.key === 'Backspace' || event.key === 'Delete') {
+            if (selectionStart <= prefix.length) {
+                event.preventDefault();
+            }
+        }
+        // 左矢印キーでカーソルがプレフィックスより前に行かないように
+        if (event.key === 'ArrowLeft' && selectionStart <= prefix.length) {
+            event.preventDefault();
+        }
+        // Home キーでカーソルをプレフィックスの直後に移動
+        if (event.key === 'Home') {
+            event.preventDefault();
+            textarea.setSelectionRange(prefix.length, prefix.length);
+        }
+    }
+    // 入力時の処理
+    handleInput(event) {
+        const textarea = event.target;
+        const prefix = 'x_x ';
+        // プレフィックスが削除されていたら復元
+        if (!this.currentInput.startsWith(prefix)) {
+            this.currentInput = prefix + this.currentInput.replace(/^x_x\s*/, '');
+            // カーソル位置を調整
+            setTimeout(() => {
+                const newPosition = Math.max(prefix.length, textarea.selectionStart);
+                textarea.setSelectionRange(newPosition, newPosition);
+            });
+        }
+        // 高さ調整（改行が含まれている場合のみ）
+        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 の左パディング
+            // 垂直位置を調整（行数に基づいて、スクロール位置も考慮）
+            const scrollTop = textarea.scrollTop;
+            this.cursorTop = 12 + (currentLineIndex * 20) - scrollTop; // スクロール分を引く
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: AgentTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵ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)"
+        (click)="focusInput()"
+        #xtermComponent
+      ></organisms-xterm>
+      <div class="input-area">
+        <div class="input-line">
+          <span class="input-prefix">> x_x</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="x_x about"
+                rows="1"
+              ></textarea>
+              <div class="block-cursor" 
+                [class.visible]="showCursor"
+                [style.left.px]="cursorLeft"
+                [style.top.px]="cursorTop"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `, isInline: true, styles: [":host{--h-pad: 20px;--h-pad-SCOPED-IN-entrance-zJof: var(--h-pad);--text: #e0e0e0;--text-SCOPED-IN-entrance-zJof: var(--text);--user: #00ff00;--user-SCOPED-IN-entrance-zJof: var(--user);--sys: #888;--sys-SCOPED-IN-entrance-zJof: var(--sys);--accent: #ff79c6;--accent-SCOPED-IN-entrance-zJof: var(--accent);--border: rgba(51, 51, 51, .5);--border-SCOPED-IN-entrance-zJof: 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-zJof);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-zJof);transition:all .3s ease;position:relative}.terminal-header .close-button{color:var(--sys-SCOPED-IN-entrance-zJof);margin-right:.5rem;opacity:.7}.terminal-header .close-button:hover{color:var(--text-SCOPED-IN-entrance-zJof);opacity:1}.terminal-header .terminal-title{font-size:13px;color:var(--text-SCOPED-IN-entrance-zJof);font-weight:500;flex:1}.terminal-header .terminal-status{font-size:12px;color:var(--sys-SCOPED-IN-entrance-zJof);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-zJof);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;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-zJof);border-radius:4px;color:var(--accent-SCOPED-IN-entrance-zJof)!important;opacity:.9;text-shadow:0 0 10px var(--accent-SCOPED-IN-entrance-zJof),0 0 20px var(--accent-SCOPED-IN-entrance-zJof);-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-zJof: var(--text);--user: #0066cc;--user-SCOPED-IN-entrance-zJof: var(--user);--sys: #666;--sys-SCOPED-IN-entrance-zJof: var(--sys);--border: #ddd;--border-SCOPED-IN-entrance-zJof: 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"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: AgentTemplate, decorators: [{
+            type: Component,
+            args: [{ selector: 'templates-agent', imports: [
+                        CommonModule,
+                        FormsModule,
+                        AutoLayoutFrame,
+                        CardFrame,
+                        ActionButtonsSectionOrganism,
+                        HeadingOrganism,
+                        NgAtomicFormSectionBuilder,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        XtermOrganism,
+                    ], 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)"
+        (click)="focusInput()"
+        #xtermComponent
+      ></organisms-xterm>
+      <div class="input-area">
+        <div class="input-line">
+          <span class="input-prefix">> x_x</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="x_x about"
+                rows="1"
+              ></textarea>
+              <div class="block-cursor" 
+                [class.visible]="showCursor"
+                [style.left.px]="cursorLeft"
+                [style.top.px]="cursorTop"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `, host: {
+                        class: 'template'
+                    }, changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [
+                        {
+                            directive: EntranceTemplateStore,
+                            inputs: [
+                                'form',
+                                'actions',
+                                'title',
+                                'fieldMap',
+                            ],
+                        },
+                    ], styles: [":host{--h-pad: 20px;--h-pad-SCOPED-IN-entrance-zJof: var(--h-pad);--text: #e0e0e0;--text-SCOPED-IN-entrance-zJof: var(--text);--user: #00ff00;--user-SCOPED-IN-entrance-zJof: var(--user);--sys: #888;--sys-SCOPED-IN-entrance-zJof: var(--sys);--accent: #ff79c6;--accent-SCOPED-IN-entrance-zJof: var(--accent);--border: rgba(51, 51, 51, .5);--border-SCOPED-IN-entrance-zJof: 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-zJof);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-zJof);transition:all .3s ease;position:relative}.terminal-header .close-button{color:var(--sys-SCOPED-IN-entrance-zJof);margin-right:.5rem;opacity:.7}.terminal-header .close-button:hover{color:var(--text-SCOPED-IN-entrance-zJof);opacity:1}.terminal-header .terminal-title{font-size:13px;color:var(--text-SCOPED-IN-entrance-zJof);font-weight:500;flex:1}.terminal-header .terminal-status{font-size:12px;color:var(--sys-SCOPED-IN-entrance-zJof);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-zJof);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;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-zJof);border-radius:4px;color:var(--accent-SCOPED-IN-entrance-zJof)!important;opacity:.9;text-shadow:0 0 10px var(--accent-SCOPED-IN-entrance-zJof),0 0 20px var(--accent-SCOPED-IN-entrance-zJof);-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-zJof: var(--text);--user: #0066cc;--user-SCOPED-IN-entrance-zJof: var(--user);--sys: #666;--sys-SCOPED-IN-entrance-zJof: var(--sys);--border: #ddd;--border-SCOPED-IN-entrance-zJof: var(--border)}.terminal-window{background:#ffffffd9;box-shadow:0 10px 30px #00000014}}\n"] }]
+        }] });
+function provideAgentTemplate() {
+    return [
+        provideComponent(EntranceTemplateStore, () => AgentTemplate),
+    ];
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AgentTemplate, provideAgentTemplate };
+//# sourceMappingURL=xxmachina-components-templates-agent.mjs.map