Knowledge OS Product Design System

Phase 8
States, Permissions & Failure Guidelines

Knowledge OS全体で発生する処理状態、接続状態、資料状態、権限状態、失敗・復旧状態を統一するための設計ガイドラインです。各状態について、表示、操作、色、Lucideアイコン、文言、次の操作を定義します。

DOCUMENTKnowledge OS Design Principles v1.0.0
PHASEPhase 8 — States, Permissions & Failure
TARGETUI / State / Permission / Recovery

Introduction

状態を、色だけで伝えない

Knowledge OSでは、資料の追加、文字の読み取り、検索準備、AI接続、外部送信、権限確認など、複数の処理が並行して動きます。

同じ「処理中」でも、資料登録中なのか、Local AIの起動中なのか、検索準備中なのかによって、利用者が待つべきか、別の操作ができるかが異なります。

状態は「名前・説明・アイコン・色・操作」の組み合わせで伝えます。緑の点、赤い文字、スピナーだけで状態を表現してはいけません。

この章で定義するもの

  1. 状態設計の原則
  2. 処理状態
  3. 接続状態
  4. 資料状態
  5. 権限状態
  6. 失敗・復旧状態
  7. 状態の優先順位
  8. 状態遷移
  9. 色・アイコン・文言
  10. Cursor向け実装ルール
  11. 状態型とコンポーネント
  12. レビュー基準

01 — State Principles

1状態設計の原則

1. 状態名を具体的にする

「処理中」だけでなく、「文字を読み取っています」のように対象を示します。

2. 次の操作を示す

待つ、確認する、再試行する、設定を開くなど、次にできることを示します。

3. 操作可能範囲を明確にする

画面全体を止めず、利用できる機能は残します。

4. 状態を色だけで伝えない

アイコン、見出し、説明文を必ず併用します。

5. 一部失敗を全失敗にしない

成功した対象と失敗した対象を分けて表示します。

6. 復旧可能性を伝える

再試行可能か、設定変更が必要か、管理者対応かを明示します。

状態表示に必要な6要素

要素内容
状態名処理中、要確認、接続できませんなど
説明何が起きているか
アイコンLucide Iconsで統一
意味に対応する標準色
操作可能範囲利用可能・利用不可の機能
次の操作待つ、確認、再試行、設定など
状態名だけを表示しない「失敗」「停止中」「未設定」だけでは、利用者はどうすればよいか分かりません。

02 — Processing States

2処理状態

状態Lucide Icon操作標準文言次の操作
未処理NeutralCircle開始可能まだ処理されていません処理を開始
処理待ちPrimary SoftClock3取消可能処理を待っています待つ / 取り消す
処理中PrimaryLoaderCircle対象により中止可能文字を読み取っています…待つ / 中止
完了SuccessCircleCheck次工程へ進める処理が完了しました結果を見る
一部完了WarningCircleDashed成功分を利用可能一部の処理が完了しました失敗した項目を確認
要確認WarningTriangleAlert確認後に確定可能内容の確認が必要です確認する
失敗ErrorCircleX結果利用不可処理を完了できませんでした原因確認 / 再試行
中止NeutralOctagonX再開または再実行可能処理を中止しましたもう一度実行
再処理可能Primary SoftRotateCcw再実行可能もう一度処理できます再処理する

処理状態カードの例

処理待ち

処理待ち

2件の資料が処理を待っています。

次の操作:そのままお待ちください。

要確認

要確認

読み取り内容に不明な箇所があります。

次の操作:元の資料と比較してください。

失敗

失敗

保存先へ書き込めませんでした。

次の操作:保存先を確認して再試行してください。

処理中の操作ルール

03 — Connection States

3接続状態

状態Lucide Icon利用可能な操作標準文言次の操作
Local AI接続済みSuccessCircleCheckAI機能利用可ローカルAIに接続されていますAIに聞く
Local AI停止中WarningPower資料閲覧・通常検索可ローカルAIが停止しています起動する / 設定確認
クラウドAI未設定NeutralCloudOffローカルAI利用可クラウドAIはまだ設定されていません設定する
APIキー無効ErrorKeyRoundクラウドAI利用不可APIキーを利用できませんAPIキーを更新
オフラインWarningWifiOffローカル機能のみ可インターネットに接続されていません通信確認 / ローカル利用
Runtime起動中PrimaryLoaderCircleAI機能待機ローカルAIを起動しています…待つ
モデル未配置WarningPackageXLocal AI利用不可利用できるAIモデルがありませんモデルを追加
OCR利用不可WarningScanLineテキスト資料は利用可画像やPDFから文字を読み取れません設定確認 / 手動確認

接続状態の表示場所

Local AIが停止していても資料閲覧を止めないAI機能の障害を、Knowledge OS全体の障害として扱ってはいけません。

04 — Document States

4資料状態

状態Lucide Icon表示内容操作次の操作
登録済みSuccessFileCheck2資料名・登録日閲覧・整理資料を開く
文字読み取り済みSuccessScanText読み取り完了検索・AI利用内容を確認
読み取り要確認WarningFileWarning不明箇所・対象ページ確認・修正元資料と比較
検索準備中PrimaryLoaderCircle準備中の説明閲覧のみ待つ
重複候補WarningCopyCheck既存資料との比較既存を開く・別版登録重複を確認
元ファイルなしErrorFileX2見つからない保存場所メタ情報閲覧のみ元ファイルを指定
インデックス更新待ちPrimary SoftRefreshCw更新待ち閲覧可・検索結果は旧状態待つ / 更新する

資料一覧での表示

状態が複数ある場合

