@jetcrab/pi-desk 1.1.29-dev → 1.1.30-dev

package/docs/plugins.md

@@ -180,10 +180,10 @@ plugin.registerSessionHeaderItem('session-info', {
 ```
 
 - `action` 只接受固定 `icon`、`label`、`onSelect({ source, host, signal })`，不提供动态图标、文字或状态订阅。宿主显示图标加文字，异步操作期间防止重复点击；失败记录局部错误，失效后的回调不得继续使用旧 Host。信号属于该展示生命周期，不会回滚服务端已经产生的副作用。
-- `custom` 只提供 `load()`，宿主不包装点击回调。inline custom 必须额外声明正数 `minWidthRem`，单位为 `rem`；宿主按此预留可用宽度，不通过重复挂载业务视图测量。自定义内容应适应获得的容器，不能靠超宽 DOM 挤占标题。overflow custom 不声明宽度。
+- `custom` 只提供 `load()`，宿主不包装点击回调。inline custom 必须额外声明正数 `minWidthRem`，单位为 `rem`；有内容时才按此分配宽度。加载中和空内容不占宽度或间距，宿主只观察当前真实挂载，不复制业务视图测量。自定义内容应适应获得的容器，不能靠超宽 DOM 挤占标题。overflow custom 不声明宽度，加载中和空内容也不预留空行。
 - 自定义 Target 为 `{ kind: 'session-header-item', source, presentation: 'inline' | 'overflow' }`。两种表现可以使用不同模块，也可以复用同一个 `{ mount }`；loader 分别按表现缓存和重试。可复用上面的 `session-info.js`，或使用公共 React/UI 构建交互视图。
 - 标题项按插件名和注册名稳定排列；宽度不足时从末尾收进更多，宿主保留标题及必要操作。普通按钮选择后关闭更多；自定义区域内点击不会被转发，也不会自动关闭更多。Escape 或外部点击关闭浮层，键盘与触控均可操作。
-- 收纳会卸载 inline 自定义视图；只有更多打开时才挂载 overflow 自定义视图，关闭后释放。动态状态与运行/停止等复杂交互由自定义视图自行实现；业务状态归插件运行态，不归 mount，也不能只存于会被卸载的组件局部状态。卸载只清理视图资源，不停止项目进程。
+- inline 自定义视图先静默挂载，内容出现后参与宽度计算；收纳会卸载该视图。只有更多打开时才挂载 overflow 自定义视图，关闭后释放。动态状态与运行/停止等复杂交互由自定义视图自行实现；业务状态归插件运行态，不归 mount，也不能只存于会被卸载的组件局部状态。卸载只清理视图资源，不停止项目进程。
 
 两种注册均限定 Browser Entry 同步阶段，名称规则与其他贡献相同。它们需要支持对应方法的宿主和 SDK；旧宿主缺少能力时禁用这项入口，不使用 `registerContribution` 别名或访问宿主 DOM 代替。现有 `composer-panel` 仍是人工打开的会话弹窗，不是上下方挂件。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetcrab/pi-desk",
-  "version": "1.1.29-dev",
+  "version": "1.1.30-dev",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/client/l1_entry/pages/l1-error-page.tsx

@@ -13,7 +13,7 @@ export function L1ErrorPage({
 }): React.JSX.Element {
   const { t } = useTranslation('common')
   return (
-    <main className="flex min-h-dvh items-center justify-center bg-background p-4 text-foreground">
+    <main className="flex min-h-[var(--pi-desk-content-height)] items-center justify-center bg-background p-4 text-foreground">
       <div className="w-full max-w-md space-y-4 text-center">
         <h1 className="text-xl font-semibold">{t(notFound ? 'notFound' : 'pageError')}</h1>
         <div className="flex flex-wrap items-center justify-center gap-2">

package/src/client/l1_entry/providers/l1-app-providers.tsx

@@ -24,6 +24,7 @@ import { L4AppToastProvider } from '@client/l4_foundation/ui/l4-app-toast'
 import { TooltipProvider } from '@client/l4_foundation/ui/shadcn/tooltip'
 import { createL4BrowserUuid } from '@client/l4_foundation/lib/l4-browser-uuid'
 import { L4ClientIdContext } from '@client/l4_foundation/lib/l4-client-id'
+import { L4DesktopTitlebar } from '@client/l4_foundation/desktop-window/l4-desktop-titlebar'
 
 const resources = {
   en: {
@@ -76,6 +77,7 @@ export function L1AppProviders({
           <L4CodePreferencesProvider>
             <L4RegionProvider resources={resources} initialSettings={initialSettings}>
               <L4AppToastProvider>
+                <L4DesktopTitlebar />
                 <L4RegionNotice />
                 <TooltipProvider>{children}</TooltipProvider>
               </L4AppToastProvider>

package/src/client/l2_biz/auth/l2-login.module.css

@@ -1,7 +1,7 @@
 .page {
   display: grid;
   grid-template-rows: auto 1fr;
-  min-height: 100dvh;
+  min-height: var(--pi-desk-content-height, 100dvh);
   padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
     max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
   background: var(--background);

package/src/client/l2_biz/plugin-host/l2-plugin-composer-panel.tsx

@@ -35,7 +35,7 @@ export function L2PluginComposerPanel({
     <L4AppDialogRoot open onOpenChange={(open) => !open && onClose()}>
       <L4AppDialogContent
         finalFocus={false}
-        className="h-[min(720px,calc(100dvh-2rem))] max-w-4xl max-sm:h-dvh max-sm:max-h-dvh max-sm:w-full max-sm:max-w-none max-sm:rounded-none max-sm:border-0"
+        className="h-[min(720px,calc(100dvh-2rem))] max-w-4xl max-sm:h-[var(--pi-desk-content-height)] max-sm:max-h-[var(--pi-desk-content-height)] max-sm:w-full max-sm:max-w-none max-sm:rounded-none max-sm:border-0"
       >
         <L4AppDialogHeader className="border-b px-4 py-3 pr-12">
           <div className="flex min-w-0 items-center gap-3">

package/src/client/l2_biz/plugin-host/l2-plugin-contribution-host.tsx

@@ -237,7 +237,7 @@ export function L2PluginContributionHost({
           state.status === 'error' && 'hidden'
         )}
       />
-      {state.status === 'loading' ? (
+      {state.status === 'loading' && kind !== 'widget' && kind !== 'session-header-item' ? (
         <div
           role="status"
           className={cn(

package/src/client/l2_biz/plugin-host/l2-plugin-session-header-layout.ts

@@ -4,14 +4,17 @@ export function calculateL2PluginSessionHeaderInlineCount(
   moreWidth: number,
   gap: number
 ): number {
-  const total = widths.reduce((sum, width) => sum + width, 0) + Math.max(0, widths.length - 1) * gap
+  const occupiedCount = widths.filter((width) => width > 0).length
+  const total = widths.reduce((sum, width) => sum + width, 0) + Math.max(0, occupiedCount - 1) * gap
   if (total <= availableWidth) return widths.length
 
   let used = moreWidth
   let count = 0
   for (const width of widths) {
-    if (used + gap + width > availableWidth) break
-    used += gap + width
+    if (width > 0) {
+      if (used + gap + width > availableWidth) break
+      used += gap + width
+    }
     count += 1
   }
   return count

package/src/client/l2_biz/plugin-host/l2-plugin-session-header.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { EllipsisIcon } from 'lucide-react'
-import { useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useCallback, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { BrowserSessionHeaderItemTarget, PluginSource } from '@jetcrab/pi-desk-sdk/browser'
 import { useL4PluginRegistry } from '@client/l4_foundation/plugin-host/l4-plugin-host-context'
@@ -14,6 +14,7 @@ import {
   PopoverTitle,
   PopoverTrigger
 } from '@client/l4_foundation/ui/shadcn/popover'
+import { cn } from '@client/l4_foundation/lib/l4-utils'
 import { L2PluginContributionHost } from './l2-plugin-contribution-host'
 import { calculateL2PluginSessionHeaderInlineCount } from './l2-plugin-session-header-layout'
 import { L2PluginSessionHeaderAction } from './views/l2-plugin-session-header-action'
@@ -36,12 +37,14 @@ function HeaderItemView({
   item,
   source,
   presentation,
-  onSelected
+  onSelected,
+  onContentChange
 }: {
   item: HeaderItem
   source: PluginSource
   presentation: 'inline' | 'overflow'
   onSelected?: () => void
+  onContentChange?: (item: HeaderItem, hasContent: boolean) => void
 }): React.JSX.Element {
   const definition = item.descriptor[presentation]
   const target = useMemo<BrowserSessionHeaderItemTarget>(
@@ -49,6 +52,22 @@ function HeaderItemView({
     [presentation, source]
   )
   const sourceKey = JSON.stringify([source.workId, source.sessionId, source.branchId, presentation])
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [hasContent, setHasContent] = useState(false)
+
+  useLayoutEffect(() => {
+    const content = contentRef.current
+    if (!content) return
+    const measure = (): void => {
+      const visible = content.getBoundingClientRect().height > 0
+      setHasContent(visible)
+      onContentChange?.(item, visible)
+    }
+    const observer = new ResizeObserver(measure)
+    observer.observe(content)
+    return () => observer.disconnect()
+  }, [item, onContentChange, sourceKey])
+
   if (definition.type === 'action') {
     return (
       <L2PluginSessionHeaderAction
@@ -68,21 +87,29 @@ function HeaderItemView({
       data-plugin-name={item.pluginName}
       data-contribution-name={item.descriptor.contributionName}
       data-presentation={presentation}
-      className="min-w-0 shrink-0"
+      className={cn(
+        'min-w-0 shrink-0',
+        presentation === 'overflow' && 'w-full',
+        !hasContent && 'pointer-events-none invisible absolute'
+      )}
+      aria-hidden={!hasContent}
+      inert={!hasContent}
       style={
         presentation === 'inline' && item.descriptor.inline.type === 'custom'
           ? { width: `${item.descriptor.inline.minWidthRem}rem` }
           : undefined
       }
     >
-      <L2PluginContributionHost
-        pluginName={item.pluginName}
-        kind="session-header-item"
-        contributionName={item.descriptor.contributionName}
-        target={target}
-        targetKey={sourceKey}
-        layout="inline"
-      />
+      <div ref={contentRef}>
+        <L2PluginContributionHost
+          pluginName={item.pluginName}
+          kind="session-header-item"
+          contributionName={item.descriptor.contributionName}
+          target={target}
+          targetKey={sourceKey}
+          layout="inline"
+        />
+      </div>
     </div>
   )
 }
@@ -106,16 +133,31 @@ export function L2PluginSessionHeader({
   )
   const rootRef = useRef<HTMLDivElement>(null)
   const measurementsRef = useRef<HTMLDivElement>(null)
+  const customContentRef = useRef(new Map<HeaderItem, boolean>())
+  const measureRef = useRef<(() => void) | null>(null)
+  const onContentChange = useCallback((item: HeaderItem, hasContent: boolean): void => {
+    if (customContentRef.current.get(item) === hasContent) return
+    customContentRef.current.set(item, hasContent)
+    measureRef.current?.()
+  }, [])
   const [measurement, setMeasurement] = useState<{
     items: readonly HeaderItem[]
     count: number
+    occupied: boolean
   } | null>(null)
   const [open, setOpen] = useState(false)
-  const count = measurement?.items === items ? measurement.count : 0
+  const count = measurement?.items === items ? measurement.count : items.length
+  const occupied =
+    measurement?.items === items
+      ? measurement.occupied
+      : items.some((item) => item.descriptor.inline.type === 'action')
   const inlineItems = items.slice(0, count)
   const overflowItems = items.slice(count)
 
   useLayoutEffect(() => {
+    for (const item of customContentRef.current.keys()) {
+      if (!items.includes(item)) customContentRef.current.delete(item)
+    }
     const root = rootRef.current
     const measurements = measurementsRef.current
     if (!root || !measurements || items.length === 0) return
@@ -127,42 +169,57 @@ export function L2PluginSessionHeader({
       const gap = gapProbe.getBoundingClientRect().width
       const available =
         root.getBoundingClientRect().width - titleProbe.getBoundingClientRect().width - gap
+      const widths = probes.map((probe, index) =>
+        items[index].descriptor.inline.type === 'custom' &&
+        !customContentRef.current.get(items[index])
+          ? 0
+          : probe.getBoundingClientRect().width
+      )
       const nextCount = calculateL2PluginSessionHeaderInlineCount(
-        probes.map((probe) => probe.getBoundingClientRect().width),
+        widths,
         available,
         moreProbe.getBoundingClientRect().width,
         gap
       )
+      const nextOccupied = widths.some((width) => width > 0)
       if (nextCount === items.length) setOpen(false)
       setMeasurement((current) =>
-        current?.items === items && current.count === nextCount
+        current?.items === items && current.count === nextCount && current.occupied === nextOccupied
           ? current
-          : { items, count: nextCount }
+          : { items, count: nextCount, occupied: nextOccupied }
       )
     }
+    measureRef.current = measure
     const observer = new ResizeObserver(measure)
     observer.observe(root)
     for (const probe of [...probes, titleProbe, moreProbe, gapProbe]) observer.observe(probe)
     measure()
-    return () => observer.disconnect()
+    return () => {
+      measureRef.current = null
+      observer.disconnect()
+    }
   }, [items])
 
   return (
     <div
       ref={rootRef}
-      className="relative flex min-w-0 flex-1 items-center gap-1"
+      className="relative flex min-w-0 flex-1 items-center"
       data-testid="plugin-session-header"
     >
       <div className="min-w-[3rem] flex-1">{title}</div>
       {items.length > 0 ? (
         <>
-          <div className="flex shrink-0 items-center gap-1" data-testid="session-header-items">
+          <div
+            className={cn('flex shrink-0 items-center gap-1', occupied && 'ml-1')}
+            data-testid="session-header-items"
+          >
             {inlineItems.map((item) => (
               <HeaderItemView
                 key={itemKey(item)}
                 item={item}
                 source={source}
                 presentation="inline"
+                onContentChange={onContentChange}
               />
             ))}
             {overflowItems.length > 0 ? (

package/src/client/l2_biz/project-preview/l2-project-preview-dialog.tsx

@@ -41,8 +41,8 @@ export function L2ProjectPreviewDialog({
         data-testid="project-preview-dialog"
         className={cn(
           'h-[min(94dvh,1080px)] w-[min(96dvw,1600px)] max-w-none gap-0 p-0',
-          maximized && 'h-dvh max-h-none w-dvw rounded-none',
-          'max-sm:h-dvh max-sm:max-h-none max-sm:w-dvw max-sm:rounded-none'
+          maximized && 'h-[var(--pi-desk-content-height)] max-h-none w-dvw rounded-none',
+          'max-sm:h-[var(--pi-desk-content-height)] max-sm:max-h-none max-sm:w-dvw max-sm:rounded-none'
         )}
       >
         <L4AppDialogDescription className="sr-only">

package/src/client/l2_biz/project-preview/l2-project-preview-page.tsx

@@ -34,7 +34,7 @@ export function L2ProjectPreviewPage({
   const { t } = useTranslation('projectHistory')
   return (
     <main
-      className="flex h-dvh min-w-0 flex-col overflow-hidden bg-background text-foreground"
+      className="flex h-[var(--pi-desk-content-height)] min-w-0 flex-col overflow-hidden bg-background text-foreground"
       data-testid="project-preview-page"
     >
       {cwd ? (

package/src/client/l2_biz/settings/l2-settings.tsx

@@ -281,7 +281,7 @@ export function L2Settings({
       }}
     >
       <L4AppDialogContent
-        className="h-[min(48rem,calc(100dvh-2rem))] max-w-6xl max-sm:h-dvh max-sm:max-h-dvh max-sm:w-dvw max-sm:max-w-none max-sm:rounded-none max-sm:border-0"
+        className="h-[min(48rem,calc(100dvh-2rem))] max-w-6xl max-sm:h-[var(--pi-desk-content-height)] max-sm:max-h-[var(--pi-desk-content-height)] max-sm:w-dvw max-sm:max-w-none max-sm:rounded-none max-sm:border-0"
         finalFocus={false}
         showCloseButton={!guardPending}
       >

package/src/client/l2_biz/settings/l2-skills-settings.tsx

@@ -209,7 +209,7 @@ export function L2SkillsSettings({
       </div>
       <L4AppDialogRoot open={drawerOpen} onOpenChange={setDrawerOpen}>
         <L4AppDialogContent
-          className="left-0 top-0 z-[130] h-dvh max-h-dvh w-[min(360px,calc(100dvw-2rem))] max-w-none translate-x-0 translate-y-0 rounded-l-none"
+          className="left-0 top-[var(--pi-desk-window-inset)] z-[130] h-[var(--pi-desk-content-height)] max-h-[var(--pi-desk-content-height)] w-[min(360px,calc(100dvw-2rem))] max-w-none translate-x-0 translate-y-0 rounded-l-none"
           finalFocus={false}
         >
           <L4AppDialogHeader className="shrink-0 border-b px-4 py-3 pr-12">

package/src/client/l2_biz/task-center/l2-task-center.tsx

@@ -468,7 +468,7 @@ function TaskCenterPanel({
       <L4AppDialogContent
         aria-label={t('title')}
         showCloseButton={false}
-        className="h-[calc(100dvh-2rem)] max-w-[70rem] flex-row bg-background max-lg:h-dvh max-lg:max-h-dvh max-lg:w-dvw max-lg:max-w-none max-lg:rounded-none max-lg:border-0"
+        className="h-[calc(100dvh-2rem)] max-w-[70rem] flex-row bg-background max-lg:h-[var(--pi-desk-content-height)] max-lg:max-h-[var(--pi-desk-content-height)] max-lg:w-dvw max-lg:max-w-none max-lg:rounded-none max-lg:border-0"
       >
         <div
           className={cn(

package/src/client/l2_biz/workbench/file-workspace/l2-plugin-standalone-file-preview.tsx

@@ -152,7 +152,7 @@ export function L2PluginStandaloneFilePreview({
       <L4AppDialogContent
         className={
           mobile
-            ? 'inset-0 h-dvh max-h-none w-dvw max-w-none translate-x-0 translate-y-0 rounded-none border-0 ring-0'
+            ? 'inset-x-0 top-[var(--pi-desk-window-inset)] bottom-0 h-[var(--pi-desk-content-height)] max-h-none w-dvw max-w-none translate-x-0 translate-y-0 rounded-none border-0 ring-0'
             : 'h-[min(94dvh,1080px)] w-[min(96dvw,1600px)] max-w-none'
         }
       >

package/src/client/l2_biz/workbench/file-workspace/l2-work-session-file-preview.tsx

@@ -75,7 +75,7 @@ export function L2WorkSessionFilePreview({
         }}
         className={
           mobile
-            ? 'inset-0 h-dvh max-h-none w-dvw max-w-none translate-x-0 translate-y-0 rounded-none border-0 ring-0'
+            ? 'inset-x-0 top-[var(--pi-desk-window-inset)] bottom-0 h-[var(--pi-desk-content-height)] max-h-none w-dvw max-w-none translate-x-0 translate-y-0 rounded-none border-0 ring-0'
             : 'h-[min(94dvh,1080px)] w-[min(96dvw,1600px)] max-w-none'
         }
         finalFocus={() => {

package/src/client/l2_biz/workbench/l2-workbench.tsx

@@ -2040,7 +2040,7 @@ export function L2Workbench({
   )
 
   return (
-    <main className="pi-desk-workbench flex h-dvh overflow-hidden bg-background">
+    <main className="pi-desk-workbench flex h-[var(--pi-desk-content-height)] overflow-hidden bg-background">
       <L2WorkbenchSidebarLayout
         mobile={mobile}
         open={sidebarOpen}

package/src/client/l4_foundation/desktop-window/l4-desktop-titlebar.tsx

@@ -0,0 +1,188 @@
+'use client'
+
+import { useEffect, useRef, useState, type MouseEvent } from 'react'
+import {
+  getL4DesktopWindow,
+  type L4DesktopWindow,
+  type L4DesktopWindowAction,
+  type L4DesktopWindowState
+} from './l4-desktop-window'
+import './l4-desktop-window.css'
+
+const labels = {
+  'zh-CN': {
+    window: '窗口',
+    minimize: '最小化',
+    maximize: '最大化',
+    restore: '还原',
+    close: '关闭'
+  },
+  en: {
+    window: 'Window',
+    minimize: 'Minimize',
+    maximize: 'Maximize',
+    restore: 'Restore',
+    close: 'Close'
+  }
+}
+
+export function L4DesktopTitlebar(): React.JSX.Element {
+  const adapter = useRef<L4DesktopWindow | null>(null)
+  const [state, setState] = useState<L4DesktopWindowState | null>(null)
+  const [title, setTitle] = useState('Pi Desk')
+  const [locale, setLocale] = useState<'zh-CN' | 'en'>('zh-CN')
+  const [focused, setFocused] = useState(true)
+
+  useEffect(() => {
+    const desktop = getL4DesktopWindow()
+    if (!desktop) return
+    adapter.current = desktop
+    let disposed = false
+    let frame = 0
+    const root = document.documentElement
+    const readTitle = (): void => {
+      setTitle(document.title || 'Pi Desk')
+      setLocale(root.lang.startsWith('zh') ? 'zh-CN' : 'en')
+    }
+    const refreshState = (): void => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => {
+        void desktop
+          .invoke('state')
+          .then((next) => {
+            if (!disposed) setState((current) => (current ? next : null))
+          })
+          .catch((error: unknown) => {
+            console.error('[desktop-window] 读取窗口状态失败', error)
+          })
+      })
+    }
+    const onFocus = (): void => {
+      setFocused(true)
+    }
+    const onBlur = (): void => {
+      setFocused(false)
+    }
+    const observer = new MutationObserver(readTitle)
+    observer.observe(document.head, { childList: true, subtree: true, characterData: true })
+    observer.observe(root, { attributes: true, attributeFilter: ['lang'] })
+    window.addEventListener('resize', refreshState)
+    window.addEventListener('focus', onFocus)
+    window.addEventListener('blur', onBlur)
+
+    // 按钮已挂载并绑定事件后才关闭系统装饰；旧页面不会调用此能力。
+    void desktop
+      .invoke('attach')
+      .then((next) => {
+        if (disposed) return
+        readTitle()
+        setFocused(document.hasFocus())
+        root.dataset.piDeskWindow = ''
+        setState(next)
+      })
+      .catch((error: unknown) => {
+        console.error('[desktop-window] 启用自定义标题栏失败，保留系统标题栏', error)
+      })
+
+    return () => {
+      disposed = true
+      adapter.current = null
+      observer.disconnect()
+      cancelAnimationFrame(frame)
+      window.removeEventListener('resize', refreshState)
+      window.removeEventListener('focus', onFocus)
+      window.removeEventListener('blur', onBlur)
+      delete root.dataset.piDeskWindow
+      void desktop.invoke('detach').catch((error: unknown) => {
+        console.error('[desktop-window] 恢复系统标题栏失败', error)
+      })
+    }
+  }, [])
+
+  const run = async (action: L4DesktopWindowAction): Promise<void> => {
+    const desktop = adapter.current
+    if (!desktop) return
+    try {
+      const next = await desktop.invoke(action)
+      if (adapter.current === desktop) setState(next)
+    } catch (error) {
+      console.error(`[desktop-window] 窗口操作失败 action=${action}`, error)
+      try {
+        await desktop.invoke('detach')
+        if (adapter.current !== desktop) return
+        delete document.documentElement.dataset.piDeskWindow
+        setState(null)
+      } catch (restoreError) {
+        console.error('[desktop-window] 恢复系统标题栏失败', restoreError)
+      }
+    }
+  }
+  const onDrag = (event: MouseEvent<HTMLElement>): void => {
+    if (event.button !== 0 || (event.target as Element).closest('button')) return
+    event.preventDefault()
+    void run(event.detail === 2 ? 'toggle-maximize' : 'drag')
+  }
+  const text = labels[locale]
+  const maximizeLabel = state?.maximized ? text.restore : text.maximize
+
+  return (
+    <header
+      className="pi-desk-titlebar"
+      data-testid="desktop-titlebar"
+      data-focused={focused}
+      hidden={!state}
+      aria-label={text.window}
+      onMouseDown={onDrag}
+    >
+      <span className="pi-desk-titlebar-title" title={title}>
+        {title}
+      </span>
+      <div className="pi-desk-titlebar-controls">
+        <button
+          type="button"
+          aria-label={text.minimize}
+          title={text.minimize}
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => {
+            void run('minimize')
+          }}
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M3 8.5h10" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          aria-label={maximizeLabel}
+          title={maximizeLabel}
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => {
+            void run('toggle-maximize')
+          }}
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            {state?.maximized ? (
+              <path d="M5.5 5.5v-3h8v8h-3m-8-5h8v8h-8z" />
+            ) : (
+              <rect x="3.5" y="3.5" width="9" height="9" />
+            )}
+          </svg>
+        </button>
+        <button
+          type="button"
+          className="pi-desk-titlebar-close"
+          aria-label={text.close}
+          title={text.close}
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => {
+            void run('close')
+          }}
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="m3.5 3.5 9 9m0-9-9 9" />
+          </svg>
+        </button>
+      </div>
+    </header>
+  )
+}