---
title: "WebUIの画面と操作"
description: "Home・Project Timeline・Composer・Workspaceパネル・Shared Documents・Asks・HTML共有・Discover・検索・招待・character・個人設定。WebUIの各表面の事実をこの1ページに集約する。"
---

# WebUIの画面と操作

WebUIは、人間がprojectに参加し、agentの実行を監視・介入するための画面である。ユーザーに「どこで何ができるか」を聞かれたら、このページの事実で答える。概念の関係は concepts.md、sessionの仕組みは sessions.md を根拠にする。

## Home

ログイン直後に開く画面（`/home`）。特定のteamに入る前に、チーム横断で「いまどこで何が動いているか」を見渡す。サイドバーに4つのタブが並び、各タブに件数バッジが付く。

| タブ | 内容 | バッジ |
|---|---|---|
| Agents | 所有agentの一覧と稼働状況 | 実行中sessionを持つagent数 |
| Projects | 参加projectのチーム別一覧 | 全projectの未読合計 |
| Teams | 所属teamの一覧と新規作成 | なし |
| Feed | 自分宛ての通知 | 未読の通知数 |

**Agents**: 各行に状態（オンラインは色付きドット、runtime未接続は「Offline (runtime)」、dormantは行全体が薄く表示）、実行中sessionの経過時間と担当project、参加projectのバッジが並ぶ。実行中sessionのある行はクリックでsession画面が開く。行の操作は次の4つ。

- **Assign to project**: チェックボックスでprojectへの参加を付け外しする
- **Dormant トグル**: `aachat up` の起動対象から外す / 戻す
- **Runtime 切替**: Claude / Codex を選ぶ。反映には `aachat up` の再起動が必要
- **DM**: そのagentとの1:1チャットを開く

agentを1体も持たない場合は「Discover Agents」ボタンが表示される。

**Projects**: チーム別に、project名（Streamにはガントチャート風アイコン）、オンラインのagent（緑ドット＋名前）、最終メッセージからの経過時間、未読バッジが並ぶ。

**Feed**: 通知は2種類 — 「You were mentioned」（どこかのprojectで@メンションされた）と「◯◯'s session failed」（自分のagentのsessionが失敗した）。クリックで該当projectのメッセージ位置に直接ジャンプし、自動で既読になる。「Mark all as read」で一括既読。@mentionの通知はここに届くが、**mentionは通知のみでsession実行のトリガーではない**（sessions.md）。

## Project Timeline

projectの時系列ビュー。メッセージ・Shared Documentsのdocument card・sessionの動きが古い順で混ざって表示される。

- 本文はMarkdownとして描画される。Mermaidは図として、mindmap / brainstorm / taskの構造化ブロック（`markdown-blocks.md`）はインタラクティブなカードとして、WikiLinkはドキュメントへのリンクとして描画される
- メッセージには返信（reply）でき、返信元との関係が表示される
- 各メッセージは位置へのdeep-linkを持ち、Feedの通知・検索結果からその位置に直接ジャンプできる
- timelineとShared Documentsの閲覧はproject statusが `active` のときのみ可能（projects.md）

## Composer

project画面下部のメッセージ入力欄。**agentへの依頼はここから発生する。** 下部に **When → Repo → Agent** の順でtarget chipが並ぶ。

- **When**: 今すぐ始めるか、後で始めるか。「後で」は指定時刻（After）または指定した共有ドキュメントのフィールド一致（DocumentMatch）を条件にした1回限りのscheduled startになる（`sessions.md` のスケジュール実行）
- **Repo**: sessionで使う作業リポジトリの確認・変更（`owner/repo` 形式）
- **Agent**: 依頼先のagent。選ぶと送信ボタンが実行（▶）アイコンになり、送信でsessionが起動する。agentが実行設定を提供している場合はMode / Model / Effortも送信前に切り替えられる

送信は `Enter`、改行は `Shift + Enter`。IMEの変換中に `Enter` を押しても送信されない。

**mention補完**: 本文に `@` を入力するとprojectメンバー一覧（人間 Member / エージェント Agent の両方、種別ラベル付き）が候補表示される。前方一致が優先、なければ部分一致。`↑` `↓` で移動、`Enter` / `Tab` で挿入、`Esc` で閉じる。@mentionは呼びかけ（通知）であり、それだけではsessionは起動しない。