「登録済み」「読み取り要確認」「検索準備中」など複数状態を持つ場合は、最も対応が必要な状態を主状態として表示します。

主状態の例登録済みでも読み取り要確認であれば、一覧上の主状態は「要確認」とします。

05 — Permission States

5権限状態

状態Lucide Icon許可する操作標準文言次の操作
閲覧可能SuccessEye閲覧・検索この資料を閲覧できます資料を開く
編集可能PrimaryPencil閲覧・編集・保存この資料を編集できます編集する
削除可能WarningTrash2削除この資料を削除できます削除確認
管理者のみPurpleShieldCheck管理者のみ操作この操作は管理者のみ実行できます管理者へ確認
権限なしErrorShieldX操作不可この資料を開く権限がありません管理者へ申請
読み取り専用NeutralLockKeyhole閲覧のみこの資料は読み取り専用です閲覧を続ける

権限UIのルール

良い例

この資料は読み取り専用です。内容は確認できますが、変更は保存できません。

悪い例

403 Forbidden

06 — Failure & Recovery

6失敗・復旧状態

失敗の分類

分類標準対応
一時的な失敗通信切断、タイムアウト再試行を案内
設定不足APIキー未設定、保存先未設定設定画面へ案内
入力・資料の問題破損ファイル、非対応形式対象と修正方法を案内
権限の問題閲覧不可、書き込み不可必要権限と確認先を案内
復旧不能元ファイル削除、データ破損代替手段・サポート案内

エラー文の構造

  1. 何を完了できなかったか
  2. 何が残っているか・失われていないか
  3. 利用者が次にできること
資料を登録できませんでした元のファイルは変更されていません。保存先を確認して、「もう一度試す」を押してください。

再試行ルール

復旧操作

もう一度試す

再試行

通信や一時的な失敗に使用します。

設定を確認

設定

APIキー、保存先、接続先の問題に使用します。

サポート情報を見る

ヘルプ

利用者だけでは復旧できない場合に使用します。

07 — State Priority

7状態の優先順位

1つの対象が複数状態を持つ場合、利用者の対応が必要な状態を優先して表示します。

優先順位

  1. 権限なし・安全上の停止
  2. 失敗・元ファイルなし
  3. 要確認・重複候補
  4. 処理中・起動中
  5. 処理待ち・更新待ち
  6. 一部完了
  7. 完了・登録済み
  8. 未処理・未設定

複数状態の表示方法

例:登録済み+読み取り要確認+検索準備中主状態は「要確認」とし、補助情報として「検索準備中」を表示します。「登録済み」は通常状態なので、一覧では省略できます。

画面全体の状態

画面全体をエラーやLoadingに置き換えるのは、主要コンテンツを一切表示できない場合に限ります。

08 — State Transitions

8状態遷移

標準的な処理遷移

1
未処理

処理開始前。利用者は開始できます。

2
処理待ち

キューへ登録済み。必要に応じて取り消せます。

3
処理中

現在の処理内容と進捗を表示します。

4
完了 / 一部完了 / 要確認 / 失敗

結果に応じて次の操作を表示します。

再処理遷移

失敗または要確認の状態から再処理する場合は、前回結果を保持したまま再処理を開始します。

禁止する遷移

09 — Visual Language

9色・アイコン・文言

色の標準

意味使用例
通常・未設定Neutral未処理、読み取り専用
進行中・操作可能Primary処理中、検索準備中
成功・利用可能Success完了、接続済み
注意・確認必要Warning要確認、重複候補
失敗・利用不可Error失敗、APIキー無効
管理者・特別権限Purple管理者のみ

Lucide Iconsの標準

用途Icon
待機Clock3
処理中LoaderCircle
完了CircleCheck
注意TriangleAlert
失敗CircleX
再処理RotateCcw
接続PlugZap
オフラインWifiOff
権限ShieldCheck
権限なしShieldX

文言の標準構造

状態見出し:
資料の内容を確認しています

説明:
この処理には数分かかる場合があります。

操作:
[処理を中止]

次の操作:
完了すると、検索とAIへの質問を利用できます。
スピナーだけを表示しないLoadingには、現在何をしているかを日本語で表示します。

10 — Cursor Rules

10Cursor向け実装ルール

共通指示

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

11状態型と共通コンポーネント

推奨型定義

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

状態・権限・失敗レビュー

状態表示

操作可能範囲

失敗・復旧

状態遷移

権限

状態を見た利用者が、待つ・確認する・直す・再試行するを判断できること。これがPhase 8の完成基準です。

Definition of Done

Phase 8の完成条件

完成の定義状態を追加しても画面ごとに表現がばらつかず、利用者が現在の状態と次の操作を理解できる状態になったときに完成とします。

Closing

状態は、システムから利用者への説明です

システム内部では、待機、接続、解析、保存、権限確認など、多くの処理が行われています。

利用者が知りたいのは技術的な内部状態ではなく、「今どうなっているか」「何ができるか」「次に何をすればよいか」です。

未処理なら、始め方を示す。
処理中なら、何をしているか示す。
要確認なら、確認する場所を示す。
失敗なら、直し方を示す。
権限がないなら、理由と確認先を示す。

最終原則

  1. 状態を具体的な日本語で示す。
  2. 色だけで状態を伝えない。
  3. Lucide Iconsに統一する。
  4. 次の操作を必ず示す。
  5. 一部失敗を全失敗にしない。
  6. 利用可能な機能を不必要に止めない。
  7. 権限エラーを技術用語で表示しない。
  8. 状態遷移を型として管理する。
  9. 再試行で重複処理を起こさない。
  10. 未定義状態を無視しない。