sync: update from private repo (d8074a7)

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} />