Skip to content

web-ui-guide.md

Latest commit

 

History

History
executable file
·
570 lines (416 loc) · 17.5 KB

web-ui-guide.md

File metadata and controls

executable file
·
570 lines (416 loc) · 17.5 KB
Raw

Web UI ガイド

バージョン: v0.2.0-alpha

English | Deutsch | 中文 | 繁體中文 | Español | 日本語 | 한국어 | Čeština | Русский

概要

Web UI は、シリコンビーイングの管理、システム状態のモニタリング、AI エージェントとの対話のための包括的なインターフェースを提供します。システムは純サーバーサイドレンダリングアーキテクチャを採用し、ゼロフロントエンドフレームワーク依存で、H、CssBuilder、JsBuilder ビルダーを通じて HTML、CSS、JavaScript を生成します。

アクセス

デフォルト URL：http://localhost:8080

ナビゲーション

主要セクション

  1. ダッシュボード - システム概要とメトリクス
  2. ビーイング - シリコンビーイングの管理
  3. チャット - ビーイングとの対話（ファイルアップロード、リアルタイム SSE 対応）
  4. チャット履歴 - シリコンビーイングのチャット履歴表示（セッションリスト、メッセージ詳細）
  5. タスク - タスク管理（個人タスク）
  6. タイマー - タイマー設定（作成、一時停止、実行履歴）
  7. 設定 - システム設定（AI クライアント、ローカライゼーション）
  8. パーミッション - アクセス制御（ACL 管理、パーミッションクエリ）
  9. ログ - システムログ（レベル別フィルタリング、時間範囲クエリ）
  10. 監査 - トークン使用と監査証跡
  11. メモリ - ビーイングメモリ（タイムラインビュー、高度なフィルタリング）
  12. ナレッジ - ナレッジベース（トリプル管理、パス発見）
  13. コードブラウザ - コード探索（ファイルツリー、シンタックスハイライト）
  14. コードエディタ - ホバーヒント付きコード編集（Monaco Editor）
  15. プロジェクト - プロジェクト管理（ワークスペース、タスク、ワークノート）
  16. エグゼキューター - エグゼキューター管理（ディスク、ネットワーク、コマンドライン）
  17. ヘルプ - ヘルプドキュメントシステム（多言語サポート、トピック検索）
  18. バージョン情報 - システム情報とバージョン

ダッシュボード

機能

  • システムパフォーマンスメトリクス（CPU、メモリ、稼働時間）
  • ビーイング状態概要
  • AI 使用統計
  • クイックアクション

リアルタイム更新

SSE（サーバー送信イベント）を使用してリアルタイムデータを取得：

const dashboard = new EventSource('/api/dashboard/events');
dashboard.onmessage = (event) => {
    const data = JSON.parse(event.data);
    updateMetrics(data);
};

ビーイング管理

ビーイングリスト

すべてのビーイングを表示。内容：

  • 名前と ID
  • 現在の状態（実行中/停止中/エラー）
  • ソウルファイルリンク
  • クイックアクション（起動/停止/設定）

ビーイング詳細

  • 完全な設定
  • ソウルファイルエディタ
  • タスク履歴
  • メモリビューア
  • パフォーマンスメトリクス

ビーイングの作成

  1. 新規ビーイングを作成をクリック
  2. 入力：
    • 名前
    • ソウルコンテンツ（Markdown エディタ）
    • 初期設定
  3. 作成をクリック

チャットインターフェース

機能

  • リアルタイムメッセージストリーム
  • メッセージ履歴
  • マルチセッションサポート
  • ツールコールの可視化

チャットの使用

  1. ビーイングを選択
  2. メッセージを入力
  3. ストリーミング応答を表示
  4. ツール実行をリアルタイムで表示

ツールコール表示

AI がツールをコールする場合：

🔧 ツール：calendar
📥 入力：{"date": "2026-04-20"}
📤 出力："旧暦四月初三"

設定

AI クライアント

AI バックエンドの設定：

  • Ollama（ローカル）
  • 百錬（クラウド）
  • Volcengine Ark（クラウド）
  • Herdsman（ローカル/クラウド、認証不要）
  • Meituan LongCat（クラウド）
  • Qiniu Cloud AI（クラウド）
  • カスタムクライアント

ストレージ設定

  • Default 版：ベースパス、時間インデックス、クリーンアップ戦略
  • Fast 版：SpeedyPackストレージエンジン設定、.spk ファイル管理、自動圧縮設定

ローカライゼーション

34種類の言語バリアントを切り替え：

  • 中国語（6種類）：簡体字中国語、繁体字中国語、シンガポール中国語、マカオ中国語、台湾中国語、マレーシア中国語
  • 英語（10種類）：米国、英国、カナダ、オーストラリア、インド、シンガポール、南アフリカ、アイルランド、ニュージーランド、マレーシア
  • スペイン語（2種類）：スペイン、メキシコ
  • ドイツ語（5種類）：ドイツ、オーストリア、スイス、ルクセンブルク、リヒテンシュタイン
  • フランス語（3種類）：フランス、カナダ、スイス
  • 日本語、韓国語、チェコ語
  • ロシア語、ポルトガル語（2種類）、イタリア語、オランダ語、ポーランド語、スウェーデン語

スキンシステム

利用可能なスキン

  1. Admin - プロフェッショナル管理インターフェース
  2. Chat - 会話中心のデザイン
  3. Creative - クリエイティブでアーティスティックなスタイル
  4. Dev - 開発者志向のレイアウト
  5. HighContrast - ハイコントラストテーマ（Fast バージョン）
  6. Minimal - ミニマリストテーマ（Fast バージョン）
  7. Light - ライトテーマ（Fast バージョン）

スキンの切り替え

  1. 設定（ギアアイコン）をクリック
  2. スキンを選択
  3. 希望のスキンを選択
  4. インターフェースがすぐに更新

カスタムスキン

ISkin を実装してカスタムスキンを作成：

public class MySkin : ISkin
{
    public string Name => "MySkin";

    public string GetCss()
    {
        return ":root { --primary: #color; }";
    }
}

パーミッション管理

パーミッションの表示

  • すべてのパーミッションルールをリスト
  • ユーザーまたはリソースでフィルタ
  • 有効期限の表示

パーミッションルールの追加

  1. ルールを追加をクリック
  2. 設定：
    • パーミッションタイプ（例：FileAccess, NetworkAccess）
    • リソースプレフィックス（例：C:\Projects, api.github.com）
    • 許可/拒否
    • 説明
  3. 保存

監査証跡

すべてのパーミッション決定を表示：

  • タイムスタンプ
  • ユーザー
  • リソース
  • 決定
  • 理由

ツールパーミッション管理

シリコンビーイングとプロジェクトのツール操作パーミッションを管理：

  1. シリコンビーイングツールパーミッション：

    • ビーイング → ビーイングを選択 → ツールパーミッションに移動
    • 現在のパーミッション設定を表示
    • 操作ごとに許可/拒否を設定
    • パーミッションテンプレートの適用（readonly/restricted/full）

  2. プロジェクトツールパーミッション：

    • プロジェクト → プロジェクトを選択 → ツールパーミッションに移動
    • プロジェクトレベルのツールパーミッションはシリコンビーイングレベルから独立
    • プロジェクト間のパーミッション分離を実現

タスク管理

タスクリスト

  • すべてのタスクとその状態
  • ビーイングまたは状態でフィルタ
  • 優先度インジケーター

タスク詳細

  • 説明
  • 優先度
  • 締切
  • 実行履歴
  • 結果出力

タスクの作成

  1. タスクを作成をクリック
  2. 入力：
    • ビーイング割り当て
    • 説明
    • 優先度（1-10）
    • 締切
  3. 作成

タイマー管理

