sync: update from private repo (d8074a7)

ui/src/components/settings/BrandingForm.tsx

@@ -90,7 +90,7 @@ function AssetUploader({
       <div className="flex items-center gap-3">
         <div
           className={`h-12 w-12 flex-shrink-0 rounded-md border border-hairline bg-surface flex items-center justify-center overflow-hidden ${
-            kind === 'favicon' ? 'bg-white' : ''
+            kind === 'favicon' ? 'bg-canvas' : ''
           }`}
         >
           {currentUrl ? (
@@ -115,7 +115,7 @@ function AssetUploader({
               type="button"
               onClick={handlePick}
               disabled={busy}
-              className="px-2.5 h-7 text-2xs font-medium bg-white border border-hairline rounded-md text-slate-700 hover:bg-surface disabled:opacity-50 transition-colors"
+              className="px-2.5 h-7 text-2xs font-medium bg-canvas border border-hairline rounded-md text-slate-700 hover:bg-surface disabled:opacity-50 transition-colors"
             >
               {currentUrl ? '差し替え' : 'アップロード'}
             </button>
@@ -124,7 +124,7 @@ function AssetUploader({
                 type="button"
                 onClick={() => void handleClear()}
                 disabled={busy}
-                className="px-2.5 h-7 text-2xs font-medium text-red-700 border border-red-200 bg-white hover:bg-red-50 rounded-md disabled:opacity-50 transition-colors"
+                className="px-2.5 h-7 text-2xs font-medium text-red-700 border border-red-200 bg-canvas hover:bg-red-50 rounded-md disabled:opacity-50 transition-colors"
               >
                 削除
               </button>

ui/src/components/settings/ConfigForm.tsx

@@ -243,7 +243,7 @@ function ConfigFormInner({ section }: ConfigFormProps) {
         className={`sticky bottom-0 px-3 py-2.5 mt-6 border rounded-md flex items-center justify-end gap-2 transition-colors ${
           dirty
             ? 'bg-amber-50 border-amber-300 shadow-[0_2px_8px_rgba(180,83,9,0.08)]'
-            : 'bg-white border-hairline'
+            : 'bg-canvas border-hairline'
         }`}
       >
         {toast ? (
@@ -262,7 +262,7 @@ function ConfigFormInner({ section }: ConfigFormProps) {
         <button
           onClick={handleDiscard}
           disabled={!dirty}
-          className="px-3 h-8 text-xs text-slate-700 border border-hairline bg-white rounded-md hover:bg-surface disabled:opacity-50 transition-colors whitespace-nowrap flex-shrink-0"
+          className="px-3 h-8 text-xs text-slate-700 border border-hairline bg-canvas rounded-md hover:bg-surface disabled:opacity-50 transition-colors whitespace-nowrap flex-shrink-0"
         >
           <span className="hidden sm:inline">Discard Changes</span>
           <span className="sm:hidden">Discard</span>

ui/src/components/settings/GatewayKeyCreateDialog.tsx

@@ -70,7 +70,7 @@ export function GatewayKeyCreateDialog({ onCancel, onSubmit, submitting, error }
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
       <form
         onSubmit={handleSubmit}
-        className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6"
+        className="bg-surface rounded-lg shadow-xl max-w-md w-full mx-4 p-6"
       >
         <h3 className="text-lg font-semibold text-slate-800 mb-4">新規 Gateway Key 発行</h3>
 

ui/src/components/settings/GatewayKeyRawKeyDialog.tsx

@@ -100,7 +100,7 @@ export function GatewayKeyRawKeyDialog({ rawKey, team, reason, onClose }: Props)
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-      <div className="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 p-6">
+      <div className="bg-surface rounded-lg shadow-xl max-w-lg w-full mx-4 p-6">
         <h3 className="text-lg font-semibold text-slate-800 mb-1">
           {reason === 'created' ? '新しい Gateway Key を発行しました' : 'Gateway Key をローテーションしました'}
         </h3>

ui/src/components/settings/GatewayKeyUsagePanel.tsx

@@ -36,7 +36,7 @@ export function GatewayKeyUsagePanel({ keyId, onClose }: Props) {
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 p-6">
+      <div className="bg-surface rounded-lg shadow-xl max-w-2xl w-full mx-4 p-6">
         <div className="flex justify-between items-start mb-4">
           <div>
             <h3 className="text-lg font-semibold text-slate-800">Key 使用状況</h3>

ui/src/components/settings/LlmWorkersForm.tsx

@@ -215,7 +215,7 @@ export function LlmWorkersForm({ config, onChange, overriddenByEnv }: SectionFor
                         proxy: next === 'aao_gateway' ? true : undefined,
                       });
                     }}
-                    className="w-full h-8 px-2 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-white"
+                    className="w-full h-8 px-2 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-canvas"
                   >
                     <option value="direct">Direct (Ollama / vLLM / llama.cpp)</option>
                     <option value="aao_gateway">AAO Gateway</option>

ui/src/components/settings/MemoryLearningForm.tsx

@@ -235,7 +235,7 @@ function MemoryEntryModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-lg mx-4 flex flex-col max-h-[90vh]">
+      <div className="bg-surface rounded-lg shadow-xl w-full max-w-lg mx-4 flex flex-col max-h-[90vh]">
         <div className="flex items-center justify-between px-4 py-3 border-b border-hairline">
           <h3 className="text-sm font-semibold text-slate-800">
             {isNew ? '新しいメモリエントリ' : `編集 — ${initial.name}`}
@@ -263,7 +263,7 @@ function MemoryEntryModal({
               disabled={!isNew}
               placeholder="my-fact"
               className={`w-full h-8 px-2.5 text-[13px] font-mono border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none ${
-                !isNew ? 'bg-slate-50 text-slate-500 cursor-not-allowed' : 'bg-white'
+                !isNew ? 'bg-slate-50 text-slate-500 cursor-not-allowed' : 'bg-canvas'
               }`}
             />
           </div>
@@ -284,7 +284,7 @@ function MemoryEntryModal({
             <select
               value={form.type}
               onChange={e => set('type', e.target.value as MemoryType)}
-              className="w-full h-8 px-2 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring outline-none bg-white"
+              className="w-full h-8 px-2 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring outline-none bg-canvas"
             >
               {MEMORY_TYPES.map(t => (
                 <option key={t} value={t}>{t}</option>
@@ -316,7 +316,7 @@ function MemoryEntryModal({
         <div className="flex justify-end gap-2 px-4 py-3 border-t border-hairline">
           <button
             onClick={onClose}
-            className="px-3 h-8 text-xs text-slate-700 border border-hairline bg-white rounded-md hover:bg-surface transition-colors"
+            className="px-3 h-8 text-xs text-slate-700 border border-hairline bg-canvas rounded-md hover:bg-surface transition-colors"
           >
             キャンセル
           </button>
@@ -449,14 +449,14 @@ function MemoryEntriesPanel() {
               <div className="flex gap-1.5 flex-shrink-0 mt-0.5">
                 <button
                   onClick={() => handleEdit(entry)}
-                  className="px-2 h-6 text-2xs text-slate-600 border border-hairline bg-white hover:bg-surface rounded transition-colors"
+                  className="px-2 h-6 text-2xs text-slate-600 border border-hairline bg-canvas hover:bg-surface rounded transition-colors"
                 >
                   編集
                 </button>
                 <button
                   onClick={() => void handleDelete(entry.name)}
                   disabled={deleting === entry.name}
-                  className="px-2 h-6 text-2xs text-red-700 border border-red-200 bg-white hover:bg-red-50 rounded transition-colors disabled:opacity-50"
+                  className="px-2 h-6 text-2xs text-red-700 border border-red-200 bg-canvas hover:bg-red-50 rounded transition-colors disabled:opacity-50"
                 >
                   {deleting === entry.name ? '…' : '削除'}
                 </button>
@@ -593,7 +593,7 @@ function SnapshotCard({ item, onReverted }: { item: SnapshotIndexEntry; onRevert
                     <div className="text-[10px] font-medium text-slate-500 uppercase tracking-wide mb-1">
                       変更内容
                     </div>
-                    <pre className="text-2xs text-slate-700 bg-white border border-hairline rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap">
+                    <pre className="text-2xs text-slate-700 bg-canvas border border-hairline rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap">
                       {d.diff}
                     </pre>
                   </div>
@@ -613,13 +613,13 @@ function SnapshotCard({ item, onReverted }: { item: SnapshotIndexEntry; onRevert
                     <div className="grid grid-cols-2 gap-2">
                       <div>
                         <div className="text-[10px] text-slate-400 mb-0.5">変更前</div>
-                        <pre className="text-[10px] bg-white border border-hairline rounded px-2 py-1 overflow-auto max-h-40 whitespace-pre-wrap">
+                        <pre className="text-[10px] bg-canvas border border-hairline rounded px-2 py-1 overflow-auto max-h-40 whitespace-pre-wrap">
                           {d.pieceBeforeYaml}
                         </pre>
                       </div>
                       <div>
                         <div className="text-[10px] text-slate-400 mb-0.5">変更後</div>
-                        <pre className="text-[10px] bg-white border border-hairline rounded px-2 py-1 overflow-auto max-h-40 whitespace-pre-wrap">
+                        <pre className="text-[10px] bg-canvas border border-hairline rounded px-2 py-1 overflow-auto max-h-40 whitespace-pre-wrap">
                           {d.pieceAfterYaml}
                         </pre>
                       </div>
@@ -661,7 +661,7 @@ function SnapshotCard({ item, onReverted }: { item: SnapshotIndexEntry; onRevert
                         <button
                           type="button"
                           onClick={() => setConfirmRevert(false)}
-                          className="px-2.5 h-7 text-2xs text-slate-600 border border-hairline bg-white hover:bg-surface rounded transition-colors"
+                          className="px-2.5 h-7 text-2xs text-slate-600 border border-hairline bg-canvas hover:bg-surface rounded transition-colors"
                         >
                           キャンセル
                         </button>
@@ -742,7 +742,7 @@ function BeforeAfterDiff({
         {!isAdded && (
           <div>
             <div className="text-[10px] text-slate-400 mb-0.5">変更前</div>
-            <pre className="text-[10px] bg-white border border-hairline rounded px-2 py-1 overflow-auto max-h-40 whitespace-pre-wrap">
+            <pre className="text-[10px] bg-canvas border border-hairline rounded px-2 py-1 overflow-auto max-h-40 whitespace-pre-wrap">
               {before ?? '（空）'}
             </pre>
           </div>
@@ -750,7 +750,7 @@ function BeforeAfterDiff({
         {!isRemoved && (
           <div className={isAdded ? 'col-span-2' : ''}>
             <div className="text-[10px] text-slate-400 mb-0.5">変更後</div>
-            <pre className="text-[10px] bg-white border border-hairline rounded px-2 py-1 overflow-auto max-h-40 whitespace-pre-wrap">
+            <pre className="text-[10px] bg-canvas border border-hairline rounded px-2 py-1 overflow-auto max-h-40 whitespace-pre-wrap">
               {after ?? '（空）'}
             </pre>
           </div>
@@ -803,7 +803,7 @@ function MetricsSummary() {
         ].map(({ label, value }) => (
           <div
             key={label}
-            className="bg-white border border-hairline rounded px-2 py-1.5 text-center"
+            className="bg-canvas border border-hairline rounded px-2 py-1.5 text-center"
           >
             <div className="text-2xs font-semibold text-slate-800">{value}</div>
             <div className="text-[10px] text-slate-400 mt-0.5">{label}</div>
@@ -953,7 +953,7 @@ function ReflectionTimelinePanel() {
               type="button"
               onClick={() => void fetchNextPage()}
               disabled={isFetchingNextPage}
-              className="px-3 h-8 text-xs text-slate-600 border border-hairline bg-white hover:bg-surface rounded-md disabled:opacity-50 transition-colors"
+              className="px-3 h-8 text-xs text-slate-600 border border-hairline bg-canvas hover:bg-surface rounded-md disabled:opacity-50 transition-colors"
             >
               {isFetchingNextPage ? '読み込み中…' : 'さらに表示'}
             </button>

ui/src/components/settings/ModelSelect.tsx

@@ -121,7 +121,7 @@ export function ModelSelect({ value, onChange, endpoint, apiKeyRaw }: ModelSelec
           value={value}
           onChange={e => onChange(e.target.value)}
           placeholder={loading ? 'loading...' : 'choose or type a model'}
-          className="w-full h-8 px-2.5 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-white"
+          className="w-full h-8 px-2.5 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-canvas"
         />
         <datalist id="llm-workers-model-options">
           {options.map(m => <option key={m} value={m} />)}
@@ -143,7 +143,7 @@ export function ModelSelect({ value, onChange, endpoint, apiKeyRaw }: ModelSelec
         value={value}
         onChange={e => onChange(e.target.value)}
         placeholder={loading ? 'loading...' : 'qwen3:8b'}
-        className="w-full h-8 px-2.5 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-white"
+        className="w-full h-8 px-2.5 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-canvas"
       />
       {error && (
         <p className="text-2xs text-amber-700 bg-amber-50 border border-amber-100 px-2 py-1 rounded mt-1">

ui/src/components/settings/MovementAccordion.tsx

@@ -28,7 +28,7 @@ export function MovementAccordion({ movements, onChange, onAdd, onRemove, onMove
           const ruleCount = (movement.rules ?? []).length;
 
           return (
-            <div key={i} className="bg-white border border-slate-200 rounded-lg">
+            <div key={i} className="bg-canvas border border-slate-200 rounded-lg">
               {/* Collapsed header */}
               <div
                 className="flex items-center gap-2 p-3 cursor-pointer select-none"

ui/src/components/settings/MovementForm.tsx

@@ -48,7 +48,7 @@ export function MovementForm({ movement, movementNames, onChange, disabled = fal
           value={movement.default_next ?? 'COMPLETE'}
           onChange={(e) => onChange('default_next', e.target.value)}
           disabled={disabled}
-          className={`w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-white ${disabledClass}`}
+          className={`w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-canvas ${disabledClass}`}
         >
           {nextOptions.map((opt) => (
             <option key={opt} value={opt}>{opt}</option>

ui/src/components/settings/PieceEditor.tsx

@@ -242,7 +242,7 @@ export function PieceEditor({ name, isAdmin = true, source }: PieceEditorProps)
           onClick={() => editMode === 'yaml' ? switchToVisual() : undefined}
           className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
             editMode === 'visual'
-              ? 'bg-white text-slate-800 shadow-sm'
+              ? 'bg-canvas text-slate-800 shadow-sm'
               : 'text-slate-500 hover:text-slate-700'
           }`}
         >
@@ -252,7 +252,7 @@ export function PieceEditor({ name, isAdmin = true, source }: PieceEditorProps)
           onClick={() => editMode === 'visual' ? switchToYaml() : undefined}
           className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
             editMode === 'yaml'
-              ? 'bg-white text-slate-800 shadow-sm'
+              ? 'bg-canvas text-slate-800 shadow-sm'
               : 'text-slate-500 hover:text-slate-700'
           }`}
         >

ui/src/components/settings/PieceMetaForm.tsx

@@ -58,7 +58,7 @@ export function PieceMetaForm({ piece, onChange, movementNames, disabled = false
           value={piece.initial_movement ?? ''}
           onChange={(e) => onChange('initial_movement', e.target.value)}
           disabled={disabled}
-          className={`w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-white ${disabledClass}`}
+          className={`w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-canvas ${disabledClass}`}
         >
           {movementNames.length === 0 && <option value="">--</option>}
           {movementNames.map((name) => (

ui/src/components/settings/ReflectionForm.tsx

@@ -61,7 +61,7 @@ export function ReflectionForm({ config, onChange }: SectionFormProps) {
             enqueue されません。<strong>LLM → Workers</strong> タブで以下のような worker
             を追加してください:
           </div>
-          <pre className="mt-2 text-2xs font-mono bg-white border border-amber-200 rounded p-2 overflow-auto">{`id: reflection-1
+          <pre className="mt-2 text-2xs font-mono bg-canvas border border-amber-200 rounded p-2 overflow-auto">{`id: reflection-1
 connection_type: direct
 endpoint: http://localhost:11434/v1
 model: qwen2.5:3b      # cheap モデル推奨

ui/src/components/settings/RulesTable.tsx

@@ -56,7 +56,7 @@ export function RulesTable({ rules, movementNames, onChange, disabled = false }:
                     value={rule.next}
                     onChange={(e) => updateRule(i, 'next', e.target.value)}
                     disabled={disabled}
-                    className={`w-full px-3 py-1.5 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-white ${disabledClass}`}
+                    className={`w-full px-3 py-1.5 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-canvas ${disabledClass}`}
                   >
                     {nextOptions.map((opt) => (
                       <option key={opt} value={opt}>{opt}</option>

ui/src/components/settings/SecretInput.tsx

@@ -106,7 +106,7 @@ export function SecretInput({ rawValue, onChange, placeholder }: SecretInputProp
             emit({ type: 'literal', value: e.target.value });
           }}
           placeholder={placeholder ?? 'sk-...'}
-          className="w-full h-8 px-2.5 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-white"
+          className="w-full h-8 px-2.5 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-canvas"
         />
       )}
 
@@ -124,7 +124,7 @@ export function SecretInput({ rawValue, onChange, placeholder }: SecretInputProp
               emit({ type: 'env_ref', env_name: next });
             }}
             placeholder="ENV_VAR_NAME"
-            className="flex-1 h-8 px-2.5 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-white font-mono"
+            className="flex-1 h-8 px-2.5 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none bg-canvas font-mono"
           />
           <span className="inline-flex items-center px-2 h-8 text-2xs rounded bg-slate-100 text-slate-600 font-mono">
             {'}'}

ui/src/components/settings/SettingsSidebar.tsx

@@ -120,7 +120,7 @@ export function SettingsSidebar({ activeSection, onSelectSection, isAdmin }: Set
   const visibleGroups = CONFIG_GROUPS.filter(g => isAdmin || !('adminOnly' in g) || !g.adminOnly);
 
   return (
-    <div className="h-full overflow-y-auto border-r border-hairline bg-white p-3">
+    <div className="h-full overflow-y-auto border-r border-hairline bg-canvas p-3">
       {visibleGroups.map(group => (
         <div key={group.label} className="mb-3">
           <div className="section-label px-2 py-1">

ui/src/components/settings/SkillsForm.tsx

@@ -193,7 +193,7 @@ export function SkillsForm() {
               placeholder="Install from URL..."
               value={installUrl}
               onChange={e => setInstallUrl(e.target.value)}
-              className="flex-1 min-w-0 px-2 py-1 text-xs border border-hairline rounded bg-white text-slate-700 placeholder:text-slate-400"
+              className="flex-1 min-w-0 px-2 py-1 text-xs border border-hairline rounded bg-canvas text-slate-700 placeholder:text-slate-400"
             />
             <button
               onClick={() => installMut.mutate()}
@@ -256,7 +256,7 @@ export function SkillsForm() {
                   value={newName}
                   onChange={e => setNewName(e.target.value)}
                   placeholder="my-skill-name"
-                  className="mt-1 block w-full px-2 py-1.5 text-xs border border-hairline rounded bg-white text-slate-700 placeholder:text-slate-400"
+                  className="mt-1 block w-full px-2 py-1.5 text-xs border border-hairline rounded bg-canvas text-slate-700 placeholder:text-slate-400"
                 />
                 {newName && !NAME_RE.test(newName) && (
                   <span className="text-[10px] text-red-500 mt-0.5">Lowercase letters, numbers, hyphens, underscores only</span>
@@ -269,7 +269,7 @@ export function SkillsForm() {
                   value={newContent}
                   onChange={e => setNewContent(e.target.value)}
                   rows={14}
-                  className="mt-1 block w-full px-2 py-1.5 text-xs font-mono border border-hairline rounded bg-white text-slate-700 resize-y"
+                  className="mt-1 block w-full px-2 py-1.5 text-xs font-mono border border-hairline rounded bg-canvas text-slate-700 resize-y"
                   placeholder="# My Skill&#10;&#10;Instructions for the agent..."
                 />
               </label>
@@ -350,7 +350,7 @@ export function SkillsForm() {
                     value={editContent}
                     onChange={e => setEditContent(e.target.value)}
                     rows={18}
-                    className="block w-full px-2 py-1.5 text-xs font-mono border border-hairline rounded bg-white text-slate-700 resize-y"
+                    className="block w-full px-2 py-1.5 text-xs font-mono border border-hairline rounded bg-canvas text-slate-700 resize-y"
                   />
                   <div className="flex gap-2">
                     <button

ui/src/components/settings/SshAuditLog.tsx

@@ -143,7 +143,7 @@ export function SshAuditLog() {
               <th className="px-2 py-1 font-semibold text-slate-700">Detail</th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-hairline bg-white">
+          <tbody className="divide-y divide-hairline bg-canvas">
             {(data ?? []).map(r => (
               <tr key={r.id} className="hover:bg-surface/40">
                 <td className="px-2 py-1 font-mono text-slate-600 whitespace-nowrap">{r.startedAt}</td>

ui/src/components/settings/SshGlobalConnectionsForm.tsx

@@ -211,7 +211,7 @@ export function SshGlobalConnectionsForm({ showToast, onChange }: Props) {
       {error && <div className="text-xs text-red-500">{String(error)}</div>}
 
       {creating && (
-        <section className="border border-accent/40 rounded-md bg-white p-4">
+        <section className="border border-accent/40 rounded-md bg-canvas p-4">
           <h4 className="text-xs font-semibold text-slate-700 mb-2">新規グローバル接続</h4>
           <SshConnectionForm
             existing={null}
@@ -370,7 +370,7 @@ function ReasonModal({ title, warning, onCancel, onSubmit }: ReasonModalProps) {
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
-      <div className="w-full max-w-md bg-white rounded-md shadow-lg border border-hairline overflow-hidden">
+      <div className="w-full max-w-md bg-surface rounded-md shadow-lg border border-hairline overflow-hidden">
         <div className={`px-4 py-3 border-b border-hairline ${warning ? 'bg-red-50' : ''}`}>
           <h3 className={`text-sm font-semibold ${warning ? 'text-red-800' : 'text-slate-900'}`}>{title}</h3>
         </div>

ui/src/components/settings/SshGrantsForm.tsx

@@ -149,7 +149,7 @@ export function SshGrantsForm({ showToast }: Props) {
         {globalConns.map(c => {
           const grants = grantsByConn.get(c.id) ?? [];
           return (
-            <section key={c.id} className="border border-hairline rounded-md bg-white">
+            <section key={c.id} className="border border-hairline rounded-md bg-canvas">
               <header className="px-3 py-2 border-b border-hairline bg-surface/40 flex items-center justify-between">
                 <div className="min-w-0 flex-1">
                   <div className="text-xs font-semibold text-slate-900 truncate">{c.label}</div>
@@ -262,7 +262,7 @@ function CreateGrantForm({ connections, pieces, onSubmit, onCancel }: CreateGran
   const inputCls = 'w-full text-xs px-2 py-1.5 border border-hairline rounded';
 
   return (
-    <form onSubmit={handleSubmit} className="border border-accent/40 rounded-md bg-white p-4 space-y-3">
+    <form onSubmit={handleSubmit} className="border border-accent/40 rounded-md bg-canvas p-4 space-y-3">
       <h4 className="text-xs font-semibold text-slate-700">Grant を発行</h4>
       <div className="grid grid-cols-2 gap-3">
         <label className="block">
@@ -351,7 +351,7 @@ function CreateGrantForm({ connections, pieces, onSubmit, onCancel }: CreateGran
       </div>
       {error && <div className="text-xs text-red-600">{error}</div>}
       <div className="flex items-center justify-end gap-2 pt-2 border-t border-hairline">
-        <button type="button" onClick={onCancel} disabled={submitting} className="px-3 h-7 text-xs text-slate-700 border border-hairline bg-white rounded-md hover:bg-surface disabled:opacity-50">
+        <button type="button" onClick={onCancel} disabled={submitting} className="px-3 h-7 text-xs text-slate-700 border border-hairline bg-canvas rounded-md hover:bg-surface disabled:opacity-50">
           キャンセル
         </button>
         <button type="submit" disabled={!valid || submitting} className="px-3 h-7 text-xs font-semibold bg-accent text-accent-fg rounded-md hover:bg-accent-deep disabled:opacity-50">
@@ -385,7 +385,7 @@ function ReasonModal({ title, warning, onCancel, onSubmit }: ReasonModalProps) {
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
-      <div className="w-full max-w-md bg-white rounded-md shadow-lg border border-hairline overflow-hidden">
+      <div className="w-full max-w-md bg-surface rounded-md shadow-lg border border-hairline overflow-hidden">
         <div className={`px-4 py-3 border-b border-hairline ${warning ? 'bg-red-50' : ''}`}>
           <h3 className={`text-sm font-semibold ${warning ? 'text-red-800' : 'text-slate-900'}`}>{title}</h3>
         </div>

ui/src/components/settings/SshMasterKeyRotationForm.tsx

@@ -91,7 +91,7 @@ export function SshMasterKeyRotationForm({ showToast }: Props) {
         </p>
       </div>
 
-      <div className="rounded-md border border-hairline bg-white p-3">
+      <div className="rounded-md border border-hairline bg-canvas p-3">
         <div className="flex items-center justify-between gap-3">
           <div className="min-w-0">
             <div className="text-2xs font-semibold text-slate-500 uppercase tracking-wide">現在の状態</div>
@@ -168,7 +168,7 @@ function ConfirmDialog({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
-      <div className="w-full max-w-lg bg-white rounded-md shadow-lg border border-amber-300 overflow-hidden">
+      <div className="w-full max-w-lg bg-surface rounded-md shadow-lg border border-amber-300 overflow-hidden">
         <div className="px-4 py-3 border-b border-amber-200 bg-amber-50">
           <h3 className="text-sm font-semibold text-amber-900">⚠️ Master Key Rotation を開始</h3>
         </div>

ui/src/components/settings/ToolTagInput.tsx

@@ -149,7 +149,7 @@ export function ToolTagInput({ value, onChange, disabled = false }: ToolTagInput
           )}
         </div>
         {!disabled && showDropdown && groupedSuggestions.length > 0 && (
-          <div className="absolute z-10 mt-1 w-full max-h-72 overflow-y-auto bg-white border border-slate-200 rounded-lg shadow-lg">
+          <div className="absolute z-10 mt-1 w-full max-h-72 overflow-y-auto bg-surface border border-slate-200 rounded-lg shadow-lg">
             {groupedSuggestions.map((g) => (
               <div key={g.key}>
                 <div className="sticky top-0 px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-slate-500 bg-slate-50 border-b border-slate-100">

ui/src/components/settings/formUtils.tsx

@@ -31,7 +31,7 @@ export function FieldInput({ value, onChange, type = 'text', placeholder, disabl
       disabled={disabled}
       title={disabled ? disabledReason : undefined}
       className={`w-full h-8 px-2.5 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none transition-shadow ${
-        disabled ? 'bg-slate-50 text-slate-500 cursor-not-allowed' : 'bg-white'
+        disabled ? 'bg-slate-50 text-slate-500 cursor-not-allowed' : 'bg-canvas'
       }`}
     />
   );