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

4147 lines
77 KiB
HTML
Raw Permalink Blame History

<!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="../gestures_shortcuts/">
<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-mobile-ui-user-interface-guide" 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--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8" checked>
<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="true">
<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_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="#navigation-bar" class="md-nav__link">
<span class="md-ellipsis">
Navigation Bar
</span>
</a>
<nav class="md-nav" aria-label="Navigation Bar">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#left-side" class="md-nav__link">
<span class="md-ellipsis">
Left Side
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#center" class="md-nav__link">
<span class="md-ellipsis">
Center
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#right-side" class="md-nav__link">
<span class="md-ellipsis">
Right Side
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#chat-display-area" class="md-nav__link">
<span class="md-ellipsis">
Chat Display Area
</span>
</a>
<nav class="md-nav" aria-label="Chat Display Area">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#message-types" class="md-nav__link">
<span class="md-ellipsis">
Message Types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#content-rendering" class="md-nav__link">
<span class="md-ellipsis">
Content Rendering
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#message-input-bar" class="md-nav__link">
<span class="md-ellipsis">
Message Input Bar
</span>
</a>
<nav class="md-nav" aria-label="Message Input Bar">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#text-field" class="md-nav__link">
<span class="md-ellipsis">
Text Field
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#action-buttons" class="md-nav__link">
<span class="md-ellipsis">
Action Buttons
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#tab-bar-navigation" class="md-nav__link">
<span class="md-ellipsis">
Tab Bar Navigation
</span>
</a>
<nav class="md-nav" aria-label="Tab Bar Navigation">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#chats-tab" class="md-nav__link">
<span class="md-ellipsis">
Chats Tab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#agents-tab" class="md-nav__link">
<span class="md-ellipsis">
Agents Tab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#tools-tab" class="md-nav__link">
<span class="md-ellipsis">
Tools Tab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#history-tab" class="md-nav__link">
<span class="md-ellipsis">
History Tab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#settings-tab" class="md-nav__link">
<span class="md-ellipsis">
Settings Tab
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#visual-design" class="md-nav__link">
<span class="md-ellipsis">
Visual Design
</span>
</a>
<nav class="md-nav" aria-label="Visual Design">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#color-scheme" class="md-nav__link">
<span class="md-ellipsis">
Color Scheme
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#typography" class="md-nav__link">
<span class="md-ellipsis">
Typography
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#spacing-and-layout" class="md-nav__link">
<span class="md-ellipsis">
Spacing and Layout
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#interactive-elements" class="md-nav__link">
<span class="md-ellipsis">
Interactive Elements
</span>
</a>
<nav class="md-nav" aria-label="Interactive Elements">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#gestures" class="md-nav__link">
<span class="md-ellipsis">
Gestures
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#animations" class="md-nav__link">
<span class="md-ellipsis">
Animations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#haptic-feedback" class="md-nav__link">
<span class="md-ellipsis">
Haptic Feedback
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#adaptive-features" class="md-nav__link">
<span class="md-ellipsis">
Adaptive Features
</span>
</a>
<nav class="md-nav" aria-label="Adaptive Features">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#dynamic-type" class="md-nav__link">
<span class="md-ellipsis">
Dynamic Type
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#orientation-support" class="md-nav__link">
<span class="md-ellipsis">
Orientation Support
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#display-modes" class="md-nav__link">
<span class="md-ellipsis">
Display Modes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#status-indicators" class="md-nav__link">
<span class="md-ellipsis">
Status Indicators
</span>
</a>
<nav class="md-nav" aria-label="Status Indicators">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#connection-status" class="md-nav__link">
<span class="md-ellipsis">
Connection Status
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#agent-status" class="md-nav__link">
<span class="md-ellipsis">
Agent Status
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#network-quality" class="md-nav__link">
<span class="md-ellipsis">
Network Quality
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#accessibility" class="md-nav__link">
<span class="md-ellipsis">
Accessibility
</span>
</a>
<nav class="md-nav" aria-label="Accessibility">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#voiceover-support" class="md-nav__link">
<span class="md-ellipsis">
VoiceOver Support
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#visual-accommodations" class="md-nav__link">
<span class="md-ellipsis">
Visual Accommodations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#motor-accommodations" class="md-nav__link">
<span class="md-ellipsis">
Motor Accommodations
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#customization-options" class="md-nav__link">
<span class="md-ellipsis">
Customization Options
</span>
</a>
<nav class="md-nav" aria-label="Customization Options">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#appearance-settings" class="md-nav__link">
<span class="md-ellipsis">
Appearance Settings
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#layout-preferences" class="md-nav__link">
<span class="md-ellipsis">
Layout Preferences
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#behavior-settings" class="md-nav__link">
<span class="md-ellipsis">
Behavior Settings
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#performance-optimization" class="md-nav__link">
<span class="md-ellipsis">
Performance Optimization
</span>
</a>
<nav class="md-nav" aria-label="Performance Optimization">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#image-handling" class="md-nav__link">
<span class="md-ellipsis">
Image Handling
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#message-rendering" class="md-nav__link">
<span class="md-ellipsis">
Message Rendering
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#network-efficiency" class="md-nav__link">
<span class="md-ellipsis">
Network Efficiency
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#next-steps" class="md-nav__link">
<span class="md-ellipsis">
Next Steps
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../gestures_shortcuts/" class="md-nav__link">
<span class="md-ellipsis">
Gestures & Shortcuts
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../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--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_9" >
<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="false">
<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/tui_index/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tui/getting_started/" class="md-nav__link">
<span class="md-ellipsis">
Getting Started
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tui/user_interface/" class="md-nav__link">
<span class="md-ellipsis">
User Interface
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tui/terminals_management/" class="md-nav__link">
<span class="md-ellipsis">
Terminals Management
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tui/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="../../tui/sidebar_features/" class="md-nav__link">
<span class="md-ellipsis">
Sidebar Features
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tui/keyboard_shortcuts/" class="md-nav__link">
<span class="md-ellipsis">
Keyboard Shortcuts
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tui/commands_reference/" class="md-nav__link">
<span class="md-ellipsis">
Commands Reference
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tui/advanced_features/" class="md-nav__link">
<span class="md-ellipsis">
Advanced Features
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tui/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="#navigation-bar" class="md-nav__link">
<span class="md-ellipsis">
Navigation Bar
</span>
</a>
<nav class="md-nav" aria-label="Navigation Bar">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#left-side" class="md-nav__link">
<span class="md-ellipsis">
Left Side
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#center" class="md-nav__link">
<span class="md-ellipsis">
Center
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#right-side" class="md-nav__link">
<span class="md-ellipsis">
Right Side
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#chat-display-area" class="md-nav__link">
<span class="md-ellipsis">
Chat Display Area
</span>
</a>
<nav class="md-nav" aria-label="Chat Display Area">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#message-types" class="md-nav__link">
<span class="md-ellipsis">
Message Types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#content-rendering" class="md-nav__link">
<span class="md-ellipsis">
Content Rendering
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#message-input-bar" class="md-nav__link">
<span class="md-ellipsis">
Message Input Bar
</span>
</a>
<nav class="md-nav" aria-label="Message Input Bar">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#text-field" class="md-nav__link">
<span class="md-ellipsis">
Text Field
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#action-buttons" class="md-nav__link">
<span class="md-ellipsis">
Action Buttons
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#tab-bar-navigation" class="md-nav__link">
<span class="md-ellipsis">
Tab Bar Navigation
</span>
</a>
<nav class="md-nav" aria-label="Tab Bar Navigation">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#chats-tab" class="md-nav__link">
<span class="md-ellipsis">
Chats Tab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#agents-tab" class="md-nav__link">
<span class="md-ellipsis">
Agents Tab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#tools-tab" class="md-nav__link">
<span class="md-ellipsis">
Tools Tab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#history-tab" class="md-nav__link">
<span class="md-ellipsis">
History Tab
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#settings-tab" class="md-nav__link">
<span class="md-ellipsis">
Settings Tab
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#visual-design" class="md-nav__link">
<span class="md-ellipsis">
Visual Design
</span>
</a>
<nav class="md-nav" aria-label="Visual Design">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#color-scheme" class="md-nav__link">
<span class="md-ellipsis">
Color Scheme
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#typography" class="md-nav__link">
<span class="md-ellipsis">
Typography
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#spacing-and-layout" class="md-nav__link">
<span class="md-ellipsis">
Spacing and Layout
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#interactive-elements" class="md-nav__link">
<span class="md-ellipsis">
Interactive Elements
</span>
</a>
<nav class="md-nav" aria-label="Interactive Elements">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#gestures" class="md-nav__link">
<span class="md-ellipsis">
Gestures
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#animations" class="md-nav__link">
<span class="md-ellipsis">
Animations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#haptic-feedback" class="md-nav__link">
<span class="md-ellipsis">
Haptic Feedback
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#adaptive-features" class="md-nav__link">
<span class="md-ellipsis">
Adaptive Features
</span>
</a>
<nav class="md-nav" aria-label="Adaptive Features">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#dynamic-type" class="md-nav__link">
<span class="md-ellipsis">
Dynamic Type
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#orientation-support" class="md-nav__link">
<span class="md-ellipsis">
Orientation Support
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#display-modes" class="md-nav__link">
<span class="md-ellipsis">
Display Modes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#status-indicators" class="md-nav__link">
<span class="md-ellipsis">
Status Indicators
</span>
</a>
<nav class="md-nav" aria-label="Status Indicators">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#connection-status" class="md-nav__link">
<span class="md-ellipsis">
Connection Status
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#agent-status" class="md-nav__link">
<span class="md-ellipsis">
Agent Status
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#network-quality" class="md-nav__link">
<span class="md-ellipsis">
Network Quality
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#accessibility" class="md-nav__link">
<span class="md-ellipsis">
Accessibility
</span>
</a>
<nav class="md-nav" aria-label="Accessibility">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#voiceover-support" class="md-nav__link">
<span class="md-ellipsis">
VoiceOver Support
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#visual-accommodations" class="md-nav__link">
<span class="md-ellipsis">
Visual Accommodations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#motor-accommodations" class="md-nav__link">
<span class="md-ellipsis">
Motor Accommodations
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#customization-options" class="md-nav__link">
<span class="md-ellipsis">
Customization Options
</span>
</a>
<nav class="md-nav" aria-label="Customization Options">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#appearance-settings" class="md-nav__link">
<span class="md-ellipsis">
Appearance Settings
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#layout-preferences" class="md-nav__link">
<span class="md-ellipsis">
Layout Preferences
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#behavior-settings" class="md-nav__link">
<span class="md-ellipsis">
Behavior Settings
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#performance-optimization" class="md-nav__link">
<span class="md-ellipsis">
Performance Optimization
</span>
</a>
<nav class="md-nav" aria-label="Performance Optimization">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#image-handling" class="md-nav__link">
<span class="md-ellipsis">
Image Handling
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#message-rendering" class="md-nav__link">
<span class="md-ellipsis">
Message Rendering
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#network-efficiency" class="md-nav__link">
<span class="md-ellipsis">
Network Efficiency
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#next-steps" class="md-nav__link">
<span class="md-ellipsis">
Next Steps
</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-mobile-ui-user-interface-guide">CAI Mobile UI - User Interface Guide</h1>
<blockquote>
<p><strong>⚡ CAI-Pro Exclusive</strong><br />
Master the CAI Mobile UI interface for efficient security testing on the go.</p>
</blockquote>
<p>This guide provides a comprehensive overview of the CAI Mobile UI interface elements, layouts, and visual design.</p>
<p><img alt="CAI Mobile UI Main Interface" src="../../media/MUI/cai_app_ios_chat.png" /></p>
<h2 id="interface-overview">Interface Overview</h2>
<p>The CAI Mobile UI is organized into five main areas:</p>
<div class="language-text highlight"><pre><span></span><code><span id="__span-0-1">┌─────────────────────────────┐
</span><span id="__span-0-2">│ Navigation Bar │ ← Agent/Model Selection
</span><span id="__span-0-3">├─────────────────────────────┤
</span><span id="__span-0-4">│ │
</span><span id="__span-0-5">│ │
</span><span id="__span-0-6">│ Chat Display │ ← Conversation Area
</span><span id="__span-0-7">│ │
</span><span id="__span-0-8">│ │
</span><span id="__span-0-9">├─────────────────────────────┤
</span><span id="__span-0-10">│ Message Input Bar │ ← Text Input
</span><span id="__span-0-11">├─────────────────────────────┤
</span><span id="__span-0-12">│ Tab Bar │ ← Navigation
</span><span id="__span-0-13">└─────────────────────────────┘
</span></code></pre></div>
<h2 id="navigation-bar">Navigation Bar</h2>
<p>The top navigation bar provides quick access to core functions:</p>
<h3 id="left-side">Left Side</h3>
<ul>
<li><strong>Menu Button</strong> (☰): Access sidebar menu</li>
<li>Settings</li>
<li>Session History</li>
<li>Export Options</li>
<li>Help &amp; Documentation</li>
</ul>
<h3 id="center">Center</h3>
<ul>
<li><strong>Agent Selector</strong>: Current agent name with dropdown</li>
<li>Tap to change agents</li>
<li>Shows agent status (active/thinking)</li>
<li>Displays specialized agent icons</li>
</ul>
<h3 id="right-side">Right Side</h3>
<ul>
<li><strong>Model Badge</strong>: Current model indicator</li>
<li>Tap to change models</li>
<li>Color-coded by provider</li>
<li>Shows token limits</li>
<li><strong>Action Button</strong> (...): Quick actions</li>
<li>Clear conversation</li>
<li>Export chat</li>
<li>View raw output</li>
</ul>
<h2 id="chat-display-area">Chat Display Area</h2>
<p>The main conversation area with sophisticated rendering:</p>
<h3 id="message-types">Message Types</h3>
<p><strong>User Messages</strong>
- Right-aligned bubbles
- Blue background (customizable)
- Timestamp on long-press
- Swipe actions available</p>
<p><strong>Assistant Messages</strong>
- Left-aligned bubbles
- White/gray background
- Agent avatar/icon
- Streaming indicator during generation</p>
<p><strong>System Messages</strong>
- Center-aligned
- Muted appearance
- Status updates and notifications</p>
<h3 id="content-rendering">Content Rendering</h3>
<p><strong>Text Formatting</strong>
- <strong>Bold text</strong> for emphasis
- <em>Italic text</em> for notes
- <code>Inline code</code> with syntax highlighting
- &gt; Blockquotes for citations</p>
<p><strong>Code Blocks</strong>
<div class="language-python highlight"><pre><span></span><code><span id="__span-1-1"><span class="c1"># Syntax highlighted code</span>
</span><span id="__span-1-2"><span class="k">def</span><span class="w"> </span><span class="nf">security_scan</span><span class="p">(</span><span class="n">target</span><span class="p">):</span>
</span><span id="__span-1-3"> <span class="k">return</span> <span class="n">results</span>
</span></code></pre></div>
- Language detection
- Copy button overlay
- Horizontal scrolling for long lines</p>
<p><strong>Lists and Tables</strong>
- Bullet points with proper indentation
- Numbered lists with automatic ordering
- Tables with responsive layout
- Horizontal scroll for wide tables</p>
<p><strong>Special Elements</strong>
- 🔧 Tool usage indicators
- 🤔 Thinking/reasoning displays
- ⚠️ Warning/error messages
- ✅ Success confirmations</p>
<h2 id="message-input-bar">Message Input Bar</h2>
<p>Advanced input controls at the bottom:</p>
<h3 id="text-field">Text Field</h3>
<ul>
<li>Multi-line support (expands up to 5 lines)</li>
<li>Paste detection for long content</li>
<li>Mention support (@agent, @file)</li>
<li>Markdown preview toggle</li>
</ul>
<h3 id="action-buttons">Action Buttons</h3>
<ul>
<li><strong>Send</strong> (→): Submit message</li>
<li><strong>Attach</strong> (📎): Add files/images</li>
<li>Photo library</li>
<li>Camera</li>
<li>Files app</li>
<li>Paste from clipboard</li>
<li><strong>Voice</strong> (🎤): Voice input (when available)</li>
<li><strong>Commands</strong> (/): Quick command palette</li>
</ul>
<h2 id="tab-bar-navigation">Tab Bar Navigation</h2>
<p>Bottom navigation for primary app sections:</p>
<h3 id="chats-tab">Chats Tab</h3>
<ul>
<li>Active conversations list</li>
<li>Unread message indicators</li>
<li>Swipe to delete/archive</li>
<li>Search conversations</li>
</ul>
<h3 id="agents-tab">Agents Tab</h3>
<ul>
<li>Browse all available agents</li>
<li>Category filtering</li>
<li>Agent descriptions</li>
<li>Quick select/favorite</li>
</ul>
<h3 id="tools-tab">Tools Tab</h3>
<ul>
<li>MCP tool management</li>
<li>Connected servers</li>
<li>Tool documentation</li>
<li>Configuration options</li>
</ul>
<h3 id="history-tab">History Tab</h3>
<ul>
<li>Past sessions</li>
<li>Search and filters</li>
<li>Export options</li>
<li>Analytics view</li>
</ul>
<h3 id="settings-tab">Settings Tab</h3>
<ul>
<li>Account management</li>
<li>Appearance options</li>
<li>Network configuration</li>
<li>Advanced settings</li>
</ul>
<h2 id="visual-design">Visual Design</h2>
<h3 id="color-scheme">Color Scheme</h3>
<p><strong>Light Mode</strong>
- Background: #FFFFFF
- Primary: #007AFF (iOS Blue)
- Text: #000000
- Secondary: #8E8E93</p>
<p><strong>Dark Mode</strong>
- Background: #000000
- Primary: #0A84FF
- Text: #FFFFFF
- Secondary: #8E8E93</p>
<p><strong>Agent Status Colors</strong>
- Active: Green (#34C759)
- Thinking: Orange (#FF9500)
- Error: Red (#FF3B30)
- Idle: Gray (#8E8E93)</p>
<h3 id="typography">Typography</h3>
<p><strong>Fonts</strong>
- Headers: SF Pro Display (Bold)
- Body: SF Pro Text (Regular)
- Code: SF Mono (Regular)
- Custom: Suisse Intl (CAI branding)</p>
<p><strong>Sizes</strong>
- Large Title: 34pt
- Title 1: 28pt
- Body: 17pt
- Caption: 12pt
- Code: 14pt</p>
<h3 id="spacing-and-layout">Spacing and Layout</h3>
<p><strong>Margins</strong>
- Screen edges: 16pt
- Between elements: 8pt
- Message bubbles: 12pt padding</p>
<p><strong>Adaptive Layouts</strong>
- iPhone SE: Compact width
- iPhone 14: Regular width
- iPad: Multi-column support</p>
<h2 id="interactive-elements">Interactive Elements</h2>
<h3 id="gestures">Gestures</h3>
<p><strong>Tap Gestures</strong>
- Single tap: Select/activate
- Double tap: Quick actions
- Long press: Context menu</p>
<p><strong>Swipe Gestures</strong>
- Horizontal: Navigate conversations
- Vertical: Scroll content
- Pull-to-refresh: Reload/cancel</p>
<p><strong>Pinch Gestures</strong>
- Zoom: Adjust text size
- Spread: View image full screen</p>
<h3 id="animations">Animations</h3>
<p><strong>Transitions</strong>
- Push/pop: 0.3s ease-in-out
- Fade: 0.2s linear
- Spring: Damping 0.8, velocity 0.5</p>
<p><strong>Loading States</strong>
- Skeleton screens for content
- Pulse animation for thinking
- Progress indicators for uploads</p>
<h3 id="haptic-feedback">Haptic Feedback</h3>
<p><strong>Light Impact</strong>
- Selection changes
- Toggle switches
- Tab selections</p>
<p><strong>Medium Impact</strong>
- Send message
- Error alerts
- Successful actions</p>
<p><strong>Heavy Impact</strong>
- Critical errors
- Destructive actions
- Force touch menus</p>
<h2 id="adaptive-features">Adaptive Features</h2>
<h3 id="dynamic-type">Dynamic Type</h3>
<p>Support for iOS accessibility sizes:
- Minimum: 14pt
- Maximum: 53pt
- Automatic layout adjustment
- Readable line lengths maintained</p>
<h3 id="orientation-support">Orientation Support</h3>
<p><strong>Portrait Mode</strong>
- Full interface visible
- Optimized for one-handed use
- Keyboard avoidance</p>
<p><strong>Landscape Mode</strong>
- Extended message view
- Side-by-side on iPad
- Floating keyboard support</p>
<h3 id="display-modes">Display Modes</h3>
<p><strong>Compact Mode</strong>
- Simplified navigation
- Condensed messages
- Essential actions only</p>
<p><strong>Regular Mode</strong>
- Full feature set
- Rich formatting
- All tools available</p>
<p><strong>iPad Mode</strong>
- Multi-column layout
- Floating panels
- Keyboard shortcuts</p>
<h2 id="status-indicators">Status Indicators</h2>
<h3 id="connection-status">Connection Status</h3>
<ul>
<li>🟢 Connected: Solid green</li>
<li>🟡 Connecting: Pulsing yellow</li>
<li>🔴 Disconnected: Solid red</li>
<li>🔄 Syncing: Rotating icon</li>
</ul>
<h3 id="agent-status">Agent Status</h3>
<ul>
<li>💭 Thinking: Animated dots</li>
<li>🛠️ Using tools: Tool icon</li>
<li>✍️ Writing: Typing indicator</li>
<li>✅ Complete: Checkmark</li>
</ul>
<h3 id="network-quality">Network Quality</h3>
<ul>
<li>Full bars: Excellent (&lt;50ms)</li>
<li>3 bars: Good (50-150ms)</li>
<li>2 bars: Fair (150-300ms)</li>
<li>1 bar: Poor (&gt;300ms)</li>
</ul>
<h2 id="accessibility">Accessibility</h2>
<h3 id="voiceover-support">VoiceOver Support</h3>
<ul>
<li>Complete label coverage</li>
<li>Logical navigation order</li>
<li>Action hints provided</li>
<li>Custom rotor actions</li>
</ul>
<h3 id="visual-accommodations">Visual Accommodations</h3>
<ul>
<li>High contrast mode</li>
<li>Reduce motion option</li>
<li>Color blind filters</li>
<li>Text size preferences</li>
</ul>
<h3 id="motor-accommodations">Motor Accommodations</h3>
<ul>
<li>Touch target minimums (44x44pt)</li>
<li>Gesture alternatives</li>
<li>Voice control support</li>
<li>Switch control compatible</li>
</ul>
<h2 id="customization-options">Customization Options</h2>
<h3 id="appearance-settings">Appearance Settings</h3>
<ul>
<li>Theme selection (Light/Dark/Auto)</li>
<li>Accent color choices</li>
<li>Font size adjustment</li>
<li>Message bubble styles</li>
</ul>
<h3 id="layout-preferences">Layout Preferences</h3>
<ul>
<li>Compact/comfortable/spacious</li>
<li>Show/hide timestamps</li>
<li>Avatar display options</li>
<li>Tab bar configuration</li>
</ul>
<h3 id="behavior-settings">Behavior Settings</h3>
<ul>
<li>Swipe sensitivity</li>
<li>Animation speed</li>
<li>Haptic intensity</li>
<li>Sound effects</li>
</ul>
<h2 id="performance-optimization">Performance Optimization</h2>
<h3 id="image-handling">Image Handling</h3>
<ul>
<li>Lazy loading for history</li>
<li>Thumbnail generation</li>
<li>Progressive image loading</li>
<li>Memory-efficient caching</li>
</ul>
<h3 id="message-rendering">Message Rendering</h3>
<ul>
<li>Virtualized scrolling</li>
<li>Incremental rendering</li>
<li>Text measurement caching</li>
<li>Smooth 60fps scrolling</li>
</ul>
<h3 id="network-efficiency">Network Efficiency</h3>
<ul>
<li>Message batching</li>
<li>Compression support</li>
<li>Delta updates only</li>
<li>Offline queue management</li>
</ul>
<h2 id="next-steps">Next Steps</h2>
<ul>
<li>👆 <a href="../gestures_shortcuts/">Master Gestures &amp; Shortcuts</a></li>
<li>💬 <a href="../chat_features/">Explore Chat Features</a></li>
<li>🎯 <a href="agent_selection.md">Learn Agent Selection</a></li>
</ul>
<hr />
<p><em>Understanding the interface is key to efficient mobile security testing</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