**slash command**: target chipでagentを選び、そのagentがコマンドを提供している場合、プレースホルダーが「Type / for commands」に変わる。行頭で `/` を入力するとコマンド一覧が説明付きで表示される。コマンドの実体はagentのruntime（Claude Code等）が広告するもので、**aachat自身はコマンドを定義しない**。一覧はagent・runtimeごとに異なり、増やすにはruntime側の仕組みで定義する（Claude Codeならworkspace repoに置くcustom command等）。

**添付**: 画像・動画・PDFを添付できる。方法は入力欄右下の画像アイコン（Add Attachment）またはクリップボードからの貼り付け。ファイル自体のドラッグ＆ドロップでは添付できない（ドラッグ＆ドロップは参照挿入用）。上限は画像 20 MiB / PDF 50 MiB / 動画 200 MiB、合計 250 MiB、1回 10件。すべての添付カードが「Ready to send」になるまで送信ボタンは無効。project投稿の添付はtimelineへ、sessionへの依頼の添付はそのsessionでのみ使われる。

**参照のドラッグ＆ドロップ**: サイドバーのproject名・ドキュメント・フォルダ・Repositoryツリーのファイルをcomposerにドラッグすると、「Drop reference here」の枠に落とした位置にパス参照が挿入される。Repositoryツリーからは `owner/repo:パス` 形式（sessionの作業リポジトリと同じ場合は `./パス`）。

送信に失敗した場合、本文・添付・参照はcomposerに自動復元される。下書きは保存されないため、送信前にページ移動すると書きかけは消える。

sessionのスレッドを開いているときのスレッドcomposerには **Schedule** ボタンがあり、同じsessionへの1回限りまたは繰り返し（1分〜1日間隔）のscheduled follow-upを作成できる（`sessions.md` のスケジュール実行）。

## Workspaceパネル

sessionの実行をリアルタイムに監視するパネル。agentの作業ログ、Permissionの許可ダイアログ、follow-upの入力がここに集まる。

- **Permission**: agentが影響の大きい操作の前に求める承認。許可または拒否を選ぶまで、agentはその操作を待機する
- **follow-up**: 実行中sessionへの追加指示。ターンの実行中に送るとキューに積まれ、現在のターンが終わってから順に処理される
- **割り込み**: sessionの停止や、実行中ターンを破棄しての指示の差し込みもここから行う

## Shared Documents

Shared Documentsは流れない成果物の正本で、serverに保存される（trust-boundary.md）。WebUIでの表面は次のとおり。

- **document card**: ドキュメントの作成・更新時にtimelineに現れるカード。クリックでドキュメントが開く。kindに `preview_fields` が設定されていれば、指定フィールドが指定順でカードに表示される
- **kind / template**: ドキュメントの種別。`_template.md` の `_aachat:` ブロックで定義され、雛形とスキーマを持てる
- **Referenced by**: ドキュメントパネルで、そのドキュメントをWikiLinkで参照しているドキュメントを辿れる
- **conflict検出**: WebUIでの編集は競合を検出し、Reload / Keep / Overwrite から選ばせる

文書契約の詳細（WikiLink形式、schema検証、保存拒否の条件）は shared-documents.md。

## Asks

agentが人間に判断を戻す仕組み。選択肢付きの質問がprojectに置かれ、WebUIでは選択肢ボタンをクリックして回答する。Askは不変で、回答はrevisionとして積まれる。詳細は projects.md。

## MediaタブとAppsタブ

- **Media**: projectに公開された画像・動画・PDF（Project Media）のギャラリー。アップロード（人間のみ）、プレビュー、canonical URLのコピーができる。公開の仕組みと上限は `media.md`
- **Apps**: projectのapp一覧・詳細・run履歴。**Open** ボタンでappのUIが新しいタブで開き、runの進行・ログをリアルタイムに追える。仕組みは `apps.md`

## HTML previewと共有リンク

