RomanNum3ral
/
cai
mirror of https://github.com/aliasrobotics/cai.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
cai/tui/user_interface/index.html

3758 lines
74 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="prev" href="../getting_started/">
<link rel="next" href="../terminals_management/">
<link rel="icon" href="../../assets/imago.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.11">
<title>User Interface - CAI</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.4af4bdda.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../assets/_mkdocstrings.css">
<link rel="stylesheet" href="../../stylesheets/extra.css">
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="custom" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#cai-tui-user-interface" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="CAI" class="md-header__button md-logo" aria-label="CAI" data-md-component="logo">
<img src="../../assets/imago.png" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
CAI
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
User Interface
</span>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/aliasrobotics/cai" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
aliasrobotics/cai
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="CAI" class="md-nav__button md-logo" aria-label="CAI" data-md-component="logo">
<img src="../../assets/imago.png" alt="logo">
</a>
CAI
</label>
<div class="md-nav__source">
<a href="https://github.com/aliasrobotics/cai" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
aliasrobotics/cai
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_1" >
<label class="md-nav__link" for="__nav_1" id="__nav_1_label" tabindex="">
<span class="md-ellipsis">
Getting Started
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_1">
<span class="md-nav__icon md-icon"></span>
Getting Started
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
<span class="md-ellipsis">
Welcome
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../cai_installation/" class="md-nav__link">
<span class="md-ellipsis">
Installation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../cai_quickstart/" class="md-nav__link">
<span class="md-ellipsis">
Quickstart
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../cai_list_of_models/" class="md-nav__link">
<span class="md-ellipsis">
Available Models
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_1_5" >
<label class="md-nav__link" for="__nav_1_5" id="__nav_1_5_label" tabindex="0">
<span class="md-ellipsis">
Model Providers
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_1_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_1_5">
<span class="md-nav__icon md-icon"></span>
Model Providers
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../providers/openrouter.md" class="md-nav__link">
<span class="md-ellipsis">
OpenRouter
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../providers/ollama/" class="md-nav__link">
<span class="md-ellipsis">
Ollama
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../providers/azure.md" class="md-nav__link">
<span class="md-ellipsis">
Azure OpenAI
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../cai_pro/" class="md-nav__link">
<span class="md-ellipsis">
🚀 CAI PRO
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="">
<span class="md-ellipsis">
Core Concepts
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Core Concepts
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../cai_architecture/" class="md-nav__link">
<span class="md-ellipsis">
Architecture
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/" class="md-nav__link">
<span class="md-ellipsis">
Agents
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tools/" class="md-nav__link">
<span class="md-ellipsis">
Tools
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../handoffs/" class="md-nav__link">
<span class="md-ellipsis">
Handoffs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../multi_agent/" class="md-nav__link">
<span class="md-ellipsis">
Multi-Agent Systems
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="">
<span class="md-ellipsis">
Benchmarking
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Benchmarking
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../benchmarking/overview/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../benchmarking/running_benchmarks/" class="md-nav__link">
<span class="md-ellipsis">
Running Benchmarks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../benchmarking/attack_defense/" class="md-nav__link">
<span class="md-ellipsis">
Attack & Defense CTFs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../benchmarking/jeopardy_ctfs/" class="md-nav__link">
<span class="md-ellipsis">
Jeopardy CTFs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../benchmarking/cyber_ranges/" class="md-nav__link">
<span class="md-ellipsis">
Cyber Ranges
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../benchmarking/knowledge_benchmarks/" class="md-nav__link">
<span class="md-ellipsis">
Knowledge Benchmarks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../benchmarking/privacy_benchmarks/" class="md-nav__link">
<span class="md-ellipsis">
Privacy Benchmarks
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="">
<span class="md-ellipsis">
Guides
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Guides
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../running_agents/" class="md-nav__link">
<span class="md-ellipsis">
Running Agents
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../continue_mode/" class="md-nav__link">
<span class="md-ellipsis">
Continue Mode
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../results/" class="md-nav__link">
<span class="md-ellipsis">
Working with Results
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../streaming/" class="md-nav__link">
<span class="md-ellipsis">
Streaming
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tracing/" class="md-nav__link">
<span class="md-ellipsis">
Tracing & Debugging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../context/" class="md-nav__link">
<span class="md-ellipsis">
Context Management
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../guardrails/" class="md-nav__link">
<span class="md-ellipsis">
Guardrails & Security
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../environment_variables/" class="md-nav__link">
<span class="md-ellipsis">
Environment Variables
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../cai/getting-started/packet_capture_wsl/" class="md-nav__link">
<span class="md-ellipsis">
Packet Capture on WSL2
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="">
<span class="md-ellipsis">
Troubleshooting
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Troubleshooting
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../cai/troubleshooting/operator_feedback_reproduction/" class="md-nav__link">
<span class="md-ellipsis">
Operator Feedback Reproduction
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../cai/troubleshooting/platform_limitations/" class="md-nav__link">
<span class="md-ellipsis">
Platform Limitations
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_7" >
<label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="">
<span class="md-ellipsis">
Case Studies
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_7">
<span class="md-nav__icon md-icon"></span>
Case Studies
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../cai/case-studies/operator-artifact-evidence/" class="md-nav__link">
<span class="md-ellipsis">
Operator Artifact Evidence
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_8" >
<label class="md-nav__link" for="__nav_8" id="__nav_8_label" tabindex="">
<span class="md-ellipsis">
Mobile UI (iOS)
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_8">
<span class="md-nav__icon md-icon"></span>
Mobile UI (iOS)
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../mui/mui_index/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../mui/getting_started/" class="md-nav__link">
<span class="md-ellipsis">
Getting Started
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../mui/user_interface/" class="md-nav__link">
<span class="md-ellipsis">
User Interface
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../mui/gestures_shortcuts/" class="md-nav__link">
<span class="md-ellipsis">
Gestures & Shortcuts
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../mui/chat_features/" class="md-nav__link">
<span class="md-ellipsis">
Chat Features
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_9" checked>
<label class="md-nav__link" for="__nav_9" id="__nav_9_label" tabindex="">
<span class="md-ellipsis">
Terminal UI (TUI) - Deprecated
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_9_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_9">
<span class="md-nav__icon md-icon"></span>
Terminal UI (TUI) - Deprecated
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../tui_index/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../getting_started/" class="md-nav__link">
<span class="md-ellipsis">
Getting Started
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
User Interface
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
User Interface
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#interface-overview" class="md-nav__link">
<span class="md-ellipsis">
Interface Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#top-bar" class="md-nav__link">
<span class="md-ellipsis">
Top Bar
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#sidebar" class="md-nav__link">
<span class="md-ellipsis">
Sidebar
</span>
</a>
<nav class="md-nav" aria-label="Sidebar">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-teams-tab" class="md-nav__link">
<span class="md-ellipsis">
1. Teams Tab
</span>
</a>
<nav class="md-nav" aria-label="1. Teams Tab">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#available-preconfigured-teams" class="md-nav__link">
<span class="md-ellipsis">
Available Preconfigured Teams
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-teams" class="md-nav__link">
<span class="md-ellipsis">
Using Teams
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#2-queue-tab" class="md-nav__link">
<span class="md-ellipsis">
2. Queue Tab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#3-stats-tab" class="md-nav__link">
<span class="md-ellipsis">
3. Stats Tab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#4-keys-tab" class="md-nav__link">
<span class="md-ellipsis">
4. Keys Tab
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#terminal-components" class="md-nav__link">
<span class="md-ellipsis">
Terminal Components
</span>
</a>
<nav class="md-nav" aria-label="Terminal Components">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#terminal-header" class="md-nav__link">
<span class="md-ellipsis">
Terminal Header
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#terminal-output-area" class="md-nav__link">
<span class="md-ellipsis">
Terminal Output Area
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#terminal-states" class="md-nav__link">
<span class="md-ellipsis">
Terminal States
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#terminal-layouts" class="md-nav__link">
<span class="md-ellipsis">
Terminal Layouts
</span>
</a>
<nav class="md-nav" aria-label="Terminal Layouts">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#single-terminal-layout" class="md-nav__link">
<span class="md-ellipsis">
Single Terminal Layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#split-two-terminal-layout" class="md-nav__link">
<span class="md-ellipsis">
Split (Two Terminal) Layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#triple-terminal-layout" class="md-nav__link">
<span class="md-ellipsis">
Triple Terminal Layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#scrollable-layout" class="md-nav__link">
<span class="md-ellipsis">
Scrollable Layout
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#status-bar" class="md-nav__link">
<span class="md-ellipsis">
Status Bar
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#input-area" class="md-nav__link">
<span class="md-ellipsis">
Input Area
</span>
</a>
<nav class="md-nav" aria-label="Input Area">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#prompt-input" class="md-nav__link">
<span class="md-ellipsis">
Prompt Input
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#autocompletion" class="md-nav__link">
<span class="md-ellipsis">
Autocompletion
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#responsive-design" class="md-nav__link">
<span class="md-ellipsis">
Responsive Design
</span>
</a>
<nav class="md-nav" aria-label="Responsive Design">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#minimum-requirements" class="md-nav__link">
<span class="md-ellipsis">
Minimum Requirements
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#adaptive-behaviors" class="md-nav__link">
<span class="md-ellipsis">
Adaptive Behaviors
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#dynamic-adjustments" class="md-nav__link">
<span class="md-ellipsis">
Dynamic Adjustments
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#command-palette" class="md-nav__link">
<span class="md-ellipsis">
Command Palette
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../terminals_management/" class="md-nav__link">
<span class="md-ellipsis">
Terminals Management
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../teams_and_parallel_execution/" class="md-nav__link">
<span class="md-ellipsis">
Teams & Parallel Execution
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../sidebar_features/" class="md-nav__link">
<span class="md-ellipsis">
Sidebar Features
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../keyboard_shortcuts/" class="md-nav__link">
<span class="md-ellipsis">
Keyboard Shortcuts
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../commands_reference/" class="md-nav__link">
<span class="md-ellipsis">
Commands Reference
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../advanced_features/" class="md-nav__link">
<span class="md-ellipsis">
Advanced Features
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../troubleshooting/" class="md-nav__link">
<span class="md-ellipsis">
Troubleshooting
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_10" >
<label class="md-nav__link" for="__nav_10" id="__nav_10_label" tabindex="">
<span class="md-ellipsis">
API Reference
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_10">
<span class="md-nav__icon md-icon"></span>
API Reference
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_10_1" >
<label class="md-nav__link" for="__nav_10_1" id="__nav_10_1_label" tabindex="0">
<span class="md-ellipsis">
Agents
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_10_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_10_1">
<span class="md-nav__icon md-icon"></span>
Agents
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../ref/agent/" class="md-nav__link">
<span class="md-ellipsis">
Agent
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/run/" class="md-nav__link">
<span class="md-ellipsis">
Runner
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/tool/" class="md-nav__link">
<span class="md-ellipsis">
Tool
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/result/" class="md-nav__link">
<span class="md-ellipsis">
Result
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/stream_events/" class="md-nav__link">
<span class="md-ellipsis">
Stream Events
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/handoffs/" class="md-nav__link">
<span class="md-ellipsis">
Handoffs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/lifecycle/" class="md-nav__link">
<span class="md-ellipsis">
Lifecycle
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/items/" class="md-nav__link">
<span class="md-ellipsis">
Items
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/run_context/" class="md-nav__link">
<span class="md-ellipsis">
Run Context
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/usage/" class="md-nav__link">
<span class="md-ellipsis">
Usage
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/exceptions/" class="md-nav__link">
<span class="md-ellipsis">
Exceptions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/guardrail/" class="md-nav__link">
<span class="md-ellipsis">
Guardrail
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/model_settings/" class="md-nav__link">
<span class="md-ellipsis">
Model Settings
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/agent_output/" class="md-nav__link">
<span class="md-ellipsis">
Agent Output
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/function_schema/" class="md-nav__link">
<span class="md-ellipsis">
Function Schema
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_10_2" >
<label class="md-nav__link" for="__nav_10_2" id="__nav_10_2_label" tabindex="0">
<span class="md-ellipsis">
Models
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_10_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_10_2">
<span class="md-nav__icon md-icon"></span>
Models
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../ref/models/interface/" class="md-nav__link">
<span class="md-ellipsis">
Interface
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/models/openai_chatcompletions/" class="md-nav__link">
<span class="md-ellipsis">
OpenAI Chat Completions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/models/openai_responses/" class="md-nav__link">
<span class="md-ellipsis">
OpenAI Responses
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_10_3" >
<label class="md-nav__link" for="__nav_10_3" id="__nav_10_3_label" tabindex="0">
<span class="md-ellipsis">
Extensions
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_10_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_10_3">
<span class="md-nav__icon md-icon"></span>
Extensions
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../ref/extensions/handoff_filters/" class="md-nav__link">
<span class="md-ellipsis">
Handoff Filters
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../ref/extensions/handoff_prompt/" class="md-nav__link">
<span class="md-ellipsis">
Handoff Prompt
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_11" >
<label class="md-nav__link" for="__nav_11" id="__nav_11_label" tabindex="">
<span class="md-ellipsis">
Advanced
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_11_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_11">
<span class="md-nav__icon md-icon"></span>
Advanced
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../cai_development/" class="md-nav__link">
<span class="md-ellipsis">
Development
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_12" >
<label class="md-nav__link" for="__nav_12" id="__nav_12_label" tabindex="">
<span class="md-ellipsis">
Research
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_12_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_12">
<span class="md-nav__icon md-icon"></span>
Research
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../research/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_13" >
<label class="md-nav__link" for="__nav_13" id="__nav_13_label" tabindex="">
<span class="md-ellipsis">
Resources
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_13_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_13">
<span class="md-nav__icon md-icon"></span>
Resources
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../cai_faq/" class="md-nav__link">
<span class="md-ellipsis">
FAQ
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../cai_find_us/" class="md-nav__link">
<span class="md-ellipsis">
Find Us
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../cai_citation_and_acknowledgments/" class="md-nav__link">
<span class="md-ellipsis">
Citation & Acknowledgments
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#interface-overview" class="md-nav__link">
<span class="md-ellipsis">
Interface Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#top-bar" class="md-nav__link">
<span class="md-ellipsis">
Top Bar
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#sidebar" class="md-nav__link">
<span class="md-ellipsis">
Sidebar
</span>
</a>
<nav class="md-nav" aria-label="Sidebar">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-teams-tab" class="md-nav__link">
<span class="md-ellipsis">
1. Teams Tab
</span>
</a>
<nav class="md-nav" aria-label="1. Teams Tab">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#available-preconfigured-teams" class="md-nav__link">
<span class="md-ellipsis">
Available Preconfigured Teams
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-teams" class="md-nav__link">
<span class="md-ellipsis">
Using Teams
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#2-queue-tab" class="md-nav__link">
<span class="md-ellipsis">
2. Queue Tab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#3-stats-tab" class="md-nav__link">
<span class="md-ellipsis">
3. Stats Tab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#4-keys-tab" class="md-nav__link">
<span class="md-ellipsis">
4. Keys Tab
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#terminal-components" class="md-nav__link">
<span class="md-ellipsis">
Terminal Components
</span>
</a>
<nav class="md-nav" aria-label="Terminal Components">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#terminal-header" class="md-nav__link">
<span class="md-ellipsis">
Terminal Header
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#terminal-output-area" class="md-nav__link">
<span class="md-ellipsis">
Terminal Output Area
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#terminal-states" class="md-nav__link">
<span class="md-ellipsis">
Terminal States
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#terminal-layouts" class="md-nav__link">
<span class="md-ellipsis">
Terminal Layouts
</span>
</a>
<nav class="md-nav" aria-label="Terminal Layouts">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#single-terminal-layout" class="md-nav__link">
<span class="md-ellipsis">
Single Terminal Layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#split-two-terminal-layout" class="md-nav__link">
<span class="md-ellipsis">
Split (Two Terminal) Layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#triple-terminal-layout" class="md-nav__link">
<span class="md-ellipsis">
Triple Terminal Layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#scrollable-layout" class="md-nav__link">
<span class="md-ellipsis">
Scrollable Layout
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#status-bar" class="md-nav__link">
<span class="md-ellipsis">
Status Bar
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#input-area" class="md-nav__link">
<span class="md-ellipsis">
Input Area
</span>
</a>
<nav class="md-nav" aria-label="Input Area">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#prompt-input" class="md-nav__link">
<span class="md-ellipsis">
Prompt Input
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#autocompletion" class="md-nav__link">
<span class="md-ellipsis">
Autocompletion
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#responsive-design" class="md-nav__link">
<span class="md-ellipsis">
Responsive Design
</span>
</a>
<nav class="md-nav" aria-label="Responsive Design">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#minimum-requirements" class="md-nav__link">
<span class="md-ellipsis">
Minimum Requirements
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#adaptive-behaviors" class="md-nav__link">
<span class="md-ellipsis">
Adaptive Behaviors
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#dynamic-adjustments" class="md-nav__link">
<span class="md-ellipsis">
Dynamic Adjustments
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#command-palette" class="md-nav__link">
<span class="md-ellipsis">
Command Palette
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="cai-tui-user-interface">CAI TUI User Interface</h1>
<blockquote>
<p><strong>⚡ CAI-Pro Exclusive Feature</strong><br />
The Terminal User Interface (TUI) is available exclusively in <strong>CAI-Pro</strong>. To access this feature and unlock advanced multi-agent workflows, visit <a href="https://aliasrobotics.com/cybersecurityai.php">Alias Robotics</a> for more information.</p>
</blockquote>
<hr />
<p>This guide provides a detailed overview of the CAI TUI interface components and their functions.</p>
<h2 id="interface-overview">Interface Overview</h2>
<p>The CAI TUI interface is divided into several key areas:</p>
<hr />
<h2 id="top-bar">Top Bar</h2>
<p>The top bar provides global controls and information:</p>
<ul>
<li>
<p><strong>[≡] Sidebar toggle</strong>: Toggles the visibility of the sidebar containing Teams, Queue, Stats, and Keys tabs. Press <code>Ctrl+S</code> or click this icon to show/hide the sidebar and maximize terminal space.</p>
</li>
<li>
<p><strong>Terminal</strong>: Main CAI interface label indicating the active application view.</p>
</li>
<li>
<p><strong>Add+ button</strong>: Creates and adds a new terminal to the current session. </p>
</li>
<li>
<p><strong>Graph</strong>: Visual conversation flow representation.</p>
</li>
<li>
<p><strong>Help</strong>: Launches the comprehensive user guide with detailed documentation, keyboard shortcuts reference, and pro tips.</p>
</li>
<li>
<p><strong>[×] Close</strong>: Exits the TUI application.</p>
</li>
</ul>
<hr />
<h2 id="sidebar">Sidebar</h2>
<p>The sidebar contains four main tabs accessible via mouse click or keyboard shortcuts:</p>
<h3 id="1-teams-tab">1. Teams Tab</h3>
<p>The Teams tab displays preconfigured agent teams for parallel testing scenarios. CAI TUI includes <strong>11 preconfigured teams</strong> designed for different security testing workflows.</p>
<p><strong>Team Buttons</strong>:
- Compact labels show team composition (e.g., <code>#1: 2 red + 2 bug</code>)
- Click to apply team configuration to all 4 terminals simultaneously
- Hover to see detailed tooltip with full agent names and terminal-by-terminal assignments</p>
<p><strong>Tooltip Information</strong>:
Each team button displays a rich tooltip on hover showing:
- Team number and full composition (e.g., "#1: 2 redteam_agent + 2 bug_bounter_agent")
- Terminal-by-terminal breakdown:
- <strong>T1</strong>: Agent assigned to Terminal 1
- <strong>T2</strong>: Agent assigned to Terminal 2
- <strong>T3</strong>: Agent assigned to Terminal 3
- <strong>T4</strong>: Agent assigned to Terminal 4</p>
<h4 id="available-preconfigured-teams">Available Preconfigured Teams</h4>
<p><strong>Team #1: 2 Red + 2 Bug Bounty</strong>
- <strong>T1</strong>: redteam_agent
- <strong>T2</strong>: redteam_agent
- <strong>T3</strong>: bug_bounter_agent
- <strong>T4</strong>: bug_bounter_agent
- <strong>Best for</strong>: Comprehensive vulnerability discovery combining offensive testing with bug bounty methodology</p>
<p><strong>Team #2: 1 Red + 3 Bug Bounty</strong>
- <strong>T1</strong>: redteam_agent
- <strong>T2</strong>: bug_bounter_agent
- <strong>T3</strong>: bug_bounter_agent
- <strong>T4</strong>: bug_bounter_agent
- <strong>Best for</strong>: Bug bounty programs with red team leadership and multiple hunters focusing on different attack surfaces</p>
<p><strong>Team #3: 2 Red + 2 Blue</strong>
- <strong>T1</strong>: redteam_agent
- <strong>T2</strong>: redteam_agent
- <strong>T3</strong>: blueteam_agent
- <strong>T4</strong>: blueteam_agent
- <strong>Best for</strong>: Adversarial testing with simultaneous offensive and defensive perspectives</p>
<p><strong>Team #4: 2 Blue + 2 Bug Bounty</strong>
- <strong>T1</strong>: blueteam_agent
- <strong>T2</strong>: blueteam_agent
- <strong>T3</strong>: bug_bounter_agent
- <strong>T4</strong>: bug_bounter_agent
- <strong>Best for</strong>: Defense-focused assessments with vulnerability validation from bug bounty perspective</p>
<p><strong>Team #5: Red + Blue + Retester + Bug</strong>
- <strong>T1</strong>: redteam_agent
- <strong>T2</strong>: blueteam_agent
- <strong>T3</strong>: retester_agent
- <strong>T4</strong>: bug_bounter_agent
- <strong>Best for</strong>: Complete security lifecycle from discovery to validation with mixed specialties</p>
<p><strong>Team #6: 2 Red + 2 Retester</strong>
- <strong>T1</strong>: redteam_agent
- <strong>T2</strong>: redteam_agent
- <strong>T3</strong>: retester_agent
- <strong>T4</strong>: retester_agent
- <strong>Best for</strong>: Aggressive offensive testing with immediate vulnerability retesting and validation</p>
<p><strong>Team #7: 2 Blue + 2 Retester</strong>
- <strong>T1</strong>: blueteam_agent
- <strong>T2</strong>: blueteam_agent
- <strong>T3</strong>: retester_agent
- <strong>T4</strong>: retester_agent
- <strong>Best for</strong>: Defensive security validation with continuous retesting of hardening measures</p>
<p><strong>Team #8: 4 Red Team</strong>
- <strong>T1</strong>: redteam_agent
- <strong>T2</strong>: redteam_agent
- <strong>T3</strong>: redteam_agent
- <strong>T4</strong>: redteam_agent
- <strong>Best for</strong>: Maximum offensive power, CTF competitions, intensive penetration testing campaigns</p>
<p><strong>Team #9: 4 Blue Team</strong>
- <strong>T1</strong>: blueteam_agent
- <strong>T2</strong>: blueteam_agent
- <strong>T3</strong>: blueteam_agent
- <strong>T4</strong>: blueteam_agent
- <strong>Best for</strong>: Comprehensive defensive analysis, security architecture review, hardening validation</p>
<p><strong>Team #10: 4 Bug Bounty</strong>
- <strong>T1</strong>: bug_bounter_agent
- <strong>T2</strong>: bug_bounter_agent
- <strong>T3</strong>: bug_bounter_agent
- <strong>T4</strong>: bug_bounter_agent
- <strong>Best for</strong>: Bug bounty hunts, vulnerability research, OWASP Top 10 testing across multiple surfaces</p>
<p><strong>Team #11: 4 Retester</strong>
- <strong>T1</strong>: retester_agent
- <strong>T2</strong>: retester_agent
- <strong>T3</strong>: retester_agent
- <strong>T4</strong>: retester_agent
- <strong>Best for</strong>: Large-scale retesting campaigns, verification of fixes, regression testing</p>
<h4 id="using-teams">Using Teams</h4>
<p>When you select a team:
1. All 4 terminals are automatically reconfigured with the designated agents
2. Agent dropdowns in each terminal header update to reflect new assignments
3. Terminal output areas are preserved (previous conversations remain visible)
4. Each terminal is ready to receive prompts immediately
5. You can broadcast the same prompt to all terminals or send individual prompts</p>
<h3 id="2-queue-tab">2. Queue Tab</h3>
<p>The Queue tab manages prompt queuing and broadcast execution:</p>
<p><strong>Queue Management</strong>:
- View all queued prompts
- Delete individual prompts
- Clear entire queue
- Execute queue sequentially</p>
<p><strong>Broadcast Mode</strong>:
- Toggle broadcast mode on/off
- Send prompts to all terminals simultaneously
- Queue prompts for batch execution
- Monitor execution progress</p>
<p><strong>Queue Display</strong>:
<div class="language-text highlight"><pre><span></span><code><span id="__span-0-1">[1] Scan target.com for XSS vulnerabilities
</span><span id="__span-0-2">[2] Check for SQL injection in login form
</span><span id="__span-0-3">[3] Test API endpoints for authorization bypass
</span></code></pre></div></p>
<h3 id="3-stats-tab">3. Stats Tab</h3>
<p>The Stats tab provides real-time cost tracking and usage statistics:</p>
<p><strong>Cost Information</strong>:
- Total session cost (all terminals combined)
- Per-terminal cost breakdown
- Token usage (input/output)
- Model pricing details
- Cost per interaction</p>
<p><strong>Usage Metrics</strong>:
- Number of interactions
- Total tokens consumed
- Average cost per turn
- Time elapsed
- Active terminals</p>
<p><strong>Example Display</strong>:</p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-1-1">Total Cost: $0.47
</span><span id="__span-1-2">═══════════════════════
</span><span id="__span-1-3">Terminal 1: $0.15
</span><span id="__span-1-4">Terminal 2: $0.12
</span><span id="__span-1-5">Terminal 3: $0.10
</span><span id="__span-1-6">Terminal 4: $0.10
</span></code></pre></div>
<p><strong>Cost Limits</strong>:
- Set via <code>CAI_PRICE_LIMIT</code> environment variable
- Warning when approaching limit
- Automatic pause when limit exceeded</p>
<h3 id="4-keys-tab">4. Keys Tab</h3>
<p>The Keys tab displays and manages API keys:</p>
<p><strong>Key Information</strong>:
- API key provider (OpenAI, Anthropic, etc.)
- Masked API keys</p>
<p><strong>Key Management</strong>:
- Update keys without restarting
- Environment variable status</p>
<h2 id="terminal-components">Terminal Components</h2>
<p>Each terminal window consists of several components:</p>
<h3 id="terminal-header">Terminal Header</h3>
<p>The header bar above each terminal shows:</p>
<ul>
<li><strong>Terminal Number</strong>: T1, T2, T3, or T4</li>
<li><strong>Agent Name</strong>: Currently selected agent (e.g., <code>redteam_agent</code>)</li>
<li><strong>Model Selector</strong>: Dropdown to change LLM model (e.g., <code>alias1</code>, <code>gpt-4o</code>)</li>
<li><strong>Container Icon</strong>: Indicates if agent is running in container mode</li>
</ul>
<p><strong>Agent Dropdown</strong>:
- Click to open agent selection menu
- Shows all available agents
- Hover for agent description
- Keyboard navigation supported</p>
<p><strong>Model Dropdown</strong>:
- Click to open model selection menu
- Shows configured models (alias1, gpt-5, gpt-4o, etc.)
- Displays model aliases and actual names
- Updates immediately upon selection</p>
<h3 id="terminal-output-area">Terminal Output Area</h3>
<p>The main terminal display area shows:</p>
<p><strong>Agent Responses</strong>:
- Formatted text with Rich markup support
- Syntax-highlighted code blocks
- Tables and structured data
- Progress indicators for long operations</p>
<p><strong>Tool Calls</strong>:
- Tool name and parameters
- Execution status (running, success, error)
- Tool output and results
- Collapsed/expanded view for long outputs</p>
<p><strong>System Messages</strong>:
- Agent initialization
- Context resets
- Error messages
- Cost warnings</p>
<p><strong>Streaming Display</strong>:
- Real-time token streaming for LLM responses
- Progressive rendering of tool outputs
- Live progress indicators
- Smooth scrolling</p>
<h3 id="terminal-states">Terminal States</h3>
<p>Terminals can be in different visual states:</p>
<p><strong>Active State</strong>:
- Highlighted border (accent color)
- Ready to receive input
- Cursor visible in input area
- Responds to keyboard shortcuts</p>
<p><strong>Inactive State</strong>:
- Dimmed border
- Background operations continue
- Click to activate
- Scrollable content</p>
<p><strong>Busy State</strong>:
- Spinner or progress indicator
- "Working..." message
- Cannot send new prompts
- Cancel option available (<code>Ctrl+C</code>)</p>
<p><strong>Error State</strong>:
- Red border or error indicator
- Error message displayed
- Retry option available
- Can clear and continue</p>
<hr />
<h2 id="terminal-layouts">Terminal Layouts</h2>
<p>The TUI supports multiple layout configurations for parallel agent execution:</p>
<h3 id="single-terminal-layout">Single Terminal Layout</h3>
<p>Default view showing one terminal at full width:</p>
<p><img alt="Single Terminal Layout" src="../../media/CAI-1terminal.png" /></p>
<p><strong>Use Cases</strong>:
- Single-agent workflows
- Detailed analysis requiring full screen
- Learning and experimentation</p>
<p><strong>Activation</strong>: Automatically displayed when only one terminal is needed</p>
<h3 id="split-two-terminal-layout">Split (Two Terminal) Layout</h3>
<p>Side-by-side view for two terminals:</p>
<p><img alt="Two Terminal Split Layout" src="../../media/CAI-2terminals.png" /></p>
<p><strong>Use Cases</strong>:
- Comparing two agent approaches
- Red team vs. Blue team parallel execution
- Different model comparison</p>
<p><strong>Activation</strong>: Triggered when using 2 terminals or Team 3/4</p>
<h3 id="triple-terminal-layout">Triple Terminal Layout</h3>
<p>Three terminals with one full-width top terminal:</p>
<p><img alt="Three Terminal Layout" src="../../media/CAI-3terminals.png" /></p>
<p><strong>Use Cases</strong>:
- Full team operations (Teams 1-4)
- Maximum parallel execution
- Comprehensive testing scenarios
- Multi-perspective analysis</p>
<p><strong>Activation</strong>: Default for preconfigured teams (Team 1, 2, 3, 4)</p>
<h3 id="scrollable-layout">Scrollable Layout</h3>
<p>For more than 4 terminals (experimental):</p>
<p><img alt="Four Terminal Grid Layout" src="../../media/cai-tui-main.png" /></p>
<p><strong>Use Cases</strong>:
- Large-scale testing
- Custom configurations
- Advanced workflows</p>
<hr />
<h2 id="status-bar">Status Bar</h2>
<p>The bottom status bar displays global information:</p>
<p><strong>Left Section</strong>:
- <strong>Agent</strong>: Currently active agent name
- <strong>Model</strong>: Currently active model
- <strong>Cost</strong>: Session total cost</p>
<p><strong>Center Section</strong>:
- <strong>Tokens</strong>: Total tokens used (input/output)
- <strong>Time</strong>: Session duration
- <strong>Interactions</strong>: Number of completed turns</p>
<p><strong>Right Section</strong>:
- <strong>Status</strong>: Connection status, errors, warnings
- <strong>Mode</strong>: Current mode (broadcast, queue, normal)
- <strong>Shortcuts</strong>: Context-sensitive keyboard hints</p>
<h2 id="input-area">Input Area</h2>
<p>The input area at the bottom provides prompt entry and management:</p>
<h3 id="prompt-input">Prompt Input</h3>
<p><strong>Features</strong>:
- Multi-line input support (grows with content)
- Syntax highlighting for code snippets
- Placeholder text with hints
- Character counter for long prompts
- Auto-scrolling for long text</p>
<p><strong>Keyboard Shortcuts</strong>:
- <code>Enter</code>: Submit prompt
- <code>Shift+Enter</code>: New line (terminals with extended keyboard protocols)
- <code>Alt+Enter</code>: New line (universal fallback)
- <code>Ctrl+U</code>: Clear input
- <code>Up/Down</code>: Navigate command history</p>
<h3 id="autocompletion">Autocompletion</h3>
<p>The TUI provides intelligent autocompletion for:</p>
<p><strong>Commands</strong>:
- <code>/clear</code> - Clear terminal
- <code>/save</code> - Save as <code>.jsonl</code> (for <code>/load</code>) or <code>.md</code> (readable report)
- <code>/load</code> - Load conversation JSONL (not Markdown exports)
- <code>/help</code> - Show help
- <code>/agent</code> - Switch agent
- <code>/model</code> - Switch model</p>
<h2 id="responsive-design">Responsive Design</h2>
<p>The TUI adapts to different terminal sizes:</p>
<h3 id="minimum-requirements">Minimum Requirements</h3>
<ul>
<li><strong>Width</strong>: 80 columns minimum (120+ recommended)</li>
<li><strong>Height</strong>: 24 rows minimum (40+ recommended)</li>
</ul>
<h3 id="adaptive-behaviors">Adaptive Behaviors</h3>
<p><strong>Small Terminals (80×24)</strong>:
- Sidebar collapses to icons only
- Single terminal view prioritized
- Compact status bar
- Abbreviated labels</p>
<p><strong>Medium Terminals (120×40)</strong>:
- Full sidebar visible
- Split/Triple layouts available
- Standard spacing
- Full labels</p>
<p><strong>Large Terminals (160×50+)</strong>:
- Quad layout comfortable
- Additional information displayed
- More breathing room
- Enhanced tooltips</p>
<h3 id="dynamic-adjustments">Dynamic Adjustments</h3>
<p>The TUI automatically:
- Wraps long lines in terminal output
- Truncates button labels to fit width
- Adjusts table column widths
- Scales terminal grid based on available space
- Hides non-essential UI elements when space is limited</p>
<hr />
<h2 id="command-palette">Command Palette</h2>
<p>Press <code>Ctrl+P</code> or click the menu button to open the command palette, which provides:</p>
<ul>
<li>Quick command search and execution</li>
<li>Fuzzy matching for command names</li>
<li>Keyboard navigation (arrow keys, Enter)</li>
<li>Recent commands history</li>
<li>Command descriptions and shortcuts</li>
</ul>
<p>Available commands include:
- <code>clear</code> - Clear terminal output
- <code>save</code> - Save as JSONL or Markdown (<code>/save file.jsonl</code> or <code>/save report.md</code>)
- <code>load</code> - Load JSONL conversation (<code>/load</code>; use <code>.jsonl</code> from <code>/save</code>)
- <code>reset</code> - Reset agent context
- <code>help</code> - Show help information</p>
<hr />
<p><em>Last updated: October 2025 | CAI TUI v0.6+</em></p>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["content.code.copy", "content.code.select", "navigation.path", "navigation.sections", "navigation.expand", "content.code.annotate"], "search": "../../assets/javascripts/workers/search.f8cc74c7.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script src="../../assets/javascripts/bundle.c8b220af.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink