1. 状態名を具体的にする
「処理中」だけでなく、「文字を読み取っています」のように対象を示します。
Knowledge OS Product Design System
Knowledge OS全体で発生する処理状態、接続状態、資料状態、権限状態、失敗・復旧状態を統一するための設計ガイドラインです。各状態について、表示、操作、色、Lucideアイコン、文言、次の操作を定義します。
Introduction
Knowledge OSでは、資料の追加、文字の読み取り、検索準備、AI接続、外部送信、権限確認など、複数の処理が並行して動きます。
同じ「処理中」でも、資料登録中なのか、Local AIの起動中なのか、検索準備中なのかによって、利用者が待つべきか、別の操作ができるかが異なります。
01 — State Principles
「処理中」だけでなく、「文字を読み取っています」のように対象を示します。
待つ、確認する、再試行する、設定を開くなど、次にできることを示します。
画面全体を止めず、利用できる機能は残します。
アイコン、見出し、説明文を必ず併用します。
成功した対象と失敗した対象を分けて表示します。
再試行可能か、設定変更が必要か、管理者対応かを明示します。
| 要素 | 内容 |
|---|---|
| 状態名 | 処理中、要確認、接続できませんなど |
| 説明 | 何が起きているか |
| アイコン | Lucide Iconsで統一 |
| 色 | 意味に対応する標準色 |
| 操作可能範囲 | 利用可能・利用不可の機能 |
| 次の操作 | 待つ、確認、再試行、設定など |
02 — Processing States
| 状態 | 色 | Lucide Icon | 操作 | 標準文言 | 次の操作 |
|---|---|---|---|---|---|
| 未処理 | Neutral | Circle | 開始可能 | まだ処理されていません | 処理を開始 |
| 処理待ち | Primary Soft | Clock3 | 取消可能 | 処理を待っています | 待つ / 取り消す |
| 処理中 | Primary | LoaderCircle | 対象により中止可能 | 文字を読み取っています… | 待つ / 中止 |
| 完了 | Success | CircleCheck | 次工程へ進める | 処理が完了しました | 結果を見る |
| 一部完了 | Warning | CircleDashed | 成功分を利用可能 | 一部の処理が完了しました | 失敗した項目を確認 |
| 要確認 | Warning | TriangleAlert | 確認後に確定可能 | 内容の確認が必要です | 確認する |
| 失敗 | Error | CircleX | 結果利用不可 | 処理を完了できませんでした | 原因確認 / 再試行 |
| 中止 | Neutral | OctagonX | 再開または再実行可能 | 処理を中止しました | もう一度実行 |
| 再処理可能 | Primary Soft | RotateCcw | 再実行可能 | もう一度処理できます | 再処理する |
2件の資料が処理を待っています。
次の操作:そのままお待ちください。
読み取り内容に不明な箇所があります。
次の操作:元の資料と比較してください。
保存先へ書き込めませんでした。
次の操作:保存先を確認して再試行してください。
03 — Connection States
| 状態 | 色 | Lucide Icon | 利用可能な操作 | 標準文言 | 次の操作 |
|---|---|---|---|---|---|
| Local AI接続済み | Success | CircleCheck | AI機能利用可 | ローカルAIに接続されています | AIに聞く |
| Local AI停止中 | Warning | Power | 資料閲覧・通常検索可 | ローカルAIが停止しています | 起動する / 設定確認 |
| クラウドAI未設定 | Neutral | CloudOff | ローカルAI利用可 | クラウドAIはまだ設定されていません | 設定する |
| APIキー無効 | Error | KeyRound | クラウドAI利用不可 | APIキーを利用できません | APIキーを更新 |
| オフライン | Warning | WifiOff | ローカル機能のみ可 | インターネットに接続されていません | 通信確認 / ローカル利用 |
| Runtime起動中 | Primary | LoaderCircle | AI機能待機 | ローカルAIを起動しています… | 待つ |
| モデル未配置 | Warning | PackageX | Local AI利用不可 | 利用できるAIモデルがありません | モデルを追加 |
| OCR利用不可 | Warning | ScanLine | テキスト資料は利用可 | 画像やPDFから文字を読み取れません | 設定確認 / 手動確認 |
04 — Document States
| 状態 | 色 | Lucide Icon | 表示内容 | 操作 | 次の操作 |
|---|---|---|---|---|---|
| 登録済み | Success | FileCheck2 | 資料名・登録日 | 閲覧・整理 | 資料を開く |
| 文字読み取り済み | Success | ScanText | 読み取り完了 | 検索・AI利用 | 内容を確認 |
| 読み取り要確認 | Warning | FileWarning | 不明箇所・対象ページ | 確認・修正 | 元資料と比較 |
| 検索準備中 | Primary | LoaderCircle | 準備中の説明 | 閲覧のみ | 待つ |
| 重複候補 | Warning | CopyCheck | 既存資料との比較 | 既存を開く・別版登録 | 重複を確認 |
| 元ファイルなし | Error | FileX2 | 見つからない保存場所 | メタ情報閲覧のみ | 元ファイルを指定 |
| インデックス更新待ち | Primary Soft | RefreshCw | 更新待ち | 閲覧可・検索結果は旧状態 | 待つ / 更新する |
「登録済み」「読み取り要確認」「検索準備中」など複数状態を持つ場合は、最も対応が必要な状態を主状態として表示します。
05 — Permission States
| 状態 | 色 | Lucide Icon | 許可する操作 | 標準文言 | 次の操作 |
|---|---|---|---|---|---|
| 閲覧可能 | Success | Eye | 閲覧・検索 | この資料を閲覧できます | 資料を開く |
| 編集可能 | Primary | Pencil | 閲覧・編集・保存 | この資料を編集できます | 編集する |
| 削除可能 | Warning | Trash2 | 削除 | この資料を削除できます | 削除確認 |
| 管理者のみ | Purple | ShieldCheck | 管理者のみ操作 | この操作は管理者のみ実行できます | 管理者へ確認 |
| 権限なし | Error | ShieldX | 操作不可 | この資料を開く権限がありません | 管理者へ申請 |
| 読み取り専用 | Neutral | LockKeyhole | 閲覧のみ | この資料は読み取り専用です | 閲覧を続ける |
この資料は読み取り専用です。内容は確認できますが、変更は保存できません。
403 Forbidden
06 — Failure & Recovery
| 分類 | 例 | 標準対応 |
|---|---|---|
| 一時的な失敗 | 通信切断、タイムアウト | 再試行を案内 |
| 設定不足 | APIキー未設定、保存先未設定 | 設定画面へ案内 |
| 入力・資料の問題 | 破損ファイル、非対応形式 | 対象と修正方法を案内 |
| 権限の問題 | 閲覧不可、書き込み不可 | 必要権限と確認先を案内 |
| 復旧不能 | 元ファイル削除、データ破損 | 代替手段・サポート案内 |
通信や一時的な失敗に使用します。
APIキー、保存先、接続先の問題に使用します。
利用者だけでは復旧できない場合に使用します。
07 — State Priority
1つの対象が複数状態を持つ場合、利用者の対応が必要な状態を優先して表示します。
画面全体をエラーやLoadingに置き換えるのは、主要コンテンツを一切表示できない場合に限ります。
08 — State Transitions
処理開始前。利用者は開始できます。
キューへ登録済み。必要に応じて取り消せます。
現在の処理内容と進捗を表示します。
結果に応じて次の操作を表示します。
失敗または要確認の状態から再処理する場合は、前回結果を保持したまま再処理を開始します。
09 — Visual Language
| 意味 | 色 | 使用例 |
|---|---|---|
| 通常・未設定 | Neutral | 未処理、読み取り専用 |
| 進行中・操作可能 | Primary | 処理中、検索準備中 |
| 成功・利用可能 | Success | 完了、接続済み |
| 注意・確認必要 | Warning | 要確認、重複候補 |
| 失敗・利用不可 | Error | 失敗、APIキー無効 |
| 管理者・特別権限 | Purple | 管理者のみ |
| 用途 | Icon |
|---|---|
| 待機 | Clock3 |
| 処理中 | LoaderCircle |
| 完了 | CircleCheck |
| 注意 | TriangleAlert |
| 失敗 | CircleX |
| 再処理 | RotateCcw |
| 接続 | PlugZap |
| オフライン | WifiOff |
| 権限 | ShieldCheck |
| 権限なし | ShieldX |
状態見出し:
資料の内容を確認しています
説明:
この処理には数分かかる場合があります。
操作:
[処理を中止]
次の操作:
完了すると、検索とAIへの質問を利用できます。
10 — Cursor Rules
Knowledge OS Design Principles v1.0.0
Phase 8「States, Permissions & Failure Guidelines」に従って実装してください。
必須条件:
- 状態は文字・色・Lucide Iconを組み合わせて表示する
- 色だけで状態を表現しない
- 状態名だけでなく、説明と次の操作を表示する
- 通常、Loading、Empty、Success、Partial Success、Warning、Errorを実装する
- 一部失敗を全失敗として扱わない
- 画面全体を不要に操作不能にしない
- 利用可能な代替機能を残す
- 権限エラーを技術コードのまま表示しない
- 再試行時に重複処理が起きないようにする
- 主状態は1つに絞り、補助状態は詳細表示にする
- 状態遷移を型として定義する
- 未定義状態へ到達した場合の安全なフォールバックを用意する
11 — Types & Components
export type ProcessingStatus =
| "not_started"
| "queued"
| "processing"
| "completed"
| "partially_completed"
| "needs_review"
| "failed"
| "cancelled"
| "retry_available";
export type ConnectionStatus =
| "local_ai_connected"
| "local_ai_stopped"
| "cloud_ai_not_configured"
| "api_key_invalid"
| "offline"
| "runtime_starting"
| "model_missing"
| "ocr_unavailable";
export type DocumentStatus =
| "registered"
| "text_extracted"
| "needs_text_review"
| "search_preparing"
| "duplicate_candidate"
| "source_file_missing"
| "index_update_pending";
export type PermissionStatus =
| "view"
| "edit"
| "delete"
| "admin_only"
| "denied"
| "read_only";
components/
└── states/
├── AppStatusBadge.vue
├── AppStatusMessage.vue
├── AppLoadingState.vue
├── AppErrorState.vue
├── AppPartialSuccessState.vue
├── AppPermissionNotice.vue
├── AppConnectionStatus.vue
└── AppRecoveryActions.vue
状態ごとの色、アイコン、標準文言、操作は、画面コンポーネント内へ直接記述せず、共通定義へまとめます。
export const processingStatusDefinition = {
processing: {
label: "処理中",
icon: "LoaderCircle",
tone: "primary",
defaultMessage: "処理しています…",
},
needs_review: {
label: "要確認",
icon: "TriangleAlert",
tone: "warning",
defaultMessage: "内容の確認が必要です",
},
};
12 — Review Checklist
Definition of Done
Closing
システム内部では、待機、接続、解析、保存、権限確認など、多くの処理が行われています。
利用者が知りたいのは技術的な内部状態ではなく、「今どうなっているか」「何ができるか」「次に何をすればよいか」です。