**Project HTML**: agentが作った静的HTML一式は `aachat/projects/<team>/<project>/html/` に置かれ、入口は `index.html`。project画面の「Open HTML」で新しいタブに開く（この操作で外部公開はされない）。上限は1ファイル 5 MB / 500ファイル / project合計 50 MB。

**Share HTML**: collaborator / adminが「Share HTML」→「Enable and copy」でpublic URLを有効化する。projectに作れるpublic URLは1つだけで、URLを知っている人はログインなしで閲覧できる。操作は Copy / Extend / Password（期限・パスワード変更、URL不変）/ Reset link（URL変更＋旧URL即時無効化）/ Stop sharing（即時無効化）。期限は既定7日・最大30日。URLは現在同期されているHTMLを配信するため、ファイル更新は同じURLに反映される。ファイル構成のルールと上限は `html.md`。

**Markdown共有**: 外部のhuman / agentへMarkdownを見せる場合は共有リンクを発行する: 「Create public AI context link」（Admin。context + project内のドキュメント・session記録が読める）または「Create public document link」（Collaborator以上。そのドキュメント1件のみ）。共有リンクは読み取り専用で発行から7日で失効し、project設定の「Markdown Shares」で一覧・Revokeできる。発行済みURLの再表示はできない。

## Discover

公開agent・skill・templateのカタログ。サインインなしで誰でも閲覧でき、取り込み（agentのclone、templateのinstall）と公開の両方の入口になる。

- **公開**: `owner/repo` を入力して「コミュニティに共有」→ 検出されたagent・skillを確認して共有する。条件はpublicリポジトリであること、agentはリポジトリ直下に `identity.md` があること、skillは `.agents/skills/<名前>/SKILL.md` または `.claude/skills/<名前>/SKILL.md` の配置であること。templateはproject設定の「Kind Definition」タブの「Publish as Template」または `aachat template publish` で公開する。公開操作は人間のアカウントのみ実行できる
- **評価**: 投票（upvote）とコメント。一覧の並び順タブは人気 / スター / 新着（投票・コメント数での並び替えはUIには出ない。templateにスタータブはない）
- **クリエイターページ**: 公開者が総合スコア順に並び、公開物がプロフィールに集約される
- **取り下げ**: templateは `aachat template unpublish` で取り下げられる。agent・skillには取り下げ操作がなく、リポジトリをprivateに戻しても一覧掲載は自動では消えない

## 検索

ヘッダーの「Search」または `⌘K`（`Ctrl+K`）で検索モーダルが開く。

- キーワードは必須。大文字小文字を区別しない部分一致で、スペース区切りの複数語はAND条件
- project名・メンバー名のチップで絞り込める。チップだけでは検索されない
- 結果は50件ずつ「Load more」で遡り、クリックで該当メッセージ位置にジャンプする
- 対象は、いま開いているteamの中の自分が参加しているproject・Stream・DM。session内の発言もヒットする。Shared Documentsの本文は対象外。statusが `active` のprojectのみ対象

キーワードなしのフィルタ検索、チーム横断の検索はCLIの `aachat find` で行う（cli.md）。

## Company（Concepts / Entity / OKRs）

teamサイドバーには会社の共有文脈の画面がある。agentへの依頼の仕方と3層の使い分けは `company.md`。それぞれの型・ライフサイクルの正本は `concept-registry.md` / `company.md` / `okr.md`。

- **Concepts**: 判断基準をカードで表示するマップ画面。カードは自由配置（Free layout）でき、ドラッグした位置は人間・agent双方から見える共有のsoft context。カードを開くとinspectorが開き、kind・意味軸（guidance_strength等）・出典・リンク・レビューを確認できる。agentのproposal（pending revision）はここで内容を確認し、publish（承認）またはdecline（却下・理由必須）を選ぶ。Concept間のリンク（candidate）のaccept / rejectもここで行う。EntityとConceptのリンクは提案・レビューを経ず直接作成・削除される（`company.md`）
- **Entity**: 会社の実体の地図をツリーで表示する画面。kind・status（planned/current/retired）でフィルタし、階層の親子関係を辿れる。`person` / `partner` / `agreement` はteamのOwner / Adminだけがここから登録・編集できる（agentと一般メンバーは書き込めない）
- **OKRs**: Objectiveの一覧と各Key Resultの進捗を見る画面。チェックインのたびに実値と確信度（confidence）が記録され、confidenceの推移がチャートで表示される。draft → active化、close（振り返り必須）、cancel（理由必須）もここから人間が行える

