release: v0.11.1

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.11.1] - 2026-07-19
+
+> **Highlight**: **サイドバー同期トーストの見切れ修正と Toast のグローバル1本化**。サイドバーの同期ボタン押下時に表示されるトーストが、`transform` を持つ祖先（`AppShell` のサイドバー枠）の containing block に閉じ込められてビューポート右下ではなくサイドバー基準に配置され、左端が見切れていた問題を解消した。#1399 で `ToastContainer` を `document.body` への `createPortal` 化（`mounted` ガードで SSR 安全）して根本修正し、#1400 で散在していた `ToastContainer`/`useToast` を単一の `ToastProvider` ＋ 単一 Portal ホストへ統合して、描画位置がツリー構造に依存しなくなるようにし再発を構造的に防止した。
+
+### Fixed
+
+- **サイドバー同期トーストの見切れを修正** (#1399): 同期ボタンのトーストは `position: fixed` だが、描画元 `SyncButton` の祖先 `<aside data-testid="sidebar-container">`（`AppShell`）が `transform`（スライド演出）を持つため、CSS 仕様上その祖先が `fixed` の containing block となり、トーストがビューポートではなくサイドバー枠（既定幅 224px）基準に配置され、`min-w-[300px]` の左端が画面外へはみ出していた。`ToastContainer` を `createPortal(..., document.body)` で描画するよう変更（`mounted` ガードでクライアントマウント後のみ portal、`Modal`/`CommandPalette` と同パターン）し、呼び出し元のツリー位置に関わらず `fixed` がビューポート基準となるようにした。
+
+### Changed
+
+- **Toast をグローバル1本化（`ToastProvider` + 単一 Portal ホスト）** (#1400): 各コンポーネントでローカルに生成していた `ToastContainer`/`useToast` を、単一の `ToastProvider`（Context）＋ 1 箇所だけ描画する Portal ホストへ統合した。`useToast()` は共有 Context を返すフックに変更（Provider 外でもクラッシュしないフォールバック付き）。`Sidebar`・`CommandPalette`・`NotificationsSettings`・`worktree` 配下の各 consumer からローカルの `ToastContainer` を撤去し、共有 Context 経由に置き換え。fixed トーストホストが 1 つに集約され、位置の一貫性・スタッキング制御・重複排除を実現し、`transform` 祖先による見切れ等の再発を構造的に防止する。
+
 ## [0.11.0] - 2026-07-18
 
 > **Highlight**: **npx 起動サーバの GUI アップデート対応**。`npx commandmate` で起動したサーバの GUI アップデート機能を2段で整備した。#1394 で npx を正しく検知して誤動作（「今すぐアップデート」が `202 started` を返すのに no-op → 5 分 timeout・`commandmate update` の誤案内）を解消し、#1395 で同ボタンから npx サーバをその場更新（新しい npx キャッシュ取得 → 旧デーモン停止 → 新デーモン起動 → GUI 自動リロード）できるようにした。停止前に版検証してダウンタイム0で fail-fast し、#1198 のセキュリティ不変条件（固定 argv・多重実行ロック・認証は middleware 任せ）を維持する。素の CLI `commandmate update`（npx）は従来どおり案内のみの no-op（#1319）。

docs/module-reference.md

@@ -117,7 +117,7 @@
 | `src/components/ui/Modal.tsx` | モーダルダイアログコンポーネント（Z_INDEX.MODAL使用。Issue #1114: useExitAnimationでdata-state=closedのfade+zoom-out exitを200ms再生後にアンマウント） |
 | `src/components/ui/StatusDot.tsx` | 共通ステータスドット（Issue #1051: running/generating=緑グロー+パルス+静的リング(reduced-motion凍結時もreadyと識別)、waiting=amber弱点滅、idle/ready/error+未知state=静的、size sm/md/lg。infinite CSSアニメでポーリング非リセット、reduced-motionはglobals.css準拠。適用はサイドバー/Home/Sessionsのみ、worktree詳細/MobileHeaderは従来spinner据置） |
 | `src/components/common/FullScreenModal.tsx` | モバイル向けフルスクリーンモーダルシェル（Issue #825: slide-up、右上クローズ、sticky footer、visualViewportでキーボード回避、focus時scrollIntoView） |
-| `src/components/common/Toast.tsx` | トースト通知コンポーネント（Z_INDEX.TOAST使用。Issue #1114: 閉時はfade+slide-out exitを再生しonClose通知を200ms遅延） |
+| `src/components/common/Toast.tsx` | トースト通知コンポーネント（Z_INDEX.TOAST使用。Issue #1114: 閉時はfade+slide-out exitを再生しonClose通知を200ms遅延。Issue #1399: ToastContainerをdocument.bodyへcreatePortal。Issue #1400: `ToastProvider`(Context)でキューを1本化しAppProviders直下に単一ホストを描画、`useToast()`はProvider配下で共有・非配下ではローカルにフォールバック） |
 | `src/components/worktree/ContextMenu.tsx` | ファイル/ディレクトリコンテキストメニュー（Issue #162: 「移動」項目、Issue #299: Z_INDEX.CONTEXT_MENU使用。Issue #1114: 閉時fade+zoom-out exit 100ms） |
 | `src/components/worktree/FileViewer.tsx` | ファイルビューア（Issue #162: コピーボタン追加、Copy/Checkアイコン切替、useMemo最適化、画像ファイル非表示。**Issue #302: 動画表示分岐追加、canCopyロジック修正（isVideo除外）**。**Issue #411: React.memo()ラップ（named export形式、isOpen=false時のポーリング起因再レンダースキップ）**）。ファイルビューア、検索ロジックを `useFileContentSearch` に統一（Issue #723）。**Issue #1024: ダウンロード導線追加** - `<a href={worktreeId+encodePathForUrl(filePath)+'?download=1'} download>`（`data-testid="download-file-button"`、ハードコードラベル、canCopy非依存）をツールバーとエラーブロック両方に描画し全状態（成功/エラー/上限超/バイナリ）で到達可能に（モバイル専用コンポーネントのため PC file-tab の FilePanelContent は対象外） |
 | `src/components/worktree/FileTreeView.tsx` | ファイルツリー表示（Issue #162: birthtime表示、formatRelativeTime()ロケール対応、sm:inline条件表示。Issue #300: 非空状態にツールバー追加、data-testid=file-tree-toolbar/toolbar-new-file-button/toolbar-new-directory-button、onNewFile('')/onNewDirectory('')でルートレベル作成）。ファイルツリービュー（Issue #479） |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "commandmate",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "A local control plane for agent CLIs — orchestration and visibility for Claude Code, Codex, Gemini CLI, and more across Git worktrees",
   "keywords": [
     "claude-code",

src/components/common/CommandPalette.tsx

@@ -57,7 +57,7 @@ import { useLocaleSwitch } from '@/hooks/useLocaleSwitch';
 import { repositoryApi } from '@/lib/api-client';
 import { StatusDot, type StatusDotStatus } from '@/components/ui/StatusDot';
 import { Kbd } from '@/components/ui/Kbd';
-import { useToast, ToastContainer } from '@/components/common/Toast';
+import { useToast } from '@/components/common/Toast';
 import type { Worktree } from '@/types/models';
 
 /** Navigation targets shown in the palette (mirrors Header / GlobalMobileNav). */
@@ -207,7 +207,7 @@ export function CommandPalette() {
   // Read from the shared worktrees cache (always fresh + auto-retried). Optional
   // so the palette degrades gracefully when no provider is present (unit tests).
   const worktreesCache = useOptionalWorktreesCacheContext();
-  const { toasts, showToast, removeToast } = useToast();
+  const { showToast } = useToast();
 
   const [mounted, setMounted] = useState(false);
   const [search, setSearch] = useState('');
@@ -630,10 +630,6 @@ export function CommandPalette() {
           </div>
         </div>
       )}
-
-      {/* Persistent so a toast (e.g. Sync repositories) survives the palette
-          closing after the command runs. */}
-      <ToastContainer toasts={toasts} onClose={removeToast} />
     </>,
     document.body
   );

src/components/common/Toast.tsx

@@ -9,7 +9,17 @@
 
 'use client';
 
-import React, { useEffect, useState, useCallback, useRef } from 'react';
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslations } from 'next-intl';
 import { CheckCircle, XCircle, Info, AlertTriangle, X } from 'lucide-react';
 import { Z_INDEX } from '@/config/z-index';
@@ -240,7 +250,20 @@ export interface ToastContainerProps {
  * ```
  */
 export function ToastContainer({ toasts, onClose }: ToastContainerProps) {
-  return (
+  // [Issue #1399] Render through a portal to `document.body` so the container's
+  // `position: fixed` resolves against the viewport. When mounted inside a
+  // transformed ancestor (AppShell's `<aside data-testid="sidebar-container">`
+  // uses a transform), that ancestor becomes the containing block for `fixed`,
+  // pinning the toasts to the sidebar's box and clipping their left edge instead
+  // of the intended bottom-right of the screen. Guarded on `mounted` so the
+  // server render (where `document` is absent) yields null and the portal only
+  // appears after client hydration — the same pattern as CommandPalette / Modal.
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const container = (
     <div
       data-testid="toast-container"
       aria-live="polite"
@@ -259,36 +282,35 @@ export function ToastContainer({ toasts, onClose }: ToastContainerProps) {
       ))}
     </div>
   );
+
+  if (!mounted) return null;
+
+  return createPortal(container, document.body);
 }
 
 /**
- * Hook for managing toast notifications
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { showToast, toasts, removeToast } = useToast();
- *
- *   const handleSave = () => {
- *     showToast('File saved successfully', 'success');
- *   };
- *
- *   return (
- *     <>
- *       <button onClick={handleSave}>Save</button>
- *       <ToastContainer toasts={toasts} onClose={removeToast} />
- *     </>
- *   );
- * }
- * ```
+ * Shared shape for the toast controls returned by {@link useToast} and provided
+ * by {@link ToastProvider}.
  */
-export function useToast() {
+export interface ToastContextValue {
+  /** Currently visible toasts */
+  toasts: ToastItem[];
+  /** Show a new toast notification; returns the generated id */
+  showToast: (message: string, type?: ToastType, duration?: number) => string;
+  /** Remove a toast by id */
+  removeToast: (id: string) => void;
+  /** Clear all toasts */
+  clearToasts: () => void;
+}
+
+/**
+ * Internal state machine for toast notifications. Backs both the shared
+ * {@link ToastProvider} and the provider-less fallback in {@link useToast}.
+ */
+function useToastState(): ToastContextValue {
   const [toasts, setToasts] = useState<ToastItem[]>([]);
   const idCounterRef = useRef(0);
 
-  /**
-   * Show a new toast notification
-   */
   const showToast = useCallback(
     (message: string, type: ToastType = 'info', duration: number = DEFAULT_DURATION) => {
       const id = `toast-${++idCounterRef.current}-${Date.now()}`;
@@ -304,26 +326,62 @@ export function useToast() {
     []
   );
 
-  /**
-   * Remove a toast by ID
-   */
   const removeToast = useCallback((id: string) => {
     setToasts((prev) => prev.filter((toast) => toast.id !== id));
   }, []);
 
-  /**
-   * Clear all toasts
-   */
   const clearToasts = useCallback(() => {
     setToasts([]);
   }, []);
 
-  return {
-    toasts,
-    showToast,
-    removeToast,
-    clearToasts,
-  };
+  return useMemo(
+    () => ({ toasts, showToast, removeToast, clearToasts }),
+    [toasts, showToast, removeToast, clearToasts]
+  );
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+/**
+ * ToastProvider (Issue #1400)
+ *
+ * Holds a single app-wide toast queue and renders the one and only
+ * <ToastContainer> (portaled to `document.body`, per Issue #1399, so it escapes
+ * any transformed ancestor and pins to the viewport's bottom-right). Mount it
+ * once above the app (see AppProviders); every useToast() below then shares the
+ * same queue instead of spawning its own detached container.
+ */
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const value = useToastState();
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <ToastContainer toasts={value.toasts} onClose={value.removeToast} />
+    </ToastContext.Provider>
+  );
+}
+
+/**
+ * Hook for showing toast notifications.
+ *
+ * Returns the shared controls from the nearest {@link ToastProvider} (the normal
+ * case — AppProviders mounts one globally, so a single container renders every
+ * toast). With no provider above it falls back to a local, self-contained
+ * instance so isolated components/tests still work; render your own
+ * <ToastContainer> in that case.
+ *
+ * @example
+ * ```tsx
+ * function SaveButton() {
+ *   const { showToast } = useToast();
+ *   return <button onClick={() => showToast('Saved', 'success')}>Save</button>;
+ * }
+ * ```
+ */
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  const local = useToastState();
+  return ctx ?? local;
 }
 
 // Re-export types for convenience

src/components/layout/Sidebar.tsx

@@ -41,7 +41,7 @@ import { TruncationTooltip } from '@/components/common/TruncationTooltip';
 import { LocaleSwitcher } from '@/components/common/LocaleSwitcher';
 import { ThemeToggle } from '@/components/common/ThemeToggle';
 import { LogoutButton } from '@/components/common/LogoutButton';
-import { useToast, ToastContainer } from '@/components/common/Toast';
+import { useToast } from '@/components/common/Toast';
 import { repositoryApi, ApiError } from '@/lib/api-client';
 import { toBranchItem } from '@/types/sidebar';
 import type { SidebarBranchItem } from '@/types/sidebar';
@@ -838,7 +838,7 @@ const SyncButton = memo(function SyncButton({
 }) {
   const [isSyncing, setIsSyncing] = useState(false);
   const isSyncingRef = useRef(false);
-  const { showToast, toasts, removeToast } = useToast();
+  const { showToast } = useToast();
   const t = useTranslations('common');
 
   const handleSync = useCallback(async () => {
@@ -880,7 +880,6 @@ const SyncButton = memo(function SyncButton({
           <SyncIcon className={isSyncing ? 'animate-spin' : ''} />
         </button>
       </Tooltip>
-      <ToastContainer toasts={toasts} onClose={removeToast} />
     </>
   );
 });

src/components/notifications/NotificationsSettings.tsx

@@ -12,7 +12,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Bell } from 'lucide-react';
 import { Button, Card, Spinner, Switch } from '@/components/ui';
-import { useToast, ToastContainer } from '@/components/common/Toast';
+import { useToast } from '@/components/common/Toast';
 import {
   urlBase64ToUint8Array,
   isPushSupported,
@@ -26,7 +26,7 @@ interface Prefs {
 
 export function NotificationsSettings() {
   const t = useTranslations('notifications');
-  const { showToast, toasts, removeToast } = useToast();
+  const { showToast } = useToast();
 
   const [loading, setLoading] = useState(true);
   const [busy, setBusy] = useState(false);
@@ -292,7 +292,6 @@ export function NotificationsSettings() {
   return (
     <Card>
       {renderBody()}
-      <ToastContainer toasts={toasts} onClose={removeToast} />
     </Card>
   );
 }

src/components/providers/AppProviders.tsx

@@ -22,6 +22,7 @@ import { WorktreesCacheProvider } from '@/components/providers/WorktreesCachePro
 import { ViewTransitionsProvider } from '@/components/providers/ViewTransitionsProvider';
 import { RealtimeProvider } from '@/hooks/useRealtimeConnection';
 import { ConfirmProvider } from '@/components/ui/ConfirmDialog';
+import { ToastProvider } from '@/components/common/Toast';
 import { ServiceWorkerRegistrar } from '@/components/pwa/ServiceWorkerRegistrar';
 
 interface AppProvidersProps {
@@ -45,36 +46,41 @@ interface AppProvidersProps {
 export function AppProviders({ children, locale, messages, timeZone, authEnabled = false }: AppProvidersProps) {
   return (
     <NextIntlClientProvider locale={locale} messages={messages} timeZone={timeZone}>
-      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-        <AuthProvider authEnabled={authEnabled}>
-          <PcDisplaySizeProvider>
-            <SidebarProvider>
-              {/* Issue #1120: single shared WebSocket connection wrapping the
-                  worktrees cache so session-status / message / terminal pushes
-                  feed the sidebar and terminal panes; polling remains the
-                  fallback when disconnected. */}
-              <RealtimeProvider>
-                <WorktreesCacheProvider>
-                  <CommandPaletteProvider>
-                    {/* Issue #1130: `?` keyboard-shortcuts help overlay open state. */}
-                    <KeyboardShortcutsProvider>
-                      <ConfirmProvider>
-                        {/* Issue #1141: View Transitions wraps the routed content. */}
-                        <ViewTransitionsProvider>
-                          {children}
-                        </ViewTransitionsProvider>
-                        {/* Issue #1124: registers the Service Worker (prod only)
-                            and shows the update-available prompt. */}
-                        <ServiceWorkerRegistrar />
-                      </ConfirmProvider>
-                    </KeyboardShortcutsProvider>
-                  </CommandPaletteProvider>
-                </WorktreesCacheProvider>
-              </RealtimeProvider>
-            </SidebarProvider>
-          </PcDisplaySizeProvider>
-        </AuthProvider>
-      </ThemeProvider>
+      {/* Issue #1400: single app-wide toast queue + one portaled ToastContainer.
+          Sits inside NextIntlClientProvider so the toast close-button aria-label
+          resolves, and wraps everything so any useToast() below shares it. */}
+      <ToastProvider>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <AuthProvider authEnabled={authEnabled}>
+            <PcDisplaySizeProvider>
+              <SidebarProvider>
+                {/* Issue #1120: single shared WebSocket connection wrapping the
+                    worktrees cache so session-status / message / terminal pushes
+                    feed the sidebar and terminal panes; polling remains the
+                    fallback when disconnected. */}
+                <RealtimeProvider>
+                  <WorktreesCacheProvider>
+                    <CommandPaletteProvider>
+                      {/* Issue #1130: `?` keyboard-shortcuts help overlay open state. */}
+                      <KeyboardShortcutsProvider>
+                        <ConfirmProvider>
+                          {/* Issue #1141: View Transitions wraps the routed content. */}
+                          <ViewTransitionsProvider>
+                            {children}
+                          </ViewTransitionsProvider>
+                          {/* Issue #1124: registers the Service Worker (prod only)
+                              and shows the update-available prompt. */}
+                          <ServiceWorkerRegistrar />
+                        </ConfirmProvider>
+                      </KeyboardShortcutsProvider>
+                    </CommandPaletteProvider>
+                  </WorktreesCacheProvider>
+                </RealtimeProvider>
+              </SidebarProvider>
+            </PcDisplaySizeProvider>
+          </AuthProvider>
+        </ThemeProvider>
+      </ToastProvider>
     </NextIntlClientProvider>
   );
 }