アクティブタイマー

  • 実行中のタイマーリスト
  • 次回実行時間
  • 繰り返し状態

タイマーの作成

  1. タイマーを作成をクリック
  2. 設定：
    • ビーイング割り当て
    • 間隔または cron 式
    • 実行するアクション
    • 繰り返し設定
  3. 起動

ログビューア

機能

  • レベル別フィルタリング（情報/警告/エラー）
  • キーワード検索
  • 時間範囲選択
  • リアルタイム更新

ログ詳細

各ログエントリーが表示：

  • タイムスタンプ
  • レベル
  • ソース
  • メッセージ
  • スタックトレース（エラー用）

監査レポート

トークン使用

  • 使用された総トークン
  • モデル別内訳
  • コスト計算
  • 時間ベースのチャート

レポートのエクスポート

監査データをダウンロード：

  • CSV 形式
  • 日付範囲選択
  • ビーイングまたはモデルでフィルタ

コードエディタ

機能

  • シンタックスハイライト（Monaco Editor）
  • コード補完
  • 識別子のホバーヒント
  • リアルタイムコンパイル

ホバーヒント

任意の識別子にマウスをホバーして表示：

  • 型情報
  • ドキュメント
  • 定義位置
  • 参照

チャット履歴表示

機能

  • シリコンビーイングチャット履歴ブラウザ
  • セッションリスト表示
  • メッセージ詳細表示
  • タイムラインビュー

チャット履歴の使用

  1. ビーイングページに移動
  2. シリコンビーイングのチャット履歴リンクをクリック
  3. セッションリストを表示：
    • セッションタイトル
    • 作成時間
    • メッセージ数
  4. セッションをクリックして詳細を表示：
    • 完全なメッセージ履歴
    • タイムスタンプ
    • 送信者情報
    • ツールコール記録

技術実装

  • コントローラー：ChatHistoryController
  • ビューモデル：ChatHistoryViewModel
  • ビュー：
    • ChatHistoryListView - セッションリスト
    • ChatHistoryDetailView - メッセージ詳細
  • API ルート：
    • /api/chat-history/{beingId}/conversations - セッションリスト取得
    • /api/chat-history/{beingId}/conversation/{conversationId} - メッセージ詳細取得

ファイルアップロード

機能

  • ファイルソースダイアログ
  • 複数ファイルアップロードサポート
  • ファイルメタデータ管理
  • アップロード進行状況表示

ファイルアップロードの使用

  1. チャットインターフェースでファイルをアップロードボタンをクリック
  2. ファイルソースダイアログが開く
  3. ファイルソースを選択：
    • ローカルファイル
    • ファイルシステムパス
  4. ファイルを選択（複数選択対応）
  5. アップロードを確認
  6. ファイル情報がメッセージに添付される

サポートされるファイルタイプ

  • テキストファイル（.txt, .md, .json, .xml, 等）
  • コードファイル（.cs, .js, .py, .java, 等）
  • 設定ファイル（.yml, .yaml, .ini, .conf, 等）
  • ドキュメントファイル（.csv, .log, 等）

ローディングインジケーター

機能

  • チャットページローディング状態表示
  • シリコンキュレーターセッション自動選択
  • データローディング進行状況フィードバック

動作

  • ページ読み込み時にローディングアニメーションを表示
  • データ読み込み完了後に自動的に非表示
  • シリコンキュレーターセッションが存在する場合、自動的に選択
  • 多言語ローディングプロンプトテキスト

ヘルプドキュメントシステム（新規）

機能概要

ヘルプドキュメントシステムは、シリコンビーイングとユーザーに多言語のヘルプドキュメントサポートを提供します。

