@clawpump/claw-agent 0.1.5 → 0.1.6

package/agent/apps/desktop/src/app/shell/titlebar-controls.tsx

@@ -1,23 +1,24 @@
 import { useStore } from '@nanostores/react'
 import type { ComponentProps, ReactNode } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
+import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
+import { useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
-import { Volume2, VolumeX } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { $hapticsMuted, toggleHapticsMuted } from '@/store/haptics'
-import { $fileBrowserOpen, $sidebarOpen, toggleFileBrowserOpen, toggleSidebarOpen } from '@/store/layout'
+import { toggleKeybindPanel } from '@/store/keybinds'
+import {
+  $fileBrowserOpen,
+  $panesFlipped,
+  $sidebarOpen,
+  toggleFileBrowserOpen,
+  togglePanesFlipped,
+  toggleSidebarOpen
+} from '@/store/layout'
 
-import { PROFILES_ROUTE } from '../routes'
+import { appViewForPath, isOverlayView } from '../routes'
 
 import { titlebarButtonClass } from './titlebar'
 
@@ -41,22 +42,17 @@ export type SetTitlebarToolGroup = (id: string, tools: readonly TitlebarTool[],
 interface TitlebarControlsProps extends ComponentProps<'div'> {
   leftTools?: readonly TitlebarTool[]
   tools?: readonly TitlebarTool[]
-  commandCenterOpen?: boolean
   onOpenSettings: () => void
-  onOpenSearch: () => void
 }
 
-export function TitlebarControls({
-  leftTools = [],
-  tools = [],
-  commandCenterOpen = false,
-  onOpenSettings,
-  onOpenSearch
-}: TitlebarControlsProps) {
+export function TitlebarControls({ leftTools = [], tools = [], onOpenSettings }: TitlebarControlsProps) {
+  const { t } = useI18n()
   const navigate = useNavigate()
+  const location = useLocation()
   const hapticsMuted = useStore($hapticsMuted)
   const fileBrowserOpen = useStore($fileBrowserOpen)
   const sidebarOpen = useStore($sidebarOpen)
+  const panesFlipped = useStore($panesFlipped)
 
   const toggleHaptics = () => {
     if (!hapticsMuted) {
@@ -70,38 +66,45 @@ export function TitlebarControls({
     }
   }
 
+  // Each titlebar button controls the pane physically on its side, so a flip
+  // swaps which pane each one toggles. Default: sessions left, file browser
+  // right. Flipped: file browser left, sessions right. Sidebar toggles never
+  // carry an active highlight — they're plain show/hide affordances.
+  const fileBrowserEdge = { open: fileBrowserOpen, toggle: toggleFileBrowserOpen }
+  const sessionsEdge = { open: sidebarOpen, toggle: toggleSidebarOpen }
+  const leftEdge = panesFlipped ? fileBrowserEdge : sessionsEdge
+  const rightEdge = panesFlipped ? sessionsEdge : fileBrowserEdge
+
   const leftToolbarTools: TitlebarTool[] = [
     {
       icon: <Codicon name="layout-sidebar-left" />,
       id: 'sidebar',
-      label: sidebarOpen ? 'Hide sidebar' : 'Show sidebar',
+      label: leftEdge.open ? t.titlebar.hideSidebar : t.titlebar.showSidebar,
       onSelect: () => {
         triggerHaptic('tap')
-        toggleSidebarOpen()
+        leftEdge.toggle()
       }
     },
     {
-      active: commandCenterOpen,
-      icon: <Codicon name="search" />,
-      id: 'search',
-      label: 'Search',
+      icon: <Codicon name="arrow-swap" />,
+      id: 'flip-panes',
+      label: t.titlebar.swapSidebarSides,
       onSelect: () => {
-        triggerHaptic('open')
-        onOpenSearch()
+        triggerHaptic('tap')
+        togglePanesFlipped()
       },
-      title: 'Search sessions, views, and actions'
+      title: t.titlebar.swapSidebarSidesTitle
     },
     ...leftTools
   ]
 
   const rightSidebarTool: TitlebarTool = {
-    active: fileBrowserOpen,
     icon: <Codicon name="layout-sidebar-right" />,
     id: 'right-sidebar',
-    label: fileBrowserOpen ? 'Hide right sidebar' : 'Show right sidebar',
+    label: rightEdge.open ? t.titlebar.hideRightSidebar : t.titlebar.showRightSidebar,
     onSelect: () => {
       triggerHaptic('tap')
-      toggleFileBrowserOpen()
+      rightEdge.toggle()
     }
   }
 
@@ -109,15 +112,24 @@ export function TitlebarControls({
   const systemTools: TitlebarTool[] = [
     {
       active: hapticsMuted,
-      icon: hapticsMuted ? <VolumeX /> : <Volume2 />,
+      icon: <Codicon name={hapticsMuted ? 'mute' : 'unmute'} />,
       id: 'haptics',
-      label: hapticsMuted ? 'Unmute haptics' : 'Mute haptics',
+      label: hapticsMuted ? t.titlebar.unmuteHaptics : t.titlebar.muteHaptics,
       onSelect: toggleHaptics
     },
+    {
+      icon: <Codicon name="keyboard" />,
+      id: 'keybinds',
+      label: t.titlebar.openKeybinds,
+      onSelect: () => {
+        triggerHaptic('open')
+        toggleKeybindPanel()
+      }
+    },
     {
       icon: <Codicon name="settings-gear" />,
       id: 'settings',
-      label: 'Open settings',
+      label: t.titlebar.openSettings,
       onSelect: () => {
         triggerHaptic('open')
         onOpenSettings()
@@ -125,6 +137,14 @@ export function TitlebarControls({
     }
   ]
 
+  // While a full-screen overlay (settings, command center, …) is open it should
+  // visually own the window. These control clusters are `fixed` at a higher
+  // z-index than the overlay card, so they'd otherwise bleed over it — hide them
+  // and let the overlay's own chrome (close button, drag region) take over.
+  if (isOverlayView(appViewForPath(location.pathname))) {
+    return null
+  }
+
   const visibleSystemTools = systemTools.filter(tool => !tool.hidden)
   const settingsTool = visibleSystemTools.find(tool => tool.id === 'settings')
   const visibleSystemToolsBeforeSettings = visibleSystemTools.filter(tool => tool.id !== 'settings')
@@ -133,7 +153,7 @@ export function TitlebarControls({
   return (
     <>
       <div
-        aria-label="Window controls"
+        aria-label={t.shell.windowControls}
         className="fixed left-(--titlebar-controls-left) top-(--titlebar-controls-top) z-70 flex translate-y-0.5 flex-row items-center gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
       >
         {leftToolbarTools
@@ -153,7 +173,7 @@ export function TitlebarControls({
       */}
       {visiblePaneTools.length > 0 && (
         <div
-          aria-label="Pane controls"
+          aria-label={t.shell.paneControls}
           className="fixed top-(--titlebar-controls-top) right-[calc(var(--titlebar-tools-right)+var(--shell-preview-toolbar-gap,0))] z-70 flex flex-row items-center gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
         >
           {visiblePaneTools.map(tool => (
@@ -163,13 +183,12 @@ export function TitlebarControls({
       )}
 
       <div
-        aria-label="App controls"
+        aria-label={t.shell.appControls}
         className="fixed right-(--titlebar-tools-right) top-(--titlebar-controls-top) z-70 flex flex-row items-center justify-end gap-x-1 pointer-events-auto select-none [-webkit-app-region:no-drag]"
       >
         {visibleSystemToolsBeforeSettings.map(tool => (
           <TitlebarToolButton key={tool.id} navigate={navigate} tool={tool} />
         ))}
-        <ProfilesMenuButton navigate={navigate} />
         {settingsTool && <TitlebarToolButton navigate={navigate} tool={settingsTool} />}
         <TitlebarToolButton navigate={navigate} tool={rightSidebarTool} />
       </div>
@@ -177,68 +196,31 @@ export function TitlebarControls({
   )
 }
 
-function ProfilesMenuButton({ navigate }: { navigate: ReturnType<typeof useNavigate> }) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button
-          aria-label="Profiles"
-          className={cn(titlebarButtonClass, 'grid place-items-center bg-transparent select-none [&_svg]:size-4')}
-          onPointerDown={event => event.stopPropagation()}
-          title="Profiles"
-          type="button"
-        >
-          <Codicon name="account" />
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-64" sideOffset={8}>
-        <DropdownMenuLabel>
-          <div className="text-sm font-medium text-foreground">Profiles</div>
-          <div className="mt-1 text-xs font-normal leading-4 text-muted-foreground">
-            Advanced Hermes environments for separate personas, config, skills, and SOUL.md.
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onSelect={() => {
-            triggerHaptic('open')
-            navigate(PROFILES_ROUTE)
-          }}
-        >
-          <Codicon name="account" size="1rem" />
-          <span>Manage profiles</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
 function TitlebarToolButton({ navigate, tool }: { navigate: ReturnType<typeof useNavigate>; tool: TitlebarTool }) {
-  const className = cn(
-    titlebarButtonClass,
-    'grid place-items-center bg-transparent select-none [&_svg]:size-4',
-    tool.active && 'bg-(--ui-control-active-background)! text-foreground!',
-    tool.className
-  )
+  // Titlebar actions never show an active background — state reads from the
+  // icon itself (e.g. the mute/unmute glyph). aria-pressed still carries it
+  // for a11y.
+  const className = cn(titlebarButtonClass, 'bg-transparent select-none', tool.className)
 
   if (tool.href) {
     return (
-      <a
-        aria-label={tool.label}
-        className={className}
-        href={tool.href}
-        onPointerDown={event => event.stopPropagation()}
-        rel="noreferrer"
-        target="_blank"
-        title={tool.title ?? tool.label}
-      >
-        {tool.icon}
-      </a>
+      <Button asChild className={className} size="icon-titlebar" variant="ghost">
+        <a
+          aria-label={tool.label}
+          href={tool.href}
+          onPointerDown={event => event.stopPropagation()}
+          rel="noreferrer"
+          target="_blank"
+          title={tool.title ?? tool.label}
+        >
+          {tool.icon}
+        </a>
+      </Button>
     )
   }
 
   return (
-    <button
+    <Button
       aria-label={tool.label}
       aria-pressed={tool.active ?? undefined}
       className={className}
@@ -251,10 +233,12 @@ function TitlebarToolButton({ navigate, tool }: { navigate: ReturnType<typeof us
         tool.onSelect?.()
       }}
       onPointerDown={event => event.stopPropagation()}
+      size="icon-titlebar"
       title={tool.title ?? tool.label}
       type="button"
+      variant="ghost"
     >
       {tool.icon}
-    </button>
+    </Button>
   )
 }

package/agent/apps/desktop/src/app/shell/titlebar.ts

@@ -12,11 +12,17 @@ export const TITLEBAR_FALLBACK_WINDOW_BUTTON_X = 24
 // (traffic lights are hidden). Matches the right-cluster's 0.75rem padding.
 export const TITLEBAR_EDGE_INSET = 14
 
+// Titlebar palette only. All sizing/radius/cursor/centering come from the
+// shared <Button size="icon-titlebar"> (used polymorphically via asChild) —
+// Button is the single source of button styling.
 export const titlebarButtonClass =
-  'h-[var(--titlebar-control-height)] w-[var(--titlebar-control-size)] rounded-md text-muted-foreground/85 transition-colors hover:bg-(--ui-control-hover-background) hover:text-foreground'
+  'text-muted-foreground/85 hover:bg-(--ui-control-hover-background) hover:text-foreground'
 
 export const titlebarHeaderBaseClass =
-  'pointer-events-none relative z-3 flex h-(--titlebar-height) shrink-0 items-center justify-start gap-3 border-b border-(--ui-stroke-tertiary) bg-(--ui-chat-surface-background) px-[max(0.75rem,var(--titlebar-content-inset,0rem))]'
+  'pointer-events-none relative z-3 flex h-(--titlebar-height) w-full min-w-0 shrink-0 items-center justify-start gap-3 overflow-hidden border-b border-(--ui-stroke-tertiary) bg-(--ui-chat-surface-background) px-[max(0.75rem,var(--titlebar-content-inset,0rem))] pr-[calc(var(--titlebar-tools-right,0.75rem)+var(--titlebar-tools-width,0px)+0.75rem)]'
+
+// Title row inside the header — must stay in the flex truncate chain.
+export const titlebarHeaderTitleClass = 'min-w-0 flex-1 overflow-hidden'
 
 export const titlebarHeaderShadowClass =
   "after:pointer-events-none after:absolute after:left-0 after:right-0 after:top-full after:h-4 after:bg-linear-to-b after:from-(--ui-chat-surface-background) after:to-transparent after:content-['']"

package/agent/apps/desktop/src/app/skills/index.test.tsx

@@ -74,6 +74,17 @@ describe('SkillsView toolset management', () => {
     await waitFor(() => expect(toggleToolset).toHaveBeenCalledWith('web', false))
   })
 
+  it('renders toolset titles without leading emoji', async () => {
+    getToolsets.mockResolvedValue([
+      toolset({ name: 'cronjob', label: '⏰ Cron Jobs', description: 'cron tools' })
+    ])
+
+    await renderSkills()
+
+    expect(await screen.findByText('Cron Jobs')).toBeTruthy()
+    expect(screen.queryByText(/⏰/)).toBeNull()
+  })
+
   it('keeps the configured pill alongside the switch', async () => {
     await renderSkills()
 

package/agent/apps/desktop/src/app/skills/index.tsx

@@ -2,18 +2,22 @@ import type * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { PageLoader } from '@/components/page-loader'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import { Switch } from '@/components/ui/switch'
 import { TextTab, TextTabMeta } from '@/components/ui/text-tab'
 import { getSkills, getToolsets, toggleSkill, toggleToolset } from '@/hermes'
+import { useI18n } from '@/i18n'
 import { cn } from '@/lib/utils'
 import { notify, notifyError } from '@/store/notifications'
 import type { SkillInfo, ToolsetInfo } from '@/types/hermes'
 
+import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
 import { useRouteEnumParam } from '../hooks/use-route-enum-param'
+import { PAGE_INSET_X } from '../layout-constants'
 import { PageSearchShell } from '../page-search-shell'
-import { asText, includesQuery, prettyName, toolNames } from '../settings/helpers'
+import { asText, includesQuery, prettyName, toolNames, toolsetDisplayLabel } from '../settings/helpers'
 import { ToolsetConfigPanel } from '../settings/toolset-config-panel'
 import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
 
@@ -51,14 +55,17 @@ function filteredToolsets(toolsets: ToolsetInfo[], query: string): ToolsetInfo[]
         return true
       }
 
+      const label = toolsetDisplayLabel(toolset)
+
       return (
         includesQuery(toolset.name, q) ||
+        includesQuery(label, q) ||
         includesQuery(toolset.label, q) ||
         includesQuery(toolset.description, q) ||
         toolNames(toolset).some(name => includesQuery(name, q))
       )
     })
-    .sort((a, b) => asText(a.label || a.name).localeCompare(asText(b.label || b.name)))
+    .sort((a, b) => toolsetDisplayLabel(a).localeCompare(toolsetDisplayLabel(b)))
 }
 
 interface SkillsViewProps extends React.ComponentProps<'section'> {
@@ -66,6 +73,7 @@ interface SkillsViewProps extends React.ComponentProps<'section'> {
 }
 
 export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...props }: SkillsViewProps) {
+  const { t } = useI18n()
   const [mode, setMode] = useRouteEnumParam('tab', SKILLS_MODES, 'skills')
 
   const [query, setQuery] = useState('')
@@ -85,17 +93,19 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
       setSkills(nextSkills)
       setToolsets(nextToolsets)
     } catch (err) {
-      notifyError(err, 'Skills failed to load')
+      notifyError(err, t.skills.skillsLoadFailed)
     } finally {
       setRefreshing(false)
     }
-  }, [])
+  }, [t])
 
   const refreshToolsets = useCallback(() => {
     getToolsets()
       .then(setToolsets)
-      .catch(err => notifyError(err, 'Toolsets failed to refresh'))
-  }, [])
+      .catch(err => notifyError(err, t.skills.toolsetsRefreshFailed))
+  }, [t])
+
+  useRefreshHotkey(refreshCapabilities)
 
   useEffect(() => {
     void refreshCapabilities()
@@ -147,11 +157,11 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
       setSkills(current => current?.map(row => (row.name === skill.name ? { ...row, enabled } : row)) ?? current)
       notify({
         kind: 'success',
-        title: enabled ? 'Skill enabled' : 'Skill disabled',
-        message: `${skill.name} applies to new sessions.`
+        title: enabled ? t.skills.skillEnabled : t.skills.skillDisabled,
+        message: t.skills.appliesToNewSessions(skill.name)
       })
     } catch (err) {
-      notifyError(err, `Failed to update ${skill.name}`)
+      notifyError(err, t.skills.failedToUpdate(skill.name))
     } finally {
       setSavingSkill(null)
     }
@@ -162,16 +172,17 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
 
     try {
       await toggleToolset(toolset.name, enabled)
-      setToolsets(current =>
-        current?.map(row => (row.name === toolset.name ? { ...row, enabled, available: enabled } : row)) ?? current
+      setToolsets(
+        current =>
+          current?.map(row => (row.name === toolset.name ? { ...row, enabled, available: enabled } : row)) ?? current
       )
       notify({
         kind: 'success',
-        title: enabled ? 'Toolset enabled' : 'Toolset disabled',
-        message: `${asText(toolset.label || toolset.name)} applies to new sessions.`
+        title: enabled ? t.skills.toolsetEnabled : t.skills.toolsetDisabled,
+        message: t.skills.appliesToNewSessions(toolsetDisplayLabel(toolset))
       })
     } catch (err) {
-      notifyError(err, `Failed to update ${asText(toolset.label || toolset.name)}`)
+      notifyError(err, t.skills.failedToUpdate(toolsetDisplayLabel(toolset)))
     } finally {
       setSavingToolset(null)
     }
@@ -181,43 +192,34 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
     <PageSearchShell
       {...props}
       filters={
-        <>
-          <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-1">
-            <TextTab active={mode === 'skills'} onClick={() => setMode('skills')}>
-              Skills
-            </TextTab>
-            <TextTab active={mode === 'toolsets'} onClick={() => setMode('toolsets')}>
-              Toolsets
+        mode === 'skills' && categories.length > 0 ? (
+          <>
+            <TextTab active={activeCategory === null} onClick={() => setActiveCategory(null)}>
+              {t.skills.all} <TextTabMeta>{totalSkills}</TextTabMeta>
             </TextTab>
-          </div>
-          {mode === 'skills' && categories.length > 0 && (
-            <div className="flex flex-wrap justify-center gap-x-2 gap-y-1">
-              <TextTab active={activeCategory === null} onClick={() => setActiveCategory(null)}>
-                All <TextTabMeta>{totalSkills}</TextTabMeta>
+            {categories.map(category => (
+              <TextTab
+                active={activeCategory === category.key}
+                key={category.key}
+                onClick={() => setActiveCategory(activeCategory === category.key ? null : category.key)}
+              >
+                {prettyName(category.key)} <TextTabMeta>{category.count}</TextTabMeta>
               </TextTab>
-              {categories.map(category => (
-                <TextTab
-                  active={activeCategory === category.key}
-                  key={category.key}
-                  onClick={() => setActiveCategory(activeCategory === category.key ? null : category.key)}
-                >
-                  {prettyName(category.key)} <TextTabMeta>{category.count}</TextTabMeta>
-                </TextTab>
-              ))}
-            </div>
-          )}
-        </>
+            ))}
+          </>
+        ) : undefined
       }
       onSearchChange={setQuery}
-      searchPlaceholder={mode === 'skills' ? 'Search skills...' : 'Search toolsets...'}
+      searchHidden={mode === 'skills' ? (skills?.length ?? 0) === 0 : (toolsets?.length ?? 0) === 0}
+      searchPlaceholder={mode === 'skills' ? t.skills.searchSkills : t.skills.searchToolsets}
       searchTrailingAction={
         <Button
-          aria-label={refreshing ? 'Refreshing skills' : 'Refresh skills'}
+          aria-label={refreshing ? t.skills.refreshing : t.skills.refresh}
           className="text-(--ui-text-tertiary) hover:bg-transparent hover:text-foreground"
           disabled={refreshing}
           onClick={() => void refreshCapabilities()}
           size="icon-xs"
-          title={refreshing ? 'Refreshing skills' : 'Refresh skills'}
+          title={refreshing ? t.skills.refreshing : t.skills.refresh}
           type="button"
           variant="ghost"
         >
@@ -225,21 +227,33 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
         </Button>
       }
       searchValue={query}
+      tabs={
+        <>
+          <TextTab active={mode === 'skills'} onClick={() => setMode('skills')}>
+            {t.skills.tabSkills}
+          </TextTab>
+          <TextTab active={mode === 'toolsets'} onClick={() => setMode('toolsets')}>
+            {t.skills.tabToolsets}
+          </TextTab>
+        </>
+      }
     >
       {!skills || !toolsets ? (
-        <PageLoader label="Loading capabilities..." />
+        <PageLoader label={t.skills.loading} />
       ) : mode === 'skills' ? (
-        <div className="h-full overflow-y-auto px-4 py-3">
+        <div className={cn('h-full overflow-y-auto py-3', PAGE_INSET_X)}>
           {visibleSkills.length === 0 ? (
-            <EmptyState description="Try a broader search or different category." title="No skills found" />
+            <EmptyState description={t.skills.noSkillsDesc} title={t.skills.noSkillsTitle} />
           ) : (
             <div className="space-y-4">
               {skillGroups.map(([category, list]) => (
                 <div className="space-y-1.5" key={category}>
-                  <div className="text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-                    {prettyName(category)}
-                  </div>
-                  <div className="divide-y divide-(--ui-stroke-quaternary)">
+                  {activeCategory === null && (
+                    <div className="text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+                      {prettyName(category)}
+                    </div>
+                  )}
+                  <div>
                     {list.map(skill => (
                       <div
                         className="grid gap-3 px-0 py-2.5 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"
@@ -248,7 +262,7 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
                         <div className="min-w-0">
                           <div className="truncate text-sm font-medium">{skill.name}</div>
                           <p className="mt-0.5 text-xs text-muted-foreground">
-                            {asText(skill.description) || 'No description.'}
+                            {asText(skill.description) || t.skills.noDescription}
                           </p>
                         </div>
                         <Switch
@@ -265,18 +279,18 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
           )}
         </div>
       ) : (
-        <div className="h-full overflow-y-auto px-4 py-3">
+        <div className={cn('h-full overflow-y-auto py-3', PAGE_INSET_X)}>
           {visibleToolsets.length === 0 ? (
-            <EmptyState description="Try a broader search query." title="No toolsets found" />
+            <EmptyState description={t.skills.noToolsetsDesc} title={t.skills.noToolsetsTitle} />
           ) : (
             <div className="space-y-2">
               <div className="text-xs text-muted-foreground">
-                {enabledToolsets}/{toolsets.length} toolsets enabled
+                {t.skills.toolsetsEnabled(enabledToolsets, toolsets.length)}
               </div>
-              <div className="divide-y divide-(--ui-stroke-quaternary)">
+              <div>
                 {visibleToolsets.map(toolset => {
                   const tools = toolNames(toolset)
-                  const label = asText(toolset.label || toolset.name)
+                  const label = toolsetDisplayLabel(toolset)
                   const expanded = expandedToolset === toolset.name
 
                   return (
@@ -286,17 +300,19 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
                         <div className="flex shrink-0 items-center gap-1.5">
                           <button
                             aria-expanded={expanded}
-                            aria-label={`Configure ${label}`}
+                            aria-label={t.skills.configureToolset(label)}
                             className="cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
-                            onClick={() => setExpandedToolset(current => (current === toolset.name ? null : toolset.name))}
+                            onClick={() =>
+                              setExpandedToolset(current => (current === toolset.name ? null : toolset.name))
+                            }
                             type="button"
                           >
                             <StatusPill active={toolset.configured}>
-                              {toolset.configured ? 'Configured' : 'Needs keys'}
+                              {toolset.configured ? t.skills.configured : t.skills.needsKeys}
                             </StatusPill>
                           </button>
                           <Switch
-                            aria-label={`Toggle ${label} toolset`}
+                            aria-label={t.skills.toggleToolset(label)}
                             checked={toolset.enabled}
                             disabled={savingToolset === toolset.name}
                             onCheckedChange={checked => void handleToggleToolset(toolset, checked)}
@@ -304,7 +320,7 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
                         </div>
                       </div>
                       <p className="mt-1 text-xs text-muted-foreground">
-                        {asText(toolset.description) || 'No description.'}
+                        {asText(toolset.description) || t.skills.noDescription}
                       </p>
                       {tools.length > 0 && (
                         <div className="mt-2 flex flex-wrap gap-1">
@@ -333,14 +349,13 @@ export function SkillsView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...p
 
 function StatusPill({ active, children }: { active: boolean; children: string }) {
   return (
-    <span
-      className={cn(
-        'inline-flex items-center rounded-full px-1.5 py-0.5 text-[0.64rem]',
+    <Badge
+      className={
         active ? 'bg-(--ui-bg-tertiary) text-(--ui-text-secondary)' : 'bg-(--ui-bg-quinary) text-(--ui-text-tertiary)'
-      )}
+      }
     >
       {children}
-    </span>
+    </Badge>
   )
 }