sync: update from private repo (d8074a7)

ui/src/components/activity/ActivityEventCard.tsx

@@ -30,7 +30,7 @@ export const ActivityEventCard = memo(function ActivityEventCard({ event, isLast
         <div className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${colors.dot}`} />
         {!isLast && <div className="flex-1 w-px bg-slate-200 mt-1" />}
       </div>
-      <div className={`border rounded-xl p-2.5 mb-2.5 ${colors.border} bg-white`}>
+      <div className={`border rounded-xl p-2.5 mb-2.5 ${colors.border} bg-canvas`}>
         <div className="flex items-center gap-2 flex-wrap">
           <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold font-mono tracking-wide ${colors.badge} ${colors.badgeText}`}>
             {activityKindLabel(event.kind)}

ui/src/components/browser/PipButton.tsx

@@ -27,7 +27,7 @@ const REASON_HINT: Record<string, string> = {
 export function PipButton({ pip, className, hideWhenUnsupported = true }: Props) {
   if (!pip.supported && hideWhenUnsupported) return null;
 
-  const baseClass = 'text-2xs px-2 py-1 rounded-md border border-hairline bg-white hover:bg-surface text-slate-700 disabled:opacity-50';
+  const baseClass = 'text-2xs px-2 py-1 rounded-md border border-hairline bg-canvas hover:bg-surface text-slate-700 disabled:opacity-50';
   const merged = className ? `${baseClass} ${className}` : baseClass;
 
   if (!pip.supported) {

ui/src/components/browser/SaveRecordingButton.tsx

@@ -23,7 +23,7 @@ export function SaveRecordingButton({ taskId, className }: Props) {
   const [linkVisible, setLinkVisible] = useState(false);
 
   const baseClass =
-    'text-2xs px-2 py-1 rounded-md border border-hairline bg-white hover:bg-surface text-slate-700 disabled:opacity-50';
+    'text-2xs px-2 py-1 rounded-md border border-hairline bg-canvas hover:bg-surface text-slate-700 disabled:opacity-50';
   const merged = className ? `${baseClass} ${className}` : baseClass;
 
   async function handleClick() {

ui/src/components/chat/ChatMessage.tsx

@@ -153,7 +153,7 @@ function ChecklistCard({ comment }: { comment: LocalTaskComment }) {
 
   return (
     <div className="flex justify-center">
-      <div className="bg-white border border-hairline rounded-md px-3.5 py-2.5 max-w-[90%] w-full">
+      <div className="bg-canvas border border-hairline rounded-md px-3.5 py-2.5 max-w-[90%] w-full">
         {/* Header */}
         <button
           onClick={() => setExpanded(!expanded)}
@@ -194,7 +194,7 @@ function ChecklistCard({ comment }: { comment: LocalTaskComment }) {
             </span>
           )}
           {summary.remaining > 0 && (
-            <span className="inline-flex items-center gap-1 bg-white text-slate-500 border border-hairline px-1.5 py-0.5 rounded font-mono tabular-nums">
+            <span className="inline-flex items-center gap-1 bg-canvas text-slate-500 border border-hairline px-1.5 py-0.5 rounded font-mono tabular-nums">
               <StatusIcon status="pending" />{summary.remaining}
             </span>
           )}
@@ -403,7 +403,7 @@ export function ChatMessage({ comment, taskId, imageBaseUrl, isStaleThinking }:
   // Fallback for unknown kinds
   return (
     <div className="flex justify-start">
-      <div className="max-w-[82%] bg-white border border-slate-200 text-slate-900 rounded-2xl rounded-bl-md px-4 py-3 shadow-sm">
+      <div className="max-w-[82%] bg-canvas border border-slate-200 text-slate-900 rounded-2xl rounded-bl-md px-4 py-3 shadow-sm">
         <div className="text-2xs text-slate-400 mb-1.5">
           {author} · {new Date(createdAt).toLocaleString()}
         </div>

ui/src/components/chat/ChatPane.tsx

@@ -234,7 +234,7 @@ export function ChatPane({ task, comments, onSubmit, onCancel, onOpenDetail }: C
         className="hidden sm:block"
       />
       {/* Header */}
-      <div className="flex-shrink-0 border-b border-hairline bg-white px-4 py-2.5">
+      <div className="flex-shrink-0 border-b border-hairline bg-canvas px-4 py-2.5">
         <div className="flex items-center justify-between gap-2">
           <div className="min-w-0">
             <h2 className="text-sm font-semibold text-slate-900 truncate">{task.title}</h2>
@@ -260,7 +260,7 @@ export function ChatPane({ task, comments, onSubmit, onCancel, onOpenDetail }: C
             {onOpenDetail && (
               <button
                 onClick={onOpenDetail}
-                className="px-2.5 h-7 text-2xs font-medium text-slate-700 border border-hairline bg-white hover:bg-surface rounded-md transition-colors"
+                className="px-2.5 h-7 text-2xs font-medium text-slate-700 border border-hairline bg-canvas hover:bg-surface rounded-md transition-colors"
                 title="詳細を表示"
               >
                 詳細
@@ -336,7 +336,7 @@ export function ChatPane({ task, comments, onSubmit, onCancel, onOpenDetail }: C
                   </div>
                 </div>
               ) : streamingText ? (
-                <div className="max-w-[80%] min-w-0 px-3 py-2 bg-white border border-hairline rounded-lg text-[13px] text-slate-800 leading-relaxed whitespace-pre-wrap break-words [overflow-wrap:anywhere] opacity-70">
+                <div className="max-w-[80%] min-w-0 px-3 py-2 bg-canvas border border-hairline rounded-lg text-[13px] text-slate-800 leading-relaxed whitespace-pre-wrap break-words [overflow-wrap:anywhere] opacity-70">
                   {streamingText}
                   <span className="inline-block w-0.5 h-3.5 bg-slate-400 animate-pulse ml-0.5 align-text-bottom" />
                 </div>
@@ -366,7 +366,7 @@ export function ChatPane({ task, comments, onSubmit, onCancel, onOpenDetail }: C
         {!isAtBottom && (
           <button
             onClick={scrollToBottom}
-            className="absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1.5 px-3 py-1.5 bg-white border border-slate-200 rounded-full shadow-md text-xs text-slate-600 hover:bg-slate-50 transition-colors z-10"
+            className="absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1.5 px-3 py-1.5 bg-canvas border border-slate-200 rounded-full shadow-md text-xs text-slate-600 hover:bg-slate-50 transition-colors z-10"
           >
             <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <path d="M4 6l4 4 4-4" />
@@ -381,7 +381,7 @@ export function ChatPane({ task, comments, onSubmit, onCancel, onOpenDetail }: C
       </div>
 
       {/* Composer */}
-      <div className="flex-shrink-0 border-t border-hairline bg-white p-3" style={{ paddingBottom: 'calc(12px + env(safe-area-inset-bottom, 0px))' }}>
+      <div className="flex-shrink-0 border-t border-hairline bg-canvas p-3" style={{ paddingBottom: 'calc(12px + env(safe-area-inset-bottom, 0px))' }}>
         {isBusy && (
           <div className={`flex items-center gap-2 mb-2 px-2.5 py-1 rounded-md text-2xs ${
             canInterject
@@ -402,7 +402,7 @@ export function ChatPane({ task, comments, onSubmit, onCancel, onOpenDetail }: C
               type="button"
               onClick={() => void handleSubmit()}
               disabled={submitting}
-              className="flex-shrink-0 px-2 h-6 bg-white border border-red-200 rounded text-[10px] font-medium text-red-700 hover:bg-red-100 disabled:opacity-50"
+              className="flex-shrink-0 px-2 h-6 bg-canvas border border-red-200 rounded text-[10px] font-medium text-red-700 hover:bg-red-100 disabled:opacity-50"
             >
               再送信
             </button>
@@ -461,7 +461,7 @@ export function ChatPane({ task, comments, onSubmit, onCancel, onOpenDetail }: C
               <button
                 disabled={cancelling}
                 onClick={() => void handleCancel()}
-                className="px-3 h-9 bg-white border border-red-200 text-red-700 rounded-md text-xs font-semibold disabled:opacity-50 hover:bg-red-50 flex-shrink-0 transition-colors"
+                className="px-3 h-9 bg-canvas border border-red-200 text-red-700 rounded-md text-xs font-semibold disabled:opacity-50 hover:bg-red-50 flex-shrink-0 transition-colors"
                 title="エージェントの実行を停止"
               >
                 {cancelling ? '停止中...' : '停止'}

ui/src/components/chat/SubtaskInlineCard.tsx

@@ -59,7 +59,7 @@ export function SubtaskInlineCard({ subtasks, subtaskCount, subtaskCompleted }:
 
   return (
     <div className="flex justify-center">
-      <div className="bg-white border border-hairline rounded-md px-3.5 py-2.5 max-w-[90%] w-full">
+      <div className="bg-canvas border border-hairline rounded-md px-3.5 py-2.5 max-w-[90%] w-full">
         {/* Header */}
         <button
           onClick={() => setExpanded(!expanded)}
@@ -107,7 +107,7 @@ export function SubtaskInlineCard({ subtasks, subtaskCount, subtaskCompleted }:
             </span>
           )}
           {subtaskCount - subtaskCompleted - running - failed > 0 && (
-            <span className="inline-flex items-center gap-1 bg-white text-slate-500 border border-hairline px-1.5 py-0.5 rounded font-mono tabular-nums">
+            <span className="inline-flex items-center gap-1 bg-canvas text-slate-500 border border-hairline px-1.5 py-0.5 rounded font-mono tabular-nums">
               <SubtaskStatusIcon status="queued" />{subtaskCount - subtaskCompleted - running - failed}
             </span>
           )}

ui/src/components/create/AttachmentDropzone.tsx

@@ -31,7 +31,7 @@ export function AttachmentDropzone({ attachments, onFilesChange }: AttachmentDro
   return (
     <div
       className={`border-2 border-dashed rounded-xl p-4 transition-colors ${
-        dragOver ? 'border-accent bg-accent-soft' : 'border-slate-200 bg-white'
+        dragOver ? 'border-accent bg-accent-soft' : 'border-slate-200 bg-canvas'
       }`}
       onDragOver={e => { e.preventDefault(); setDragOver(true); }}
       onDragLeave={() => setDragOver(false)}

ui/src/components/create/CreateTaskDialog.tsx

@@ -143,7 +143,7 @@ export function CreateTaskDialog({ onClose, onSubmit, initialPiece, initialBody,
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 bg-slate-900/50 z-30" />
         <Dialog.Content
-          className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-2xl w-full overflow-auto z-40 focus:outline-none"
+          className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface rounded-2xl shadow-2xl w-full overflow-auto z-40 focus:outline-none"
           style={{ maxWidth: 'min(860px, 92vw)', maxHeight: '88dvh' }}
           onOpenAutoFocus={e => {
             e.preventDefault();

ui/src/components/dashboard/AddWidgetDialog.tsx

@@ -49,7 +49,7 @@ export function AddWidgetDialog({ open, existingSlugs, onClose, onCreate }: Prop
       onClick={() => !saving && onClose()}
     >
       <div
-        className="bg-white rounded-md shadow-lg w-[320px] p-4 flex flex-col gap-3"
+        className="bg-surface rounded-md shadow-lg w-[320px] p-4 flex flex-col gap-3"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="text-sm font-semibold">新しいウィジェット</div>

ui/src/components/dashboard/MarkdownWidget.tsx

@@ -19,7 +19,7 @@ export function MarkdownWidget({ widget, onSave, onDelete }: Props) {
         <button
           type="button"
           onClick={() => { setDraftContent(widget.markdownContent); setEditing(true); }}
-          className="absolute top-2 right-2 px-2 py-1 text-[11px] bg-white border border-hairline rounded hover:bg-surface-2"
+          className="absolute top-2 right-2 px-2 py-1 text-[11px] bg-canvas border border-hairline rounded hover:bg-surface-2"
           aria-label="編集"
         >
           ✏️
@@ -58,7 +58,7 @@ export function MarkdownWidget({ widget, onSave, onDelete }: Props) {
         <button
           type="button"
           onClick={() => setEditing(false)}
-          className="px-3 py-1 bg-white border border-hairline text-xs rounded hover:bg-surface-2"
+          className="px-3 py-1 bg-canvas border border-hairline text-xs rounded hover:bg-surface-2"
         >
           キャンセル
         </button>

ui/src/components/dashboard/SideInfoPanel.tsx

@@ -30,7 +30,7 @@ export function SideInfoPanel({
   const activeWidget = widgets.find(w => w.slug === activeSlug);
 
   return (
-    <div className="flex flex-col h-full overflow-hidden bg-white">
+    <div className="flex flex-col h-full overflow-hidden bg-canvas">
       <WidgetTabBar
         widgets={widgets}
         activeSlug={activeSlug}

ui/src/components/detail/ContextUsageGauge.tsx

@@ -40,7 +40,7 @@ export function ContextUsageGauge({ promptTokens, limitTokens, jobStatus }: Cont
   const label = pickLabel(jobStatus);
 
   return (
-    <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
+    <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
       <div className="flex items-baseline justify-between mb-2">
         <span className="text-sm font-semibold text-slate-700">{label}</span>
         <span className="text-xs text-slate-500 tabular-nums">

ui/src/components/detail/ContinueWithPieceDialog.tsx

@@ -67,7 +67,7 @@ export function ContinueWithPieceDialog({
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
       onClick={e => { if (e.target === e.currentTarget) onClose(); }}
     >
-      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 overflow-hidden flex flex-col max-h-[90vh]">
+      <div className="bg-surface rounded-xl shadow-xl w-full max-w-lg mx-4 overflow-hidden flex flex-col max-h-[90vh]">
         {/* Header */}
         <div className="flex items-center gap-3 px-5 py-4 border-b border-hairline">
           <div className="flex-1 min-w-0">

ui/src/components/detail/DetailHeader.tsx

@@ -70,7 +70,7 @@ function ShareButton({ taskId, shareToken, onShareChange }: { taskId: number; sh
         disabled={shareMutation.isPending}
         title={shareMutation.isPending ? '共有中...' : '公開リンクを発行'}
         aria-label="公開リンクを発行"
-        className={`${iconBtnBase} border-hairline bg-white text-slate-600 hover:text-slate-900 hover:bg-surface`}
+        className={`${iconBtnBase} border-hairline bg-canvas text-slate-600 hover:text-slate-900 hover:bg-surface`}
       >
         {shareMutation.isPending ? (
           <svg className="w-3.5 h-3.5 animate-spin" viewBox="0 0 24 24" fill="none">
@@ -102,7 +102,7 @@ function ShareButton({ taskId, shareToken, onShareChange }: { taskId: number; sh
         onClick={handleCopy}
         title={copied ? 'コピーしました' : '共有リンクをコピー'}
         aria-label="共有リンクをコピー"
-        className={`${iconBtnBase} ${copied ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-hairline bg-white text-slate-600 hover:text-slate-900 hover:bg-surface'}`}
+        className={`${iconBtnBase} ${copied ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-hairline bg-canvas text-slate-600 hover:text-slate-900 hover:bg-surface'}`}
       >
         {copied ? (
           <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -120,7 +120,7 @@ function ShareButton({ taskId, shareToken, onShareChange }: { taskId: number; sh
         disabled={unshareMutation.isPending}
         title="共有を停止"
         aria-label="共有を停止"
-        className={`${iconBtnBase} border-hairline bg-white text-slate-500 hover:text-red-700 hover:border-red-200 hover:bg-red-50`}
+        className={`${iconBtnBase} border-hairline bg-canvas text-slate-500 hover:text-red-700 hover:border-red-200 hover:bg-red-50`}
       >
         {unshareMutation.isPending ? (
           <svg className="w-3.5 h-3.5 animate-spin" viewBox="0 0 24 24" fill="none">
@@ -150,7 +150,7 @@ function ContinueButton({ latestJobStatus, onClick }: { latestJobStatus: string
       disabled={!enabled}
       title={enabled ? '別 piece で続ける' : 'タスクが進行中のため続行できません'}
       aria-label="別 piece で続ける"
-      className={`${iconBtnBase} border-hairline bg-white text-slate-600 hover:text-slate-900 hover:bg-surface`}
+      className={`${iconBtnBase} border-hairline bg-canvas text-slate-600 hover:text-slate-900 hover:bg-surface`}
     >
       {/* arrow → divider: 「次のフェーズへ進む」cue。FileBrowser の refresh
           (循環矢印) と区別するためフラットな skip-forward 形状を採用 */}
@@ -168,7 +168,7 @@ export function DetailHeader({ title, subtitle, tabs, activeTab, tabTransitionPe
   // renders its own mobile-level top tab bar with the same controls.
   // Two close buttons / two tab bars on iPhone was visually redundant.
   return (
-    <div className="flex-shrink-0 border-b border-hairline bg-white px-4 pt-3 pb-3 sm:pb-0" id="detail-panel-title">
+    <div className="flex-shrink-0 border-b border-hairline bg-canvas px-4 pt-3 pb-3 sm:pb-0" id="detail-panel-title">
       <div className="flex items-start justify-between gap-2 mb-0 sm:mb-3">
         <div className="min-w-0 flex-1">
           <div className="text-[10px] font-mono uppercase tracking-wider text-slate-400">{subtitle}</div>

ui/src/components/detail/DetailPanel.tsx

@@ -195,7 +195,7 @@ export function LocalDetailPanel({
               )}
             </div>
             {editingVisibility && (
-              <div className="mb-3 p-2.5 border border-hairline rounded-md bg-white text-xs">
+              <div className="mb-3 p-2.5 border border-hairline rounded-md bg-canvas text-xs">
                 <div className="flex gap-3 flex-wrap">
                   <label className="flex items-center gap-1">
                     <input
@@ -228,7 +228,7 @@ export function LocalDetailPanel({
                 </div>
                 {editVisibility === 'org' && orgs.length > 1 && (
                   <select
-                    className="mt-2 px-2 h-7 border border-hairline rounded-md text-xs bg-white focus:outline-none focus:ring-2 focus:ring-accent-ring"
+                    className="mt-2 px-2 h-7 border border-hairline rounded-md text-xs bg-canvas focus:outline-none focus:ring-2 focus:ring-accent-ring"
                     value={editScopeOrgId ?? ''}
                     onChange={e => setEditScopeOrgId(e.target.value)}
                   >
@@ -273,13 +273,13 @@ export function LocalDetailPanel({
         )}
       </div>
       {!loading && task && (
-        <div className="flex-shrink-0 border-t border-hairline bg-white px-3 py-2.5">
+        <div className="flex-shrink-0 border-t border-hairline bg-canvas px-3 py-2.5">
           <div className="flex gap-2 items-center">
             {onDelete && !isActiveJob ? (
               <button
                 disabled={deleting}
                 onClick={handleDelete}
-                className="px-3 h-7 bg-white border border-red-200 text-red-700 rounded-md text-xs font-medium disabled:opacity-50 hover:bg-red-50 transition-colors"
+                className="px-3 h-7 bg-canvas border border-red-200 text-red-700 rounded-md text-xs font-medium disabled:opacity-50 hover:bg-red-50 transition-colors"
               >
                 {deleting ? '削除中...' : '削除'}
               </button>

ui/src/components/detail/tabs/BrowserTab.tsx

@@ -76,7 +76,7 @@ export function BrowserTab({ taskId }: { taskId: number }) {
   if (!data?.available) {
     if (data?.reason === 'novnc_not_installed') {
       return (
-        <div className="bg-white border border-amber-300 rounded-md p-6 text-sm text-slate-700">
+        <div className="bg-canvas border border-amber-300 rounded-md p-6 text-sm text-slate-700">
           <p className="font-medium text-amber-800 mb-2">noVNC の Web 配布物 (vnc.html) が配置されていません</p>
           <p className="text-xs leading-relaxed mb-2">
             このタスクのブラウザセッションは存在しますが、noVNC の HTML/JS 一式が
@@ -94,7 +94,7 @@ export function BrowserTab({ taskId }: { taskId: number }) {
       );
     }
     return (
-      <div className="bg-white border border-hairline rounded-md p-6 text-center text-sm text-slate-600">
+      <div className="bg-canvas border border-hairline rounded-md p-6 text-center text-sm text-slate-600">
         <p className="font-medium text-slate-800 mb-1">このタスクのブラウザセッションは現在アクティブではありません</p>
         <p className="text-xs leading-relaxed">
           BrowseWeb / InteractiveBrowse を含むジョブが実行中のときに、このタブから
@@ -105,7 +105,7 @@ export function BrowserTab({ taskId }: { taskId: number }) {
   }
 
   return (
-    <div className="bg-white border border-hairline rounded-md overflow-hidden flex flex-col" style={{ minHeight: '480px' }}>
+    <div className="bg-canvas border border-hairline rounded-md overflow-hidden flex flex-col" style={{ minHeight: '480px' }}>
       <div className="flex items-center justify-between border-b border-hairline px-3 py-2 text-2xs text-slate-500 gap-2">
         <span className="truncate">
           state: <span className="font-mono text-slate-700">{data.state ?? '-'}</span>
@@ -130,7 +130,7 @@ export function BrowserTab({ taskId }: { taskId: number }) {
               }
             }}
             disabled={release.isPending}
-            className="px-2 py-1 rounded-md text-2xs border border-hairline bg-white hover:bg-surface text-slate-700 disabled:opacity-50"
+            className="px-2 py-1 rounded-md text-2xs border border-hairline bg-canvas hover:bg-surface text-slate-700 disabled:opacity-50"
             title="セッションを destroy する。次回 BrowseWeb 実行時に再生成される"
           >
             {release.isPending ? '終了中…' : 'セッション終了'}

ui/src/components/detail/tabs/FilesTab.tsx

@@ -16,7 +16,7 @@ interface FilesTabProps {
 
 export function FilesTab(props: FilesTabProps) {
   return (
-    <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
+    <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
       <FileBrowser {...props} />
     </div>
   );

ui/src/components/detail/tabs/OutputTab.tsx

@@ -8,7 +8,7 @@ interface OutputTabProps {
 
 export function OutputTab({ outputPreviewName, outputPreviewContent, onViewFull }: OutputTabProps) {
   return (
-    <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
+    <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
       <div className="flex justify-between items-center mb-2">
         <div className="font-bold text-[13px] text-slate-800">成果物プレビュー</div>
         {outputPreviewName && (

ui/src/components/detail/tabs/OverviewTab.tsx

@@ -47,7 +47,7 @@ function FeedbackPanel({ task }: { task: LocalTask }) {
 
   if (!editing && hasFeedback) {
     return (
-      <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
+      <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <span className="text-sm font-semibold text-slate-700">フィードバック</span>
@@ -77,7 +77,7 @@ function FeedbackPanel({ task }: { task: LocalTask }) {
   }
 
   return (
-    <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
+    <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
       <div className="text-sm font-semibold text-slate-700 mb-2">フィードバック</div>
       <div className="flex gap-2 mb-3">
         <button
@@ -195,7 +195,7 @@ function MissionCard({ task }: { task: LocalTask }) {
   const isEmpty = !current.goal && !current.done && !current.open && !current.clarifications;
 
   return (
-    <div className="bg-white border border-hairline rounded-md p-3.5">
+    <div className="bg-canvas border border-hairline rounded-md p-3.5">
       <div className="flex items-center justify-between mb-2.5">
         <div className="flex items-center gap-1.5">
           <svg className="w-3.5 h-3.5 text-slate-500" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
@@ -208,7 +208,7 @@ function MissionCard({ task }: { task: LocalTask }) {
           <button
             type="button"
             onClick={() => { setDraft(current); setEditing(true); setError(null); }}
-            className="px-2 h-7 text-2xs font-medium border border-hairline bg-white text-slate-700 hover:bg-surface rounded-md transition-colors"
+            className="px-2 h-7 text-2xs font-medium border border-hairline bg-canvas text-slate-700 hover:bg-surface rounded-md transition-colors"
           >
             編集
           </button>
@@ -235,7 +235,7 @@ function MissionCard({ task }: { task: LocalTask }) {
               type="button"
               onClick={() => { setEditing(false); setError(null); setDraft(current); }}
               disabled={mutation.isPending}
-              className="px-3 h-7 text-xs rounded-md border border-hairline bg-white text-slate-700 hover:bg-surface transition-colors disabled:opacity-50"
+              className="px-3 h-7 text-xs rounded-md border border-hairline bg-canvas text-slate-700 hover:bg-surface transition-colors disabled:opacity-50"
             >
               キャンセル
             </button>
@@ -286,7 +286,7 @@ export function OverviewTab({ task, subtaskActivities, onSubtaskFilePreview }: O
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
+      <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
         <div className="text-lg font-extrabold text-slate-900">{task.title}</div>
         <div className="flex flex-wrap gap-2 mt-2">
           <StatusBadge status={status} />

ui/src/components/detail/tabs/ProgressTab.tsx

@@ -19,7 +19,7 @@ export function ProgressTab({ task, onViewFullLog, subtaskActivities }: Progress
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
+      <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
         <div className="flex justify-between items-center mb-2">
           <div className="font-bold text-[13px] text-slate-800">実行 Timeline</div>
           <div className="text-2xs text-slate-400">{activityEvents.length} 件</div>
@@ -38,7 +38,7 @@ export function ProgressTab({ task, onViewFullLog, subtaskActivities }: Progress
         />
       </div>
       {hasSubtasks && <SubtaskActivitySection subtaskActivities={subtaskActivities!} />}
-      <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
+      <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
         <div className="flex justify-between items-center mb-3">
           <div className="font-bold text-[13px] text-slate-800">Raw activity.log</div>
           <button onClick={onViewFullLog} className="text-2xs text-blue-600 font-bold hover:underline">全文</button>

ui/src/components/detail/tabs/SubtaskActivitySection.tsx

@@ -58,7 +58,7 @@ export function SubtaskActivitySection({ subtaskActivities }: SubtaskActivitySec
   const progressPct = total > 0 ? Math.round((completed / total) * 100) : 0;
 
   return (
-    <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
+    <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
       <div className="flex items-center justify-between mb-3">
         <div className="text-[13px] font-bold text-slate-800">サブタスク進捗</div>
         <div className="text-xs text-slate-500">{completed}/{total} 完了</div>

ui/src/components/detail/tabs/SubtasksPanel.tsx

@@ -99,7 +99,7 @@ function SubtaskCard({ taskId, subtask, activity, onFilePreview }: SubtaskCardPr
   const hasFiles = Object.values(categories).some(f => f.length > 0);
 
   return (
-    <div className="border border-slate-200 rounded-lg bg-white overflow-hidden">
+    <div className="border border-slate-200 rounded-lg bg-canvas overflow-hidden">
       <button
         className="w-full text-left px-3 py-2.5 flex items-start gap-2 hover:bg-slate-50 transition-colors"
         onClick={() => setExpanded(prev => !prev)}
@@ -193,7 +193,7 @@ export function SubtasksPanel({ taskId, subtasks, subtaskCount, subtaskCompleted
   const progressPct = subtaskCount > 0 ? Math.round((subtaskCompleted / subtaskCount) * 100) : 0;
 
   return (
-    <div className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
+    <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
       <div className="flex items-center justify-between mb-3">
         <div className="text-sm font-bold text-slate-800">サブタスク</div>
         <div className="text-xs text-slate-500">{subtaskCompleted}/{subtaskCount} 完了</div>

ui/src/components/detail/tabs/TimelineTab.tsx

@@ -19,7 +19,7 @@ export function TimelineTab({ comments }: { comments: LocalTaskComment[] }) {
           );
         }
         return (
-          <div key={c.id} className="bg-white border border-slate-200 rounded-xl p-3 shadow-sm">
+          <div key={c.id} className="bg-canvas border border-slate-200 rounded-xl p-3 shadow-sm">
             <div className="flex justify-between items-center mb-1.5">
               <div className="text-xs font-bold text-slate-700">{c.author}</div>
               <div className="text-2xs text-slate-400">{new Date(c.createdAt).toLocaleString()}</div>

ui/src/components/detail/tabs/TraceTab.tsx

@@ -60,7 +60,7 @@ function parseEventsJsonl(raw: string): ParseSummary {
 const CATEGORIES: Array<{ id: string; label: string; kinds: string[]; tone: string }> = [
   { id: 'run', label: 'Run', kinds: ['run_start', 'run_complete'], tone: 'bg-surface-2 text-slate-700 border-hairline' },
   { id: 'movement', label: 'Movement', kinds: ['movement_start', 'movement_complete', 'transition', 'complete'], tone: 'bg-blue-50 text-blue-800 border-blue-100' },
-  { id: 'tool', label: 'Tool', kinds: ['tool_call', 'tool_result'], tone: 'bg-white text-slate-700 border-hairline' },
+  { id: 'tool', label: 'Tool', kinds: ['tool_call', 'tool_result'], tone: 'bg-canvas text-slate-700 border-hairline' },
   { id: 'llm', label: 'LLM', kinds: ['llm_call_start', 'llm_call_end'], tone: 'bg-indigo-50 text-indigo-800 border-indigo-100' },
   { id: 'cache', label: 'Cache', kinds: ['cache_set', 'cache_hit', 'cache_invalidate'], tone: 'bg-amber-50 text-amber-800 border-amber-100' },
   { id: 'memory', label: 'Memory', kinds: ['memory_invalidate', 'memory_update_call', 'memory_handoff_write', 'memory_handoff_read', 'memory_delta_write', 'memory_delta_absorb', 'memory_snapshot_written', 'memory_snapshot_failed'], tone: 'bg-emerald-50 text-emerald-800 border-emerald-100' },
@@ -96,7 +96,7 @@ function formatDurationLabel(ms: number): string {
 
 function toneFor(kind: string): string {
   for (const c of CATEGORIES) if (c.kinds.includes(kind)) return c.tone;
-  return 'bg-white text-slate-600 border-slate-200';
+  return 'bg-canvas text-slate-600 border-slate-200';
 }
 
 function categoryFor(kind: string): string {
@@ -351,7 +351,7 @@ export function TraceTab({ taskId }: TraceTabProps) {
                 key={c.id}
                 onClick={() => toggleCategory(c.id)}
                 className={`h-6 px-2 text-[10px] font-medium border rounded transition-colors ${
-                  on ? c.tone : 'bg-white text-slate-400 border-hairline hover:text-slate-600'
+                  on ? c.tone : 'bg-canvas text-slate-400 border-hairline hover:text-slate-600'
                 }`}
               >
                 {c.label}
@@ -362,8 +362,8 @@ export function TraceTab({ taskId }: TraceTabProps) {
             onClick={() => toggleCategory('other')}
             className={`h-6 px-2 text-[10px] font-medium border rounded transition-colors ${
               enabledCategories.has('other')
-                ? 'bg-white text-slate-700 border-hairline'
-                : 'bg-white text-slate-400 border-hairline-soft hover:text-slate-600'
+                ? 'bg-canvas text-slate-700 border-hairline'
+                : 'bg-canvas text-slate-400 border-hairline-soft hover:text-slate-600'
             }`}
           >
             Other
@@ -373,13 +373,13 @@ export function TraceTab({ taskId }: TraceTabProps) {
           <select
             value={movementFilter}
             onChange={(e) => setMovementFilter(e.target.value)}
-            className="h-7 text-2xs border border-hairline rounded-md px-2 bg-white text-slate-700 focus:outline-none focus:ring-2 focus:ring-accent-ring"
+            className="h-7 text-2xs border border-hairline rounded-md px-2 bg-canvas text-slate-700 focus:outline-none focus:ring-2 focus:ring-accent-ring"
           >
             {movements.map((m) => (
               <option key={m} value={m}>{m === 'all' ? 'all movements' : m}</option>
             ))}
           </select>
-          <div className="flex-1 min-w-0 flex items-center gap-1.5 bg-white border border-hairline rounded-md h-7 px-2 focus-within:ring-2 focus-within:ring-accent-ring">
+          <div className="flex-1 min-w-0 flex items-center gap-1.5 bg-canvas border border-hairline rounded-md h-7 px-2 focus-within:ring-2 focus-within:ring-accent-ring">
             <svg aria-hidden="true" className="w-3 h-3 text-slate-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
             </svg>
@@ -393,7 +393,7 @@ export function TraceTab({ taskId }: TraceTabProps) {
           </div>
           <button
             onClick={() => setRefreshKey((k) => k + 1)}
-            className="h-7 w-7 flex items-center justify-center text-xs border border-hairline rounded-md text-slate-500 bg-white hover:bg-surface transition-colors"
+            className="h-7 w-7 flex items-center justify-center text-xs border border-hairline rounded-md text-slate-500 bg-canvas hover:bg-surface transition-colors"
             title="手動更新（自動 5 秒ごとにも更新されます）"
           >
             ↻
@@ -408,7 +408,7 @@ export function TraceTab({ taskId }: TraceTabProps) {
 
       {/* Tool / LLM time aggregation — surfaces "what ate the wall-clock". */}
       {(toolTimings.tools.length > 0 || toolTimings.llm.count > 0) && (
-        <div className="border border-hairline rounded-md p-2 bg-white">
+        <div className="border border-hairline rounded-md p-2 bg-canvas">
           <div className="section-label mb-1.5">time by source</div>
           <div className="flex flex-col gap-0.5">
             {toolTimings.llm.count > 0 && (() => {

ui/src/components/embed/AmazonProductsCard.tsx

@@ -29,7 +29,7 @@ export function AmazonProductsCard({ data, onExpand }: { data: AmazonData; onExp
             href={p.productUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="bg-white border border-slate-200 rounded-lg p-2 cursor-pointer hover:border-blue-300 hover:shadow-sm transition-all flex-shrink-0 no-underline"
+            className="bg-canvas border border-slate-200 rounded-lg p-2 cursor-pointer hover:border-blue-300 hover:shadow-sm transition-all flex-shrink-0 no-underline"
             style={{ minWidth: 160, maxWidth: 160 }}
           >
             <div className="w-full h-20 bg-slate-100 rounded flex items-center justify-center mb-2 overflow-hidden">

ui/src/components/embed/AmazonProductsDetail.tsx

@@ -25,7 +25,7 @@ export function AmazonProductsDetail({ data }: { data: AmazonData }) {
 
       <div className="space-y-6">
         {products.map((p, i) => (
-          <div key={p.asin} className="bg-white border border-slate-200 rounded-xl p-4">
+          <div key={p.asin} className="bg-canvas border border-slate-200 rounded-xl p-4">
             <div className="flex gap-4 flex-col sm:flex-row">
               {/* Product image */}
               <div className="w-full sm:w-40 h-40 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">

ui/src/components/embed/EmbedModal.tsx

@@ -36,7 +36,7 @@ export function EmbedModal({ open, onClose, children }: EmbedModalProps) {
       {/* Modal content */}
       <div
         className="
-          relative bg-white overflow-y-auto
+          relative bg-surface overflow-y-auto
           w-full h-full
           sm:w-auto sm:h-auto sm:max-w-[720px] sm:max-h-[85vh] sm:min-w-[400px]
           sm:rounded-2xl sm:shadow-2xl sm:m-4

ui/src/components/embed/MapPlacesCard.tsx

@@ -17,7 +17,7 @@ export function MapPlacesCard({ data, onExpand }: { data: MapData; onExpand: ()
         {places.slice(0, 5).map((p, i) => (
           <div
             key={`${p.lat}-${p.lon}`}
-            className="flex items-start gap-2 bg-white border border-slate-200 rounded-lg px-3 py-2"
+            className="flex items-start gap-2 bg-canvas border border-slate-200 rounded-lg px-3 py-2"
           >
             <span className="text-slate-400 font-mono flex-shrink-0" style={{ fontSize: 11 }}>{i + 1}</span>
             <div className="min-w-0">

ui/src/components/embed/MapPlacesDetail.tsx

@@ -98,7 +98,7 @@ export function MapPlacesDetail({ data }: { data: MapData }) {
       {/* Place list */}
       <div className="space-y-4">
         {places.map((p, i) => (
-          <div key={`${p.lat}-${p.lon}`} className="bg-white border border-slate-200 rounded-xl p-4">
+          <div key={`${p.lat}-${p.lon}`} className="bg-canvas border border-slate-200 rounded-xl p-4">
             <div className="text-slate-400 mb-1" style={{ fontSize: 13 }}>#{i + 1}</div>
             <h3 className="text-sm font-semibold text-slate-800 leading-snug mb-2">{p.name}</h3>
 

ui/src/components/embed/XPostsCard.tsx

@@ -26,7 +26,7 @@ export function XPostsCard({ data, onExpand }: { data: XPostData; onExpand: () =
             href={p.postUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-start gap-2 bg-white border border-slate-200 rounded-lg px-3 py-2 no-underline hover:border-blue-300 hover:shadow-sm transition-all"
+            className="flex items-start gap-2 bg-canvas border border-slate-200 rounded-lg px-3 py-2 no-underline hover:border-blue-300 hover:shadow-sm transition-all"
           >
             <img
               src={p.authorImageUrl}

ui/src/components/embed/XPostsDetail.tsx

@@ -28,7 +28,7 @@ export function XPostsDetail({ data }: { data: XPostData }) {
 
       <div className="space-y-4">
         {posts.map((p) => (
-          <div key={p.id} className="bg-white border border-slate-200 rounded-xl p-4">
+          <div key={p.id} className="bg-canvas border border-slate-200 rounded-xl p-4">
             {/* Author header */}
             <div className="flex items-center gap-3 mb-3">
               <img

ui/src/components/embed/YouTubeVideosCard.tsx

@@ -20,7 +20,7 @@ export function YouTubeVideosCard({ data, onExpand }: { data: YouTubeData; onExp
             href={v.videoUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="bg-white border border-slate-200 rounded-lg overflow-hidden cursor-pointer hover:border-red-300 hover:shadow-sm transition-all flex-shrink-0 no-underline"
+            className="bg-canvas border border-slate-200 rounded-lg overflow-hidden cursor-pointer hover:border-red-300 hover:shadow-sm transition-all flex-shrink-0 no-underline"
             style={{ minWidth: 200, maxWidth: 200 }}
           >
             <div className="relative">

ui/src/components/embed/YouTubeVideosDetail.tsx

@@ -11,7 +11,7 @@ export function YouTubeVideosDetail({ data }: { data: YouTubeData }) {
 
       <div className="space-y-6">
         {videos.map((v, i) => (
-          <div key={v.videoId} className="bg-white border border-slate-200 rounded-xl p-4">
+          <div key={v.videoId} className="bg-canvas border border-slate-200 rounded-xl p-4">
             <div className="flex gap-4 flex-col sm:flex-row">
               {/* Thumbnail */}
               <a

ui/src/components/files/FileBrowser.tsx

@@ -85,7 +85,7 @@ function FileSortMenu({ sort, onChange }: { sort: FileSort; onChange: (s: FileSo
         </svg>
       </button>
       {open && (
-        <div className="absolute right-0 top-[calc(100%+6px)] z-10 bg-white border border-hairline rounded-md shadow min-w-[140px] p-1">
+        <div className="absolute right-0 top-[calc(100%+6px)] z-10 bg-canvas border border-hairline rounded-md shadow min-w-[140px] p-1">
           {SORT_OPTIONS.map(o => {
             const selected = sort === o.value;
             return (
@@ -149,7 +149,7 @@ export function FileBrowser({
   // Icon-only action buttons. Replaces the wider "Preview" / "DL" / "Open"
   // text buttons that were squeezing long filenames before. Sized 32px for
   // finger-friendly tap targets on iPhone (still compact on desktop).
-  const iconBtn = 'w-8 h-8 flex items-center justify-center rounded-md border border-hairline bg-white text-slate-500 hover:text-slate-900 hover:bg-surface transition-colors';
+  const iconBtn = 'w-8 h-8 flex items-center justify-center rounded-md border border-hairline bg-canvas text-slate-500 hover:text-slate-900 hover:bg-surface transition-colors';
 
   return (
     <div className="flex flex-col gap-3">
@@ -161,7 +161,7 @@ export function FileBrowser({
             className={`px-2 h-7 rounded text-2xs font-medium border transition-colors ${
               section === s
                 ? 'border-accent/60 bg-accent-soft text-accent font-semibold'
-                : 'border-hairline bg-white text-slate-600 hover:bg-surface'
+                : 'border-hairline bg-canvas text-slate-600 hover:bg-surface'
             }`}
           >
             {s}
@@ -193,7 +193,7 @@ export function FileBrowser({
       {pathSegments.length > 0 && (
         <button
           onClick={() => onNavigate(pathSegments.slice(0, -1).join('/'))}
-          className="self-start inline-flex items-center gap-1 px-2 h-7 rounded border border-hairline bg-white text-2xs text-slate-600 hover:bg-surface transition-colors"
+          className="self-start inline-flex items-center gap-1 px-2 h-7 rounded border border-hairline bg-canvas text-2xs text-slate-600 hover:bg-surface transition-colors"
         >
           <svg className="w-3 h-3" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <path d="M10 4l-4 4 4 4M6 8h6" />
@@ -206,7 +206,7 @@ export function FileBrowser({
         {sortedEntries.map(entry => (
           <div
             key={`${entry.kind}:${entry.path}`}
-            className="flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-white border border-hairline hover:bg-surface transition-colors"
+            className="flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-canvas border border-hairline hover:bg-surface transition-colors"
           >
             <span className="text-slate-400 flex-shrink-0" aria-hidden="true">
               {entry.kind === 'directory' ? (

ui/src/components/files/FilePreview.tsx

@@ -75,7 +75,7 @@ function renderCsv(csv: string) {
           {rows.slice(0, 120).map((r, i) => (
             <tr key={i}>
               {r.slice(0, 20).map((c, j) => (
-                <td key={j} className={`border border-slate-200 px-2 py-1 ${i === 0 ? 'bg-slate-100 font-bold' : 'bg-white'}`}>
+                <td key={j} className={`border border-slate-200 px-2 py-1 ${i === 0 ? 'bg-slate-100 font-bold' : 'bg-canvas'}`}>
                   {c}
                 </td>
               ))}
@@ -603,7 +603,7 @@ function renderJsonl(content: string): JSX.Element {
         </thead>
         <tbody>
           {records.map((record, i) => (
-            <tr key={i} className={i % 2 === 0 ? 'bg-white' : 'bg-slate-50'}>
+            <tr key={i} className={i % 2 === 0 ? 'bg-canvas' : 'bg-slate-50'}>
               {columns.map(col => (
                 <td key={col} className="px-3 py-1.5 border-b border-slate-100 align-top">
                   {formatCell(col, record[col])}
@@ -678,7 +678,7 @@ export function FilePreview({ name, content, imageSrc, markdownImageBaseUrl, onC
           <div className="flex gap-2 justify-end">
             <button
               onClick={() => { setMode('view'); setError(''); }}
-              className="px-3 h-8 text-xs rounded-md border border-hairline bg-white text-slate-700 hover:bg-surface transition-colors"
+              className="px-3 h-8 text-xs rounded-md border border-hairline bg-canvas text-slate-700 hover:bg-surface transition-colors"
             >
               キャンセル
             </button>
@@ -736,13 +736,13 @@ export function FilePreview({ name, content, imageSrc, markdownImageBaseUrl, onC
   return (
     <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-[env(safe-area-inset-top)_env(safe-area-inset-right)_env(safe-area-inset-bottom)_env(safe-area-inset-left)]" onClick={onClose}>
       <div
-        className="bg-white rounded-md border border-hairline shadow-md flex flex-col overflow-hidden"
+        className="bg-surface rounded-md border border-hairline shadow-md flex flex-col overflow-hidden"
         style={{ width: modalWidth, maxHeight: 'min(90vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px))' }}
         onClick={e => e.stopPropagation()}
         role="dialog"
         aria-modal="true"
       >
-        <div className="flex justify-between items-center px-4 py-2.5 border-b border-hairline flex-shrink-0 sticky top-0 bg-white z-10 gap-2">
+        <div className="flex justify-between items-center px-4 py-2.5 border-b border-hairline flex-shrink-0 sticky top-0 bg-surface z-10 gap-2">
           <div className="font-mono text-xs text-slate-700 truncate" title={name}>{name}</div>
           <div className="flex items-center gap-1 flex-shrink-0">
             {isMarkdownFile && mode === 'view' && (
@@ -750,7 +750,7 @@ export function FilePreview({ name, content, imageSrc, markdownImageBaseUrl, onC
                 onClick={handlePrint}
                 disabled={printing}
                 title="ブラウザの印刷ダイアログから PDF として保存または印刷"
-                className="inline-flex items-center gap-1 px-2.5 h-7 text-2xs font-medium rounded-md border border-hairline bg-white text-slate-700 hover:bg-surface disabled:opacity-50 transition-colors"
+                className="inline-flex items-center gap-1 px-2.5 h-7 text-2xs font-medium rounded-md border border-hairline bg-canvas text-slate-700 hover:bg-surface disabled:opacity-50 transition-colors"
               >
                 <svg className="w-3 h-3" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                   <path d="M4 5V2h8v3M4 11H2.5A1.5 1.5 0 0 1 1 9.5v-3A1.5 1.5 0 0 1 2.5 5h11A1.5 1.5 0 0 1 15 6.5v3a1.5 1.5 0 0 1-1.5 1.5H12M4 9.5h8v4.5H4z" />
@@ -761,7 +761,7 @@ export function FilePreview({ name, content, imageSrc, markdownImageBaseUrl, onC
             {canEdit && mode === 'view' && (
               <button
                 onClick={() => { setEditContent(currentContent); setMode('edit'); }}
-                className="inline-flex items-center gap-1 px-2.5 h-7 text-2xs font-medium rounded-md border border-hairline bg-white text-slate-700 hover:bg-surface transition-colors"
+                className="inline-flex items-center gap-1 px-2.5 h-7 text-2xs font-medium rounded-md border border-hairline bg-canvas text-slate-700 hover:bg-surface transition-colors"
               >
                 <svg className="w-3 h-3" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                   <path d="M11.5 2.5l2 2L5 13l-2.5.5L3 11l8.5-8.5z" />

ui/src/components/layout/NavDrawer.tsx

@@ -166,7 +166,7 @@ export function NavDrawer({
         tabIndex={-1}
         onKeyDown={onPanelKeyDown}
         {...(!open && { inert: '' })}
-        className={`fixed left-0 top-0 bottom-0 z-50 w-[min(280px,80vw)] bg-white shadow-xl flex flex-col motion-safe:transition-transform duration-200 ease-out ${
+        className={`fixed left-0 top-0 bottom-0 z-50 w-[min(280px,80vw)] bg-surface shadow-xl flex flex-col motion-safe:transition-transform duration-200 ease-out ${
           open ? 'translate-x-0' : '-translate-x-full'
         }`}
         style={{

ui/src/components/layout/TopBar.tsx

@@ -74,7 +74,7 @@ export function TopBar({
 
   return (
     <div
-      className="flex-shrink-0 bg-white border-b border-hairline px-4 flex items-center"
+      className="flex-shrink-0 bg-canvas border-b border-hairline px-4 flex items-center"
       style={{
         paddingTop: 'env(safe-area-inset-top, 0px)',
         minHeight: 'calc(48px + env(safe-area-inset-top, 0px))',

ui/src/components/list/FilterBar.tsx

@@ -87,7 +87,7 @@ function SortMenu({
         </svg>
       </button>
       {open && (
-        <div className="absolute right-0 top-[calc(100%+6px)] z-10 bg-white border border-hairline rounded-md shadow min-w-[160px] p-1">
+        <div className="absolute right-0 top-[calc(100%+6px)] z-10 bg-surface border border-hairline rounded-md shadow min-w-[160px] p-1">
           {SORT_OPTIONS.map(o => {
             const selected = sortMode === o.value;
             return (
@@ -138,7 +138,7 @@ export function FilterBar({
 }: FilterBarProps) {
   return (
     <div className="flex flex-col gap-2 pb-3 border-b border-hairline">
-      <div className="flex items-center gap-1.5 bg-white border border-hairline rounded-md pl-2.5 pr-1 h-8">
+      <div className="flex items-center gap-1.5 bg-canvas border border-hairline rounded-md pl-2.5 pr-1 h-8">
         <svg aria-hidden="true" className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
         </svg>
@@ -161,7 +161,7 @@ export function FilterBar({
           className={`flex-shrink-0 px-2 h-7 rounded text-2xs font-medium border transition-colors whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring ${
             selectedStatus === 'all'
               ? 'border-accent/60 bg-accent-soft text-accent font-semibold'
-              : 'border-hairline bg-white text-slate-600 hover:bg-surface'
+              : 'border-hairline bg-canvas text-slate-600 hover:bg-surface'
           }`}
         >
           すべて <span className="text-slate-400 ml-0.5 font-mono tabular-nums">{totalCount}</span>
@@ -175,7 +175,7 @@ export function FilterBar({
             className={`flex-shrink-0 px-2 h-7 rounded text-2xs font-medium border transition-colors whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring ${
               selectedStatus === status
                 ? 'border-accent/60 bg-accent-soft text-accent font-semibold'
-                : 'border-hairline bg-white text-slate-600 hover:bg-surface'
+                : 'border-hairline bg-canvas text-slate-600 hover:bg-surface'
             }`}
           >
             {COLUMN_LABELS[status]} <span className="text-slate-400 ml-0.5 font-mono tabular-nums">{counts[status] ?? 0}</span>

ui/src/components/list/TaskListItem.tsx

@@ -18,7 +18,7 @@ export const LocalTaskListItem = memo(function LocalTaskListItem({ task, active,
       className={`w-full text-left px-3 py-2.5 rounded-md border transition-colors ${
         active
           ? 'border-accent/60 bg-accent-soft'
-          : 'border-hairline bg-white hover:bg-surface'
+          : 'border-hairline bg-canvas hover:bg-surface'
       }`}
     >
       <div className="flex items-center justify-between gap-2 min-w-0">

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'
       }`}
     />
   );

ui/src/components/shared/StatChip.tsx

@@ -7,7 +7,7 @@ interface StatChipProps {
 export function StatChip({ label, value, valueClassName }: StatChipProps) {
   const isNumber = typeof value === 'number';
   return (
-    <div className="flex-1 min-w-[72px] bg-white border border-slate-200 rounded-xl px-3 py-2 shadow-sm">
+    <div className="flex-1 min-w-[72px] bg-canvas border border-slate-200 rounded-xl px-3 py-2 shadow-sm">
       <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wide">{label}</div>
       <div
         className={

ui/src/components/userfolder/AddBrowserSessionDialog.tsx

@@ -85,7 +85,7 @@ export function AddBrowserSessionDialog({ existingProfile, 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 ${dialogSize} overflow-hidden flex flex-col`}>
+      <div className={`bg-surface rounded-lg shadow-xl ${dialogSize} overflow-hidden flex flex-col`}>
         <div className="px-4 py-3 border-b border-hairline flex items-center justify-between">
           <h3 className="text-sm font-semibold text-slate-800">
             {existingProfile ? `再ログイン: ${existingProfile.label}` : 'ブラウザセッションを追加'}

ui/src/components/userfolder/MonacoFileEditor.tsx

@@ -99,7 +99,7 @@ export function MonacoFileEditor({ subdir, filename, content, mtime, size, onSav
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* File header */}
-      <div className="flex-shrink-0 flex items-center gap-2 px-4 py-2.5 border-b border-hairline bg-white">
+      <div className="flex-shrink-0 flex items-center gap-2 px-4 py-2.5 border-b border-hairline bg-canvas">
         <span className="text-xs font-mono font-semibold text-slate-800 truncate">
           {filename}
         </span>
@@ -146,7 +146,7 @@ export function MonacoFileEditor({ subdir, filename, content, mtime, size, onSav
       </div>
 
       {/* Footer: save button + metadata */}
-      <div className="flex-shrink-0 flex items-center gap-3 px-4 py-2.5 border-t border-hairline bg-white">
+      <div className="flex-shrink-0 flex items-center gap-3 px-4 py-2.5 border-t border-hairline bg-canvas">
         {!isReadOnly && (
           <button
             type="button"

ui/src/components/userfolder/NotesPanel.tsx

@@ -99,14 +99,14 @@ function NewNoteForm({ onCreated }: { onCreated: (filePath: string) => void }) {
       <div className="flex flex-col gap-2">
         <div className="flex gap-2 items-center">
           <input
-            className="flex-1 border border-hairline rounded px-2 py-1 text-[13px] bg-white focus:outline-none focus:ring-1 focus:ring-accent"
+            className="flex-1 border border-hairline rounded px-2 py-1 text-[13px] bg-canvas focus:outline-none focus:ring-1 focus:ring-accent"
             placeholder="フォルダー名 (例: cve)"
             value={folder}
             onChange={(e) => setFolder(e.target.value)}
           />
           <span className="text-slate-400 text-[13px]">/</span>
           <input
-            className="flex-1 border border-hairline rounded px-2 py-1 text-[13px] bg-white focus:outline-none focus:ring-1 focus:ring-accent"
+            className="flex-1 border border-hairline rounded px-2 py-1 text-[13px] bg-canvas focus:outline-none focus:ring-1 focus:ring-accent"
             placeholder="ファイル名 (例: foo.md)"
             value={fileName}
             onChange={(e) => setFileName(e.target.value)}
@@ -278,7 +278,7 @@ tags: [security, cve]
           <label className="flex flex-col gap-0.5">
             <span className="text-2xs font-medium text-slate-500 uppercase tracking-wide">Title</span>
             <input
-              className="border border-hairline rounded px-2 py-1 text-[13px] bg-white focus:outline-none focus:ring-1 focus:ring-accent"
+              className="border border-hairline rounded px-2 py-1 text-[13px] bg-canvas focus:outline-none focus:ring-1 focus:ring-accent"
               value={state.title}
               onChange={(e) => setState({ ...state, title: e.target.value })}
               placeholder="(optional)"
@@ -289,7 +289,7 @@ tags: [security, cve]
           <label className="flex flex-col gap-0.5">
             <span className="text-2xs font-medium text-slate-500 uppercase tracking-wide">Visibility</span>
             <select
-              className="border border-hairline rounded px-2 py-1 text-[13px] bg-white focus:outline-none focus:ring-1 focus:ring-accent"
+              className="border border-hairline rounded px-2 py-1 text-[13px] bg-canvas focus:outline-none focus:ring-1 focus:ring-accent"
               value={state.visibility}
               onChange={(e) => setState({ ...state, visibility: e.target.value as ParsedFm['visibility'] })}
             >
@@ -304,7 +304,7 @@ tags: [security, cve]
             <label className="flex flex-col gap-0.5">
               <span className="text-2xs font-medium text-slate-500 uppercase tracking-wide">Scope Org ID</span>
               <input
-                className="border border-hairline rounded px-2 py-1 text-[13px] bg-white focus:outline-none focus:ring-1 focus:ring-accent"
+                className="border border-hairline rounded px-2 py-1 text-[13px] bg-canvas focus:outline-none focus:ring-1 focus:ring-accent"
                 value={state.scope_org_id}
                 onChange={(e) => setState({ ...state, scope_org_id: e.target.value })}
                 placeholder="gitea-org-name"
@@ -316,7 +316,7 @@ tags: [security, cve]
           <label className="flex flex-col gap-0.5">
             <span className="text-2xs font-medium text-slate-500 uppercase tracking-wide">Mode Hint</span>
             <select
-              className="border border-hairline rounded px-2 py-1 text-[13px] bg-white focus:outline-none focus:ring-1 focus:ring-accent"
+              className="border border-hairline rounded px-2 py-1 text-[13px] bg-canvas focus:outline-none focus:ring-1 focus:ring-accent"
               value={state.mode_hint}
               onChange={(e) => setState({ ...state, mode_hint: e.target.value as ParsedFm['mode_hint'] })}
             >
@@ -330,7 +330,7 @@ tags: [security, cve]
           <label className="flex flex-col gap-0.5 col-span-2">
             <span className="text-2xs font-medium text-slate-500 uppercase tracking-wide">Tags (カンマ区切り)</span>
             <input
-              className="border border-hairline rounded px-2 py-1 text-[13px] bg-white focus:outline-none focus:ring-1 focus:ring-accent"
+              className="border border-hairline rounded px-2 py-1 text-[13px] bg-canvas focus:outline-none focus:ring-1 focus:ring-accent"
               value={state.tags}
               onChange={(e) => setState({ ...state, tags: e.target.value })}
               placeholder="security, cve, ..."
@@ -342,7 +342,7 @@ tags: [security, cve]
       {/* Markdown body */}
       <div className="flex-1 min-h-0 overflow-hidden">
         <textarea
-          className="w-full h-full resize-none p-4 font-mono text-[13px] text-slate-800 bg-white focus:outline-none"
+          className="w-full h-full resize-none p-4 font-mono text-[13px] text-slate-800 bg-canvas focus:outline-none"
           value={state.body}
           onChange={(e) => setState({ ...state, body: e.target.value })}
           placeholder="Markdown body…"

ui/src/components/userfolder/PetsPanel.tsx

@@ -43,7 +43,7 @@ function ToggleRow({
         }`}
       >
         <span
-          className={`absolute left-0 top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${
+          className={`absolute left-0 top-0.5 h-5 w-5 rounded-full bg-canvas shadow-sm transition-transform ${
             checked ? 'translate-x-5' : 'translate-x-0.5'
           }`}
         />

ui/src/components/userfolder/SaveAsScriptDialog.tsx

@@ -143,7 +143,7 @@ export function SaveAsScriptDialog({ recordingName, onClose, onSuccess }: SaveAs
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
       onClick={e => { if (e.target === e.currentTarget) onClose(); }}
     >
-      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 overflow-hidden flex flex-col max-h-[90vh]">
+      <div className="bg-surface rounded-xl shadow-xl w-full max-w-lg mx-4 overflow-hidden flex flex-col max-h-[90vh]">
         {/* Header */}
         <div className="flex items-center gap-3 px-5 py-4 border-b border-hairline">
           <span className="text-sm font-semibold text-slate-800 flex-1">Save as Script</span>
@@ -251,19 +251,19 @@ export function SaveAsScriptDialog({ recordingName, onClose, onSuccess }: SaveAs
                     value={hint.name}
                     onChange={e => updateHint(idx, { name: e.target.value })}
                     placeholder="param name"
-                    className="px-2 py-1 rounded border border-hairline text-2xs font-mono bg-white focus:outline-none focus:ring-1 focus:ring-accent/30"
+                    className="px-2 py-1 rounded border border-hairline text-2xs font-mono bg-canvas focus:outline-none focus:ring-1 focus:ring-accent/30"
                   />
                   <input
                     type="text"
                     value={hint.valueToReplace}
                     onChange={e => updateHint(idx, { valueToReplace: e.target.value })}
                     placeholder="value to replace (literal)"
-                    className="px-2 py-1 rounded border border-hairline text-2xs font-mono bg-white focus:outline-none focus:ring-1 focus:ring-accent/30"
+                    className="px-2 py-1 rounded border border-hairline text-2xs font-mono bg-canvas focus:outline-none focus:ring-1 focus:ring-accent/30"
                   />
                   <select
                     value={hint.type}
                     onChange={e => updateHint(idx, { type: e.target.value as ParamHint['type'] })}
-                    className="px-2 py-1 rounded border border-hairline text-2xs bg-white focus:outline-none focus:ring-1 focus:ring-accent/30"
+                    className="px-2 py-1 rounded border border-hairline text-2xs bg-canvas focus:outline-none focus:ring-1 focus:ring-accent/30"
                   >
                     <option value="string">string</option>
                     <option value="number">number</option>

ui/src/components/userfolder/SshConnectionForm.tsx

@@ -379,7 +379,7 @@ export function SshConnectionForm({ existing, adminContext, onSubmit, onCancel }
           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"
+          className="px-3 h-7 text-xs text-slate-700 border border-hairline bg-canvas rounded-md hover:bg-surface disabled:opacity-50"
         >
           キャンセル
         </button>

ui/src/components/userfolder/SshConnectionsPanel.tsx

@@ -258,7 +258,7 @@ export function SshConnectionsPanel({ showToast }: SshConnectionsPanelProps = {}
         {error && <div className="text-xs text-red-500">読み込みに失敗しました: {String(error)}</div>}
 
         {creating && (
-          <section className="mb-5 border border-accent/40 rounded-md bg-white p-4">
+          <section className="mb-5 border border-accent/40 rounded-md bg-canvas p-4">
             <h3 className="text-xs font-semibold text-slate-700 mb-2">新規 SSH 接続</h3>
             <SshConnectionForm
               existing={null}

ui/src/components/userfolder/SshHostKeyDialog.tsx

@@ -49,7 +49,7 @@ export function SshHostKeyDialog({ test, replaceMode, onClose, onVerify }: SshHo
 
   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-hairline overflow-hidden">
+      <div className="w-full max-w-lg bg-surface rounded-md shadow-lg border border-hairline overflow-hidden">
         <div className="px-5 py-3 border-b border-hairline">
           <h3 className="text-sm font-semibold text-slate-900">
             {test.verdict === 'first_observe' ? 'ホストキーを記録' : 'ホストキーを置き換え'}
@@ -98,7 +98,7 @@ export function SshHostKeyDialog({ test, replaceMode, onClose, onVerify }: SshHo
             type="button"
             onClick={onClose}
             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"
+            className="px-3 h-7 text-xs text-slate-700 border border-hairline bg-canvas rounded-md hover:bg-surface disabled:opacity-50"
           >
             キャンセル
           </button>

ui/src/components/userfolder/SshPublicKeyDialog.tsx

@@ -33,7 +33,7 @@ export function SshPublicKeyDialog({ publicKey, label, freshlyGenerated, onClose
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
-      <div className="w-full max-w-2xl bg-white rounded-md shadow-lg border border-hairline overflow-hidden">
+      <div className="w-full max-w-2xl bg-surface rounded-md shadow-lg border border-hairline overflow-hidden">
         <div className="px-4 py-3 border-b border-hairline bg-surface/40">
           <h3 className="text-sm font-semibold text-slate-900">
             公開鍵 {label && <span className="font-normal text-slate-500">— {label}</span>}
@@ -83,7 +83,7 @@ export function SshPublicKeyDialog({ publicKey, label, freshlyGenerated, onClose
           <button
             type="button"
             onClick={onClose}
-            className="px-3 h-7 text-xs text-slate-700 border border-hairline bg-white rounded-md hover:bg-surface"
+            className="px-3 h-7 text-xs text-slate-700 border border-hairline bg-canvas rounded-md hover:bg-surface"
           >
             閉じる
           </button>

ui/src/components/userfolder/SubscriptionsPanel.tsx

@@ -117,7 +117,7 @@ function NoteContentModal({
       onClick={onClose}
     >
       <div
-        className="bg-white rounded-md shadow-lg w-full max-w-3xl max-h-[85vh] flex flex-col overflow-hidden"
+        className="bg-surface rounded-md shadow-lg w-full max-w-3xl max-h-[85vh] flex flex-col overflow-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         <header className="flex items-center justify-between border-b border-hairline px-4 py-3 flex-shrink-0">
@@ -157,7 +157,7 @@ function ModeSelect({
 }) {
   return (
     <select
-      className="border border-hairline rounded text-2xs px-1 py-0.5 bg-white focus:outline-none focus:ring-1 focus:ring-accent"
+      className="border border-hairline rounded text-2xs px-1 py-0.5 bg-canvas focus:outline-none focus:ring-1 focus:ring-accent"
       value={mode}
       onChange={(e) => onChange(e.target.value as 'search' | 'inject')}
     >
@@ -412,7 +412,7 @@ export function SubscriptionsPanel({ currentUserId }: { currentUserId: string })
         <section>
           <h3 className="text-[13px] font-semibold text-slate-800 mb-2">Discover</h3>
           <input
-            className="border border-hairline rounded px-2 py-1.5 mb-3 w-full text-[13px] bg-white focus:outline-none focus:ring-1 focus:ring-accent placeholder:text-slate-400"
+            className="border border-hairline rounded px-2 py-1.5 mb-3 w-full text-[13px] bg-canvas focus:outline-none focus:ring-1 focus:ring-accent placeholder:text-slate-400"
             placeholder="Search by title, tag, body…"
             value={q}
             onChange={(e) => setQ(e.target.value)}

ui/src/components/userfolder/UserFolderTab.tsx

@@ -325,7 +325,7 @@ export function UserFolderTab({ showToast }: UserFolderTabProps = {}) {
     <div className="flex h-full gap-2 p-2 overflow-hidden">
       {/* Left: file tree */}
       <div
-        className="bg-white border border-hairline rounded-md overflow-hidden flex flex-col"
+        className="bg-canvas border border-hairline rounded-md overflow-hidden flex flex-col"
         style={{ width: 'clamp(200px, 22vw, 280px)', flexShrink: 0 }}
       >
         <div className="flex-shrink-0 px-3 py-2.5 border-b border-hairline">
@@ -346,7 +346,7 @@ export function UserFolderTab({ showToast }: UserFolderTabProps = {}) {
       </div>
 
       {/* Right: editor / virtual panel */}
-      <div className="flex-1 min-w-0 bg-white border border-hairline rounded-md overflow-hidden flex flex-col">
+      <div className="flex-1 min-w-0 bg-canvas border border-hairline rounded-md overflow-hidden flex flex-col">
         {/* agents-md virtual pane */}
         {isVirtualSelected && selectedSubdir === 'agents-md' && (
           <AgentsMdPanel onDirtyChange={setEditorDirty} />