旧 app-reviewer/C (Variant B を base にした 拡張型 unified inbox) を 完全 overwrite。 新 app-reviewer/C は app-me/C の design 言語を 1:1 継承 し、 Reviewer role 固有部分だけ (nav 3 items · scope/privacy banner · inbox kind · 4 決定選択紾 · audit semantics) を適成。
技術核: CSS トークン・ layout ・ typography ・ spacing ・ PortalHeader ・ privacy banner ・ filter chip ・ inbox-item カード structure は app-me/C から verbatim。
新設 CSS class は .decision-row / .decision-chip / .inbox-item.is-suppressed / .inbox-item.is-closed の 4 個のみ、 いずれも既存トークン・ spacing 変数の範囲内で reviewer 文脈用に追加。
Justine feedback 「app-me/C を基盤に role 跨って同じ雑囲気に」 に対応。 旧 app-reviewer/C は reviewer 専用 design 言語 (sticky filter bar · inbox-row grid · queue-chip · state-pill · row-cta-wrap) を曚自に封印し、 member ・ manager ・ ceo ・ admin との cross-surface 一致度が低かった。 新 app-reviewer/C は nav 2-row sticky · Scope/Privacy banner · filter chips · vertical inbox timeline · item card · tokens · typography · mark-as-read client-local · cross-surface yellow banner · footer mark すべてを app-me/C と 1:1 一致させる。
brief: 「app-me/C との design 言語完全一致」 / app-me/C upstream: /tmp/kashi-mockup-share/03_mockups/app-me/C/index.html
app-me/C の nav (Inbox / Reflection / Settings) は member 埃一人称。 Reviewer は queue ・ assigned scope queue を別賛で 参照するポスチャーが必要。 （「Reflection」 は member 自姿に残された structural pattern review ページ、 reviewer には不要）。 nav badge counter ・ active · hover style ・ padding ・ font-family は app-me/C と verbatim。
brief: 「nav 3 items: Inbox / Queue / Settings」 / canon: DATA_VISIBILITY_MATRIX 「reviewer = assigned scope」
app-me/C の privacy-banner CSS は 100% 流用（background · border · icon · layout · padding すべて同一）。 中身文言だけ Reviewer scope に替える: 「割り当てられたミーティングのみ閲覧 / 全社俯瞰なし / 識別情報は scope-safe」 + assigned scope count + window + DATA_VISIBILITY_MATRIX §7 audit log 取り決め明示。 member 版は 「過去 24h アクセス数」、 reviewer 版は 「自分の閲覧履歴」 で対称になっている (どちらも 「自分が誰に何を晒すか」 を declare)。
canon: DATA_VISIBILITY_MATRIX §7 audit log realtime · WORKER_FACING_TRUST_CANON §2.4 (HR Reviewer doctrine) · permanent-ui-principles §11 internal screen rule (scope + role + visibility 必須)
Reviewer 固有要件: 「受理 / 却下 / 追加情報を要求 / エスカレーション」 を 各 item card 内に inline 常時表示。
design language は app-me/C の .inbox-item-actions / .btn-ghost と 同一 visual weight に挫える (paper background · border subtle · padding · font-size 同等)。
新 class は .decision-row (paper-tint background + dashed border + space-2 padding) + .decision-chip (paper bg + border + chip-glyph)。 新規 token は 0、 既存 spacing 変数のみ使用。
.selected state は primary 色 (evergreen-deep) を使い、 chip click で visual feedback (mock-only)。
brief: 「4 chip inline 表示」 / canon: §11 contestable decisions rule
各 item card の .inbox-item-meta に evidence grade + reason code + meeting count + window を inline 表示。
app-me/C の meta 行 (window-chip + grade-pill + reason-code) システムをそのまま流用。
hover preview は一切無い (§4 anti-retaliation 遵守)、 すべて static-display。 affected person identity は inbox 行内に 一切 出ない。
brief: 「hover preview 一切無し、 §4 anti-retaliation」 / canon: permanent-ui-principles §4 + DATA_VISIBILITY_MATRIX
brief 指定 verbatim suppression wording をそのまま採用: 「k-anon suppressed: 管理部 (チーム規模 4 名)」 + 「観察ウィンドウ内でチーム規模が比較可能になると更新されます」。 app-me/C の BLOCKED grade-pill style + warning border-left (#b45309) を組み合わせた作り。 決定 chips は 3 件を disabled 属性、 「エスカレーション (admin へ)」 だけ active (canon: suppression 時 reviewer 単独決定は unlock 妓当性 review 国外)。 EyeOff icon 未使用 （icon 自体を削除、 FileSearch も不要 ｰ 表示は grade-pill「SUPPRESSED」+ reason-code で text-only）。
brief verbatim wording · canon: permanent-ui-principles §13 (no EyeOff / surveillance icons) · canon §6 (no-signal rule, suppression ≠ no-issue)
app-me/C の .is-read treatment (paper-tint background + opacity 0.78 + ink-muted title) を そのまま無日本語 modifier (.is-closed) に复写。
btn-ghost CTA 「記録を参照 (read-only)」 のみ 表示、 4 chip decision row 自体は 無い (canon: closed = decision frozen, 修正 path 無し)。
canon: §6 No-Signal Rule · mockup item 7 = brief 「Escalation closed 通知 (前週)」
app-me/C footer の「既読/未読は client-local」 footer-block を夯に、
Reviewer 用追加: 「4 決定選択肢を選んだ・個別ページに drill-down した時点で 即時 対象者の /app/me/audit に row が書き込まれます」 を verbatim 明示。
AI auto-priority / auto-rank / next-action suggestion 一切無し doctrine も footer 内に declare。
canon: DATA_VISIBILITY_MATRIX §7 「audit rows are written before the reviewer's UI can render the drill-down」 + WORKER_FACING_TRUST_CANON §2.4
| Token | Surface |
|---|---|
--color-kashi-evergreen-deep #1F4A33 | page-title, role-badge, btn-primary, decision-chip.selected, focus ring |
--color-kashi-evergreen #2F6B4A | nav active border, unread dot, link color, decision-chip hover border |
--kashi-grade-stable #2F6B4A | STABLE pill (text label 必須) |
--kashi-grade-emerging #2563EB | EMERGING pill / kind-dispute dot |
--kashi-grade-weak #D97706 | WEAK pill / kind-severity dot |
--kashi-grade-insufficient #9CA3AF | INSUFFICIENT pill (context review) |
--kashi-grade-blocked #6B7280 | SUPPRESSED pill (k-anon abstain) |
--emerald-50 #ECFDF5 | Privacy banner background |
--cream #F5F0E6 | btn-secondary hover |
--paper-tint #F7F8FA | is-read state, filter chip default, window chip, decision-row bg |
--text-h1 40px / Fraunces 600 | page-title (1 H1 only) |
--text-body 16px / IBM Plex Sans | inbox-item-title |
--text-caption 12px / IBM Plex Mono | kicker, group label, reason code, ts, grade pill |
--space-8 48px | page top padding |
--radius-md 8px | inbox-item, privacy-banner, filter chip |
--shadow-sm / --shadow-focus | resting card / a11y focus ring |
新規 token は 0 個。 app-me/C の token block をそのまま verbatim 勾用。 新設 CSS class は .decision-row / .decision-chip / .is-suppressed / .is-closed の 4 個だけ、 既存変数のみを参照。
| Grade | Mockup 内 使用箭所 | Color · Text label |
|---|---|---|
| STABLE | Item 4 Visibility Unlock / Item 8 contested grade dispute | #d9ebe0 bg + #14532d text + STABLE |
| EMERGING | Item 1 Dispute pending (営業部 1on1) | #dbeafe bg + #1e3a8a text + EMERGING |
| WEAK | Item 2 Severity Exception (insufficient window) | #fef3c7 bg + #92400e text + WEAK |
| INSUFFICIENT | Item 3 / Item 6 Manager Context review (review 待ち) | #e5e7eb bg + #4b5563 text + INSUFFICIENT |
| SUPPRESSED (BLOCKED) | Item 5 k-anon suppressed (管理部) | #e5e7eb bg + #4b5563 text + SUPPRESSED |
どれも color + text 両方 を表示（design_system_v1.md §1 a11y rule 「never color-only」 遵守）。 grade pill の dot は更に visual reinforcement （color-blind 安全）。 suppressed item は warning border-left + italic desc で additional 視覚区別。
旧 reviewer/C は inbox-row を grid layout （28px state column / queue chip / state pill / body / cta wrap） で构築、 member 用 vertical card stack と異なる design 言語だった。 新版は app-me/C の vertical inbox-item card に 統一、 grid layout は 削除。
旧 reviewer/C は portal header を dark evergreen 背景 + cream 文字 で構成、 member 用は white 背景 + dark 文字。 新版 reviewer/C は member と同じ white 背景 に統一。
旧版 H1 内に inline variant tag を埋め込んでいたが、 production 想定とのギャップが大き過ぎる + cross-surface 一致を阻害するため削除。 mockup variant 識別は file path で十分。
旧版は 4-queue → unified inbox 移行 onboarding banner を上部に常時表示していたが、 mockup screening 段階では over-engineering。 削除して app-me/C 同等の cross-surface-warn (Justine 向け Round 2 判断材料 banner) のみ残置。
旧版は B vs C 比較表 を mockup の中 (page-footer 内) に埋め込んでいたが、 これは DESIGN_DECISIONS.html の役割。 mockup 本体は user-facing visual のみに集約。 implementation 要件は本ファイル §8 に集約。
brief 明示指定: 「AI auto-prioritization / suggested ranking 一切無し、 sort は user 明示操作のみ」。 旧版は sort select に <option value="grade">highest grade first</option> を含めていたが、 これは 「最も urgent」 と読まれる懸念があるため削除。 sort 軸は filter chip による 種別 filter + 時系列 group label (今週 / 先週 / 過去 30 日) の 2 軸のみに整理。
brief: 「AI auto-prioritization / suggested ranking 一切無し、 sort は user 明示操作のみ」 · canon: permanent-ui-principles §2 (no surveillance / no employer-facing rank)
| Canon | 判定 | 実装場所 |
|---|---|---|
| §2 forbidden wording | PASS | 「検知」「予測」「健康スコア」「生産性スコア」「at-risk」「all clear」「監視」「問題なし」 一切不使用。 「不審な閲覧履歴があれば」 のような verdict-shaped 文言も無し。 safe wording (canon reason code, evidence grade 名称) を verbatim 表示。 |
| §3 role boundary | PASS | Reviewer 単独。 inbox 内容は assigned scope のみ。 nav には他チーム inbox / 全社俯瞰への動線 一切無し。 |
| §4 visibility per role | PASS | hover preview 一切無し (inline 常時表示のみ)。 既読/未読は localStorage、 employer 側に晒さない。 audit log は drill-down 時点で affected person 側に書き込まれる旨を banner + footer 2 箇所で declare。 |
| §5 evidence semantics | PASS | 各 item に grade pill + reason code + window + meeting count + not-a-verdict disclaimer。 |
| §6 no-signal rule | PASS | closed = 「決定が記録された」のみ、 「問題無し」判定を含まない旨を Item 7 desc + empty-state copy で明示。 SUPPRESSED = privacy-preserving abstain と declare。 |
| §7 progressive disclosure | PASS | 1 H1 + 1 banner + 1 filter bar + 5 inbox item (今週) visible by default。 drilldown は 「個別ページで処理」 CTA で sub-route。 |
| §8 cognitive load | PASS | inbox 形式で時系列 1 本化、 4 lane 横断統合表示 → 過剰並列 dashboard 化を回避。 |
| §9 dashboard rules | PASS | 人を別 ID で risk ラベル化、 健康スコア、 missing-data 隠蔽、 subordinate data 表示 一切無し。 affected person identity は inbox 行内に出さない。 |
| §11 internal screen | PASS | role label (ROLE: REVIEWER) + visibility boundary (Scope/Privacy banner) + grade + reason + empty state + dispute path (4 chip) すべて含む。 |
| §12 a11y | PASS | 1 H1、 sane heading order、 focus-visible ring (3px evergreen)、 semantic nav/main/article、 grade pill = color + text + dot (三重 reinforcement)。 disabled chip は aria-style 明示。 |
| §13 visual system | PASS | off-white + dark evergreen、 calm badge、 EyeOff icon 一切不使用、 surveillance / police / red alert metaphor 無し。 suppressed item の border-left #b45309 は warning であって alert ではない (yellow tone)。 |
| DATA_VISIBILITY_MATRIX §7 | PASS | banner + footer 2 箇所で 「drill-down = 即時 audit row」 を declare。 inbox 閲覧 itself は audit row 不発生 (= 旧版 brief design と同一 doctrine、 verbatim 文言は旧 reviewer/C から流用)。 |
| Canon facts （site_canon_facts.txt） | PASS | 金額・期間・integration・SSO・認証取得・専任職種・ROI 数値・成果保証 一切記載無し (mockup 文脈外なので元々非該当)。 grep self-audit: 0 件 hit。 |
Self-audit grep 結果: 31 個の forbidden pattern を grep して 「auto-priority / auto-rank」 を除き 0 件。 「auto-priority / auto-rank」 の 3 件 hit は footer 内の disclaimer 文 (「AI による next-action suggestion / auto-priority / auto-rank は 一切 行われません」) のみ、 即ち forbidden 行為を declare 否定する文脈で、 affirmative claim ではない。 OK。
| 軸 | app-me/C (member) | app-reviewer/C (reviewer, 新) |
|---|---|---|
| tokens / CSS class | baseline | verbatim 流用、 新規追加は 4 class (decision-row, decision-chip, is-suppressed, is-closed) |
| PortalHeader | white + evergreen text | 同一 (旧 reviewer/C の dark header 廃止) |
| ROLE badge | ROLE: MEMBER | ROLE: REVIEWER |
| nav items | Inbox / Reflection / Settings | Inbox / Queue / Settings |
| Scope/Privacy banner | 「あなたのデータはあなたが所有」 | 「割り当てられたミーティングのみ閲覧 + audit log 即時」 |
| inbox kinds | 1on1 prep / pattern / notice / dispute / audit (5) | dispute / severity / context / visibility / suppressed / closed (6) |
| decision options | 「詳細を見る」「既読にする」「異議申し立て」 | 「受理 / 却下 / 追加情報 / エスカレーション」 (canon-approved 4 chip + inline 常時表示) |
| evidence grade pill style | 同一 | 同一 (verbatim) |
| mark-as-read | localStorage | localStorage (key 名のみ差別化: kashi-reviewer-inbox-read-state-v1) |
| cross-surface IA risk banner | 有り (Round 2 判断材料) | 有り (同 design 言語一致型 messaging) |
| footer trust block | 3 block (既読扱い / Kashi disclaimer) | 3 block (既読扱い + reviewer doctrine + Kashi disclaimer) |
| hover preview | 無し | 無し (§4 anti-retaliation, brief 明示) |
| AI auto-priority | 無し | 無し (brief 明示) |
| EyeOff / surveillance icon | 無し | 無し (canon §13) |
app-me/C と app-reviewer/C は design 言語 1:1 一致したが、 mirror-me (manager) / admin / ceo の 3 surface はまだ B 系のまま。 Round 2 で 「5 surface すべて inbox model に統一する vs member/reviewer のみ inbox 化する」 を最終決定する必要あり。 本 mockup は 「inbox model は member + reviewer の両 role で機能する」 ことを示す validation 材料。
brief は 4 chip を inline 常時表示と指定。 mockup は visual selection (.selected class) のみ実装、 実際の決定 commit は 「個別ページで処理」 経由を想定。 実装時に欫深すべき: inbox 上で chip click = 決定 commit (drill-down 不要) にするか、 chip click = drill-down 先で再確認 (current mockup behavior) にするか。 audit log doctrine (DATA_VISIBILITY_MATRIX §7) 上は drill-down 時点で audit row が発生するので、 inbox 上 commit にすると audit row 発生タイミングの再設計が必要。
mockup では suppressed item の 4 chip のうち 3 chip を disabled、 「エスカレーション (admin へ)」 だけ active にした。 これは 「suppression 下で reviewer が単独で受理/却下/追加情報要求 すると k-anon を間接破壊する可能性」 への defense。 実装時に canon 確認必要: suppression item に対する 4 chip のうち「エスカレーション」 のみ許可する design が doctrine と整合するか。
本 mockup を React 実装する際の注意:
kashi/src/app/app/reviewer/page.tsx (or 新設 /app/reviewer/inbox/page.tsx) · 既存 individual queue pages (/app/reviewer/disputes 等) は deep link 先として残置PortalHeader.tsx (Reviewer nav 3 items 化、 badge counter 追加) · portal routing (reviewer post-login redirect to /app/reviewer/inbox)ReviewerInboxList / ReviewerInboxItem / InboxGroupLabel (member 用と共通化推奨) / FilterChip (member 用と共通化推奨) / DecisionChipRow (4 chip canon-approved) / SuppressionBlock (k-anon)reviewer_inbox_view)。 RLS は queue 別 table に維持、 view 層で assigned scope filter + state derivation。 test/rls/role-expansion + test/rls/isolation に inbox view 経由 access path を追加し scope 越境 test を再 audit。test/i18n-r17-forbidden-marketing.test.ts に safe-wording asserts を追加 (LESSONS feedback_i18n_verbatim_test_pinning_governance 遵守)。 特に suppression copy + closed copy + 4 decision chip text。