ヘルプドキュメントの使用

  1. ヘルプページに移動
  2. ヘルプトピックリストを表示：
    • クイックスタートガイド
    • ツール使用リファレンス
    • パーミッション管理ガイド
    • トラブルシューティングマニュアル
    • 開発ガイド
  3. トピックをクリックして詳細を表示：
    • 構造化されたドキュメントコンテンツ（Markdown レンダリング）
    • 多言語サポート（システムローカライゼーション設定に従う）
    • 関連トピックの推奨
  4. 検索機能を使用して迅速に位置特定：
    • キーワード検索（中国語、英語対応）
    • 検索結果は関連性でソート

シリコンビーイングによるヘルプアクセス

シリコンビーイングは help ツールを通じてヘルプドキュメントにアクセス可能：

{
  "action": "get_topics"
}

技術実装

  • コントローラー：HelpController
  • ツール：HelpTool
  • API ルート：
    • /api/help - ヘルプトピックリスト取得
    • /api/help/{topicId} - トピック詳細取得
    • /api/help/search?q=keyword - ヘルプドキュメント検索

プロジェクトワークスペース（新規）

機能概要

プロジェクトワークスペースは、構造化された作業環境を提供し、プロジェクト管理、タスク追跡、ワークノートをサポートします。

プロジェクト管理

  1. プロジェクトの作成：
    • プロジェクト名と説明
    • プロジェクトタグ（分類）
    • プロジェクト状態（進行中、完了、アーカイブ済み）
  2. プロジェクト詳細の表示：
    • プロジェクト基本情報
    • 関連タスクリスト
    • ワークノートリスト
    • プロジェクト進捗統計
  3. プロジェクトのアーカイブ：履歴データを保持するが、アクティブではなくなる
  4. プロジェクトロール管理：
    • シリコンビーイングにプロジェクトロールを割り当て（例：developer、reviewer、manager）
    • ロール割り当ての削除
    • プロジェクトメンバーとロールリストの表示
  5. プロジェクトワークフロー：
    • ワークフローテンプレートリストの表示
    • プロジェクトにワークフローテンプレートをバインド
    • ワークフローインスタンス状態の表示
    • ワークフロー実行ログの表示

ワークノート（プライベート）

シリコンビーイングの個人ワークノート。日記帳に類似：

  1. ノートの作成：
    • 要約（簡単な説明）
    • コンテンツ（Markdown 形式対応）
    • キーワード（検索用）
    • 自動タイムスタンプ記録
  2. ノートの管理：
    • タイムラインで閲覧（ページネーションデザイン）
    • ノートの検索（キーワード、要約、コンテンツで）
    • 目次を生成（ノート構造の迅速な閲覧）
    • ノートの更新と削除
  3. パーミッション制御：
    • デフォルトでプライベート。ビーイング自身のみアクセス可能
    • シリコンキュレーターはすべてのノートを管理可能

技術実装

  • コントローラー：WorkNoteController
  • ツール：WorkNoteTool、ProjectTool、ProjectWorkNoteTool
  • API ルート：
    • /api/worknotes - ワークノートリスト取得
    • /api/worknotes/{id} - ノート詳細取得
    • /api/worknotes/search?q=keyword - ノート検索
    • /api/worknotes/directory - ノート目次生成
    • /api/projects - プロジェクト管理 API

レスポンシブデザイン

Web UI は異なる画面サイズに適応：

  • デスクトップ：完全なレイアウト
  • タブレット：圧縮されたサイドバー
  • モバイル：折りたたみメニュー

キーボードショートカット

ショートカット アクション
Ctrl+K クイック検索
Ctrl+B サイドバー切り替え
Ctrl+Enter メッセージ送信
Esc キャンセル/閉じる

トラブルシューティング

接続できない

確認：

  • サーバーが実行中
  • ポート 8080 がブロックされていない
  • ファイアウォール設定

SSE が機能しない

確認：

  • ブラウザが SSE をサポート
  • プロキシが SSE をバッファリングしていない
  • ネットワークの安定性

パフォーマンスが遅い

最適化：

  • ログの詳細度を下げる
  • 古い監査データをクリーンアップ
  • システムリソースを確認

次のステップ