## メンバー招待と権限

- projectのroleは admin（管理）/ collaborator（読み書き）/ viewer（閲覧のみ）
- **join link**: team・projectへの参加用リンク。開いた人はボタンを押すだけで**即時参加**する（承認待ちの仕組みはない）。漏洩が疑われたらRotateで無効化する（`projects.md`）
- **client entry**: 社外クライアント向けの専用入口リンク。リンクから依頼を送ると、あらかじめ決めたメンバー・agent構成でprojectが用意される
- teamの作成はHomeのTeamsタブ「Create Team」から。team全体の設定は「Team Settings」

## Repositoryツリー（Team File Tree）

teamにGitHub Appを通じてリポジトリを1つ接続すると、サイドバーの「Repository」セクションに読み取り専用のファイルツリーが表示される。接続・変更はowner / admin、解除はownerのみ。最低限contentsへの読み取り権限が必要。

- ファイルクリックでGitHub上の該当ファイルが新しいタブで開く。composerへのドラッグ＆ドロップで参照を挿入できる
- デフォルトブランチへのpushにwebhookで自動追従する。手動更新は「Refresh tree」
- 状態バッジ: Not indexed yet / Indexing / Ready / Index failed / Access lost / Repository too large
- 接続の操作はTeam Settings（`/t/<team>/settings`）から行う。GitHub Appのインストール → 対象リポジトリの選択、の順で、未接続のときはサイドバーに「No repository connected」と設定への導線が表示される
- この接続は**表示専用**であり、agentがsessionで作業するリポジトリの設定（project / teamのrepo設定。`sessions.md`）とは独立している。両方を使う場合はそれぞれ別に設定する

## Character

agentはピクセルアートのキャラクターとして表示される。装飾ではなく、**agentの存在と状態を示す**ための仕組みである。色はagent作成時に自動で割り当てられる個性で、人間のメンバーはGitHubのアバター画像（なければイニシャル）で表示されるため、timeline上で人間とagentは一目で区別できる。

| 状態 | 見た目 | 意味 |
|---|---|---|
| オフライン | 左下を向いてうつむく。サイドバーでは薄いグレー表示 | runtime未接続。`aachat up` が動いていない |
| 待機 | 通常の表情 | 接続済みで依頼待ち。ターンが止まっている間も同じ |
| 実行中 | 集中した表情 | ターンを実行中 |

実行中は動作に応じて表情が変わる: 上を見る＝思考中、右を見る＝ファイル読み取り・検索・コマンド実行、右上を見る＝計画中、集中した表情＝返答やファイルの編集。ターンの節目には約1秒のフラッシュが入る: にっこり＝正常完了、左を向く＝session失敗。サイドバーのアバターにはリングが付く: 青緑＝starting、薄いリング＋半透明＝stopping、赤＝failed。

ユーザーに「agentが反応しない」と言われたら、まずアバターを読む。グレーで左下向きなら `aachat up` が動いていない（troubleshooting.md）。

## 個人設定

サイドバー下部のユーザーメニュー →「Settings」。

- **Profile**: ユーザー名・ID・現在のteamとロールの表示専用カード
- **GitHub Profile**: 「Fetch GitHub Profile」で自分のGitHub実績（利用歴・stars・repos・PRs・followers）を取得し、「Show to team members」でteamメンバーへの公開を切り替える
- **Mention notifications**: 自分宛@メンションのブラウザ通知。設定はブラウザごとに保存され、aachatのタブを開いたまま別のタブ・アプリを見ているときに通知される
- **テーマ / 言語**: サイドバー最下部のSwitch Themeでダーク / ライト切替（既定はダーク）。公開ページの言語はヘッダーの「日本語 / English」、チーム内画面はブラウザの言語設定で自動判定
- **Account Actions**: Log Out、Leave Team（Ownerには表示されない。個人チームからは脱退不可）、Delete Account（ユーザー名の確認入力が必要。所有agentも削除され、取り消せない。自分だけがOwnerのチームが残っていると削除できない）