@nextclaw/ui 0.14.0 → 0.14.1-beta.1

package/dist/assets/tooltip-Bxzi6aDL.js

@@ -1 +0,0 @@
-import{h as e,p as t,u as n,v as r}from"./react-Dsotw5vM.js";import{a as i,b as a,c as o,f as s,g as c,h as l,i as u,l as d,m as f,o as p,r as m,s as h,t as g,u as _,x as v,y}from"./dist-NZRV-BxD.js";import{t as b}from"./dist-D19wiQwB.js";var x=o(`Boxes`,[[`path`,{d:`M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z`,key:`lc1i9w`}],[`path`,{d:`m7 16.5-4.74-2.85`,key:`1o9zyk`}],[`path`,{d:`m7 16.5 5-3`,key:`va8pkn`}],[`path`,{d:`M7 16.5v5.17`,key:`jnp8gn`}],[`path`,{d:`M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z`,key:`8zsnat`}],[`path`,{d:`m17 16.5-5-3`,key:`8arw3v`}],[`path`,{d:`m17 16.5 4.74-2.85`,key:`8rfmw`}],[`path`,{d:`M17 16.5v5.17`,key:`k6z78m`}],[`path`,{d:`M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z`,key:`1xygjf`}],[`path`,{d:`M12 8 7.26 5.15`,key:`1vbdud`}],[`path`,{d:`m12 8 4.74-2.85`,key:`3rx089`}],[`path`,{d:`M12 13.5V8`,key:`1io7kd`}]]),S=r(e(),1),C=t(),[w,T]=y(`Tooltip`,[h]),E=h(),D=`TooltipProvider`,O=700,k=`tooltip.open`,[A,j]=w(D),M=e=>{let{__scopeTooltip:t,delayDuration:n=O,skipDelayDuration:r=300,disableHoverableContent:i=!1,children:a}=e,o=S.useRef(!0),s=S.useRef(!1),c=S.useRef(0);return S.useEffect(()=>{let e=c.current;return()=>window.clearTimeout(e)},[]),(0,C.jsx)(A,{scope:t,isOpenDelayedRef:o,delayDuration:n,onOpen:S.useCallback(()=>{window.clearTimeout(c.current),o.current=!1},[]),onClose:S.useCallback(()=>{window.clearTimeout(c.current),c.current=window.setTimeout(()=>o.current=!0,r)},[r]),isPointerInTransitRef:s,onPointerInTransitChange:S.useCallback(e=>{s.current=e},[]),disableHoverableContent:i,children:a})};M.displayName=D;var N=`Tooltip`,[ee,P]=w(N),F=e=>{let{__scopeTooltip:t,children:n,open:r,defaultOpen:i,onOpenChange:a,disableHoverableContent:o,delayDuration:s}=e,u=j(N,e.__scopeTooltip),d=E(t),[f,m]=S.useState(null),h=c(),g=S.useRef(0),_=o??u.disableHoverableContent,v=s??u.delayDuration,y=S.useRef(!1),[b,x]=l({prop:r,defaultProp:i??!1,onChange:e=>{e?(u.onOpen(),document.dispatchEvent(new CustomEvent(k))):u.onClose(),a?.(e)},caller:N}),w=S.useMemo(()=>b?y.current?`delayed-open`:`instant-open`:`closed`,[b]),T=S.useCallback(()=>{window.clearTimeout(g.current),g.current=0,y.current=!1,x(!0)},[x]),D=S.useCallback(()=>{window.clearTimeout(g.current),g.current=0,x(!1)},[x]),O=S.useCallback(()=>{window.clearTimeout(g.current),g.current=window.setTimeout(()=>{y.current=!0,x(!0),g.current=0},v)},[v,x]);return S.useEffect(()=>()=>{g.current&&=(window.clearTimeout(g.current),0)},[]),(0,C.jsx)(p,{...d,children:(0,C.jsx)(ee,{scope:t,contentId:h,open:b,stateAttribute:w,trigger:f,onTriggerChange:m,onTriggerEnter:S.useCallback(()=>{u.isOpenDelayedRef.current?O():T()},[u.isOpenDelayedRef,O,T]),onTriggerLeave:S.useCallback(()=>{_?D():(window.clearTimeout(g.current),g.current=0)},[D,_]),onOpen:T,onClose:D,disableHoverableContent:_,children:n})})};F.displayName=N;var I=`TooltipTrigger`,L=S.forwardRef((e,t)=>{let{__scopeTooltip:n,...r}=e,i=P(I,n),o=j(I,n),c=E(n),l=a(t,S.useRef(null),i.onTriggerChange),u=S.useRef(!1),d=S.useRef(!1),f=S.useCallback(()=>u.current=!1,[]);return S.useEffect(()=>()=>document.removeEventListener(`pointerup`,f),[f]),(0,C.jsx)(m,{asChild:!0,...c,children:(0,C.jsx)(s.button,{"aria-describedby":i.open?i.contentId:void 0,"data-state":i.stateAttribute,...r,ref:l,onPointerMove:v(e.onPointerMove,e=>{e.pointerType!==`touch`&&!d.current&&!o.isPointerInTransitRef.current&&(i.onTriggerEnter(),d.current=!0)}),onPointerLeave:v(e.onPointerLeave,()=>{i.onTriggerLeave(),d.current=!1}),onPointerDown:v(e.onPointerDown,()=>{i.open&&i.onClose(),u.current=!0,document.addEventListener(`pointerup`,f,{once:!0})}),onFocus:v(e.onFocus,()=>{u.current||i.onOpen()}),onBlur:v(e.onBlur,i.onClose),onClick:v(e.onClick,i.onClose)})})});L.displayName=I;var R=`TooltipPortal`,[z,B]=w(R,{forceMount:void 0}),V=e=>{let{__scopeTooltip:t,forceMount:n,children:r,container:i}=e,a=P(R,t);return(0,C.jsx)(z,{scope:t,forceMount:n,children:(0,C.jsx)(b,{present:n||a.open,children:(0,C.jsx)(d,{asChild:!0,container:i,children:r})})})};V.displayName=R;var H=`TooltipContent`,U=S.forwardRef((e,t)=>{let n=B(H,e.__scopeTooltip),{forceMount:r=n.forceMount,side:i=`top`,...a}=e,o=P(H,e.__scopeTooltip);return(0,C.jsx)(b,{present:r||o.open,children:o.disableHoverableContent?(0,C.jsx)(K,{side:i,...a,ref:t}):(0,C.jsx)(W,{side:i,...a,ref:t})})}),W=S.forwardRef((e,t)=>{let n=P(H,e.__scopeTooltip),r=j(H,e.__scopeTooltip),i=S.useRef(null),o=a(t,i),[s,c]=S.useState(null),{trigger:l,onClose:u}=n,d=i.current,{onPointerInTransitChange:f}=r,p=S.useCallback(()=>{c(null),f(!1)},[f]),m=S.useCallback((e,t)=>{let n=e.currentTarget,r={x:e.clientX,y:e.clientY},i=ae(r,ie(r,n.getBoundingClientRect())),a=oe(t.getBoundingClientRect());c(ce([...i,...a])),f(!0)},[f]);return S.useEffect(()=>()=>p(),[p]),S.useEffect(()=>{if(l&&d){let e=e=>m(e,d),t=e=>m(e,l);return l.addEventListener(`pointerleave`,e),d.addEventListener(`pointerleave`,t),()=>{l.removeEventListener(`pointerleave`,e),d.removeEventListener(`pointerleave`,t)}}},[l,d,m,p]),S.useEffect(()=>{if(s){let e=e=>{let t=e.target,n={x:e.clientX,y:e.clientY},r=l?.contains(t)||d?.contains(t),i=!se(n,s);r?p():i&&(p(),u())};return document.addEventListener(`pointermove`,e),()=>document.removeEventListener(`pointermove`,e)}},[l,d,s,u,p]),(0,C.jsx)(K,{...e,ref:o})}),[G,te]=w(N,{isInside:!1}),ne=f(`TooltipContent`),K=S.forwardRef((e,t)=>{let{__scopeTooltip:n,children:r,"aria-label":a,onEscapeKeyDown:o,onPointerDownOutside:s,...c}=e,l=P(H,n),u=E(n),{onClose:d}=l;return S.useEffect(()=>(document.addEventListener(k,d),()=>document.removeEventListener(k,d)),[d]),S.useEffect(()=>{if(l.trigger){let e=e=>{e.target?.contains(l.trigger)&&d()};return window.addEventListener(`scroll`,e,{capture:!0}),()=>window.removeEventListener(`scroll`,e,{capture:!0})}},[l.trigger,d]),(0,C.jsx)(_,{asChild:!0,disableOutsidePointerEvents:!1,onEscapeKeyDown:o,onPointerDownOutside:s,onFocusOutside:e=>e.preventDefault(),onDismiss:d,children:(0,C.jsxs)(i,{"data-state":l.stateAttribute,...u,...c,ref:t,style:{...c.style,"--radix-tooltip-content-transform-origin":`var(--radix-popper-transform-origin)`,"--radix-tooltip-content-available-width":`var(--radix-popper-available-width)`,"--radix-tooltip-content-available-height":`var(--radix-popper-available-height)`,"--radix-tooltip-trigger-width":`var(--radix-popper-anchor-width)`,"--radix-tooltip-trigger-height":`var(--radix-popper-anchor-height)`},children:[(0,C.jsx)(ne,{children:r}),(0,C.jsx)(G,{scope:n,isInside:!0,children:(0,C.jsx)(g,{id:l.contentId,role:`tooltip`,children:a||r})})]})})});U.displayName=H;var q=`TooltipArrow`,re=S.forwardRef((e,t)=>{let{__scopeTooltip:n,...r}=e,i=E(n);return te(q,n).isInside?null:(0,C.jsx)(u,{...i,...r,ref:t})});re.displayName=q;function ie(e,t){let n=Math.abs(t.top-e.y),r=Math.abs(t.bottom-e.y),i=Math.abs(t.right-e.x),a=Math.abs(t.left-e.x);switch(Math.min(n,r,i,a)){case a:return`left`;case i:return`right`;case n:return`top`;case r:return`bottom`;default:throw Error(`unreachable`)}}function ae(e,t,n=5){let r=[];switch(t){case`top`:r.push({x:e.x-n,y:e.y+n},{x:e.x+n,y:e.y+n});break;case`bottom`:r.push({x:e.x-n,y:e.y-n},{x:e.x+n,y:e.y-n});break;case`left`:r.push({x:e.x+n,y:e.y-n},{x:e.x+n,y:e.y+n});break;case`right`:r.push({x:e.x-n,y:e.y-n},{x:e.x-n,y:e.y+n});break}return r}function oe(e){let{top:t,right:n,bottom:r,left:i}=e;return[{x:i,y:t},{x:n,y:t},{x:n,y:r},{x:i,y:r}]}function se(e,t){let{x:n,y:r}=e,i=!1;for(let e=0,a=t.length-1;e<t.length;a=e++){let o=t[e],s=t[a],c=o.x,l=o.y,u=s.x,d=s.y;l>r!=d>r&&n<(u-c)*(r-l)/(d-l)+c&&(i=!i)}return i}function ce(e){let t=e.slice();return t.sort((e,t)=>e.x<t.x?-1:e.x>t.x?1:e.y<t.y?-1:e.y>t.y?1:0),le(t)}function le(e){if(e.length<=1)return e.slice();let t=[];for(let n=0;n<e.length;n++){let r=e[n];for(;t.length>=2;){let e=t[t.length-1],n=t[t.length-2];if((e.x-n.x)*(r.y-n.y)>=(e.y-n.y)*(r.x-n.x))t.pop();else break}t.push(r)}t.pop();let n=[];for(let t=e.length-1;t>=0;t--){let r=e[t];for(;n.length>=2;){let e=n[n.length-1],t=n[n.length-2];if((e.x-t.x)*(r.y-t.y)>=(e.y-t.y)*(r.x-t.x))n.pop();else break}n.push(r)}return n.pop(),t.length===1&&n.length===1&&t[0].x===n[0].x&&t[0].y===n[0].y?t:t.concat(n)}var J=M,Y=F,X=L,Z=V,Q=U,ue=J,de=Y,fe=X,$=S.forwardRef(({className:e,sideOffset:t=4,...r},i)=>(0,C.jsx)(Z,{children:(0,C.jsx)(Q,{ref:i,sideOffset:t,className:n(`z-[var(--z-tooltip)] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`,e),...r})}));$.displayName=Q.displayName;export{Q as a,Y as c,fe as i,X as l,$ as n,Z as o,ue as r,J as s,de as t,x as u};

package/dist/assets/trash-2-CSfX-BvU.js

@@ -1 +0,0 @@
-import{c as e}from"./dist-NZRV-BxD.js";var t=e(`Trash2`,[[`path`,{d:`M3 6h18`,key:`d0wm0j`}],[`path`,{d:`M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6`,key:`4alrt4`}],[`path`,{d:`M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2`,key:`v07s0e`}],[`line`,{x1:`10`,x2:`10`,y1:`11`,y2:`17`,key:`1uufr5`}],[`line`,{x1:`14`,x2:`14`,y1:`11`,y2:`17`,key:`xtxkd`}]]);export{t};

package/dist/assets/use-config-TzwzTgg0.js

@@ -1 +0,0 @@
-import{r as e}from"./react-Dsotw5vM.js";import{$ as t,F as n,G as r,H as i,Ht as a,J as o,L as s,M as c,P as l,Q as u,R as d,U as f,Ut as p,Vt as m,W as h,X as g,Y as _,Z as v,en as y,et as b,tt as x,z as S}from"./api-B50yVdT8.js";function C(){return p({queryKey:[`config`],queryFn:s,staleTime:3e4,refetchOnWindowFocus:!0})}function w(){return p({queryKey:[`config-meta`],queryFn:d,staleTime:1/0})}function T(){return p({queryKey:[`providers`],queryFn:f,staleTime:3e4,refetchOnWindowFocus:!0})}function E(){return p({queryKey:[`provider-templates`],queryFn:i,staleTime:1/0})}function D(){return p({queryKey:[`config-schema`],queryFn:S,staleTime:1/0})}function O(){let t=y();return a({mutationFn:v,onSuccess:()=>{t.invalidateQueries({queryKey:[`config`]}),m.success(e(`configSaved`))},onError:t=>{m.error(e(`configSaveFailed`)+`: `+t.message)}})}function k(){let t=y();return a({mutationFn:({data:e})=>b(e),onSuccess:()=>{t.invalidateQueries({queryKey:[`config`]}),t.invalidateQueries({queryKey:[`config-meta`]}),m.success(e(`configSavedApplied`))},onError:t=>{m.error(e(`configSaveFailed`)+`: `+t.message)}})}function A(){let t=y();return a({mutationFn:({provider:e,data:t})=>u(e,t),onSuccess:(n,r)=>{t.invalidateQueries({queryKey:[`providers`]}),t.invalidateQueries({queryKey:[`config`]}),r.silentSuccess||m.success(e(`configSaved`))},onError:t=>{m.error(e(`configSaveFailed`)+`: `+t.message)}})}function j(){let t=y();return a({mutationFn:({data:e})=>c(e??{}),onSuccess:()=>{t.invalidateQueries({queryKey:[`providers`]}),t.invalidateQueries({queryKey:[`config`]}),m.success(e(`configSaved`))},onError:t=>{m.error(e(`configSaveFailed`)+`: `+t.message)}})}function M(){let t=y();return a({mutationFn:({provider:e})=>l(e),onSuccess:()=>{t.invalidateQueries({queryKey:[`providers`]}),t.invalidateQueries({queryKey:[`config`]}),m.success(e(`configSaved`))},onError:t=>{m.error(e(`configSaveFailed`)+`: `+t.message)}})}function N(){return a({mutationFn:({provider:e,data:t})=>_(e,t)})}function P(){return a({mutationFn:({provider:e,data:t})=>o(e,t)})}function F(){return a({mutationFn:({provider:e,data:t})=>r(e,t)})}function I(){return a({mutationFn:({provider:e})=>h(e)})}function L(){let t=y();return a({mutationFn:({channel:e,data:t})=>g(e,t),onSuccess:()=>{t.invalidateQueries({queryKey:[`config`]}),t.invalidateQueries({queryKey:[`config-meta`]}),m.success(e(`configSavedApplying`))},onError:t=>{m.error(e(`configSaveFailed`)+`: `+t.message)}})}function R(){let n=y();return a({mutationFn:({data:e})=>t(e),onSuccess:()=>{n.invalidateQueries({queryKey:[`config`]}),m.success(e(`configSavedApplied`))},onError:t=>{m.error(e(`configSaveFailed`)+`: `+t.message)}})}function z(){let t=y();return a({mutationFn:({data:e})=>x(e),onSuccess:()=>{t.invalidateQueries({queryKey:[`config`]}),m.success(e(`configSavedApplied`))},onError:t=>{m.error(e(`configSaveFailed`)+`: `+t.message)}})}function B(){return a({mutationFn:({actionId:e,data:t})=>n(e,t),onError:t=>{m.error(e(`error`)+`: `+t.message)}})}export{k as _,M as a,F as c,P as d,N as f,R as g,A as h,j as i,E as l,O as m,w as n,B as o,L as p,D as r,I as s,C as t,T as u,z as v};

package/dist/assets/x-fkIWvi07.js

@@ -1 +0,0 @@
-import{c as e}from"./dist-NZRV-BxD.js";var t=e(`X`,[[`path`,{d:`M18 6 6 18`,key:`1bl5f8`}],[`path`,{d:`m6 6 12 12`,key:`d8bk6v`}]]);export{t};

package/src/features/chat/components/__tests__/chat-welcome.test.tsx

@@ -1,45 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { fireEvent } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import { ChatWelcome } from '../chat-welcome';
-
-describe('ChatWelcome', () => {
-  it('renders a lightweight draft agent select and allows switching', () => {
-    const onCreateSession = vi.fn();
-    const onSelectAgent = vi.fn();
-
-    render(
-      <ChatWelcome
-        onCreateSession={onCreateSession}
-        agents={[
-          { id: 'main', displayName: 'Main' },
-          { id: 'engineer', displayName: 'Engineer' }
-        ]}
-        selectedAgentId="main"
-        onSelectAgent={onSelectAgent}
-      />
-    );
-
-    const trigger = screen.getByRole('combobox', { name: 'Draft agent' });
-    fireEvent.keyDown(trigger, { key: 'ArrowDown' });
-    fireEvent.click(screen.getByText('Engineer'));
-
-    expect(onSelectAgent).toHaveBeenCalledWith('engineer');
-    expect(screen.queryByText('Current Agent:')).toBeNull();
-  });
-
-  it('uses an adaptive capability grid for narrow docked layouts', () => {
-    render(
-      <ChatWelcome
-        onCreateSession={vi.fn()}
-        agents={[{ id: 'main', displayName: 'Main' }]}
-        selectedAgentId="main"
-        onSelectAgent={vi.fn()}
-      />
-    );
-
-    expect(screen.getByRole('button', { name: /Smart Conversations/ }).parentElement?.className).toContain(
-      'auto-fit',
-    );
-  });
-});

package/src/features/chat/components/chat-welcome.tsx

@@ -1,102 +0,0 @@
-import type { AgentProfileView } from '@/shared/lib/api';
-import { AgentAvatar } from '@/shared/components/common/agent-avatar';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@/shared/components/ui/select';
-import { t } from '@/shared/lib/i18n';
-import { Bot, BrainCircuit, AlarmClock, MessageCircle } from 'lucide-react';
-
-type ChatWelcomeProps = { onCreateSession: () => void; agents: AgentProfileView[]; selectedAgentId: string; onSelectAgent: (agentId: string) => void };
-
-const capabilities = [
-  {
-    icon: MessageCircle,
-    titleKey: 'chatWelcomeCapability1Title' as const,
-    descKey: 'chatWelcomeCapability1Desc' as const,
-  },
-  {
-    icon: BrainCircuit,
-    titleKey: 'chatWelcomeCapability2Title' as const,
-    descKey: 'chatWelcomeCapability2Desc' as const,
-  },
-  {
-    icon: AlarmClock,
-    titleKey: 'chatWelcomeCapability3Title' as const,
-    descKey: 'chatWelcomeCapability3Desc' as const,
-  },
-];
-
-export function ChatWelcome({ onCreateSession, agents, selectedAgentId, onSelectAgent }: ChatWelcomeProps) {
-  const selectedAgent = agents.find((agent) => agent.id === selectedAgentId) ?? null;
-
-  return (
-    <div className="min-h-full flex items-center justify-center px-4 py-6 sm:p-8">
-      <div className="max-w-lg w-full min-w-0 text-center">
-        <div className="mx-auto mb-6 h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center">
-          <Bot className="h-8 w-8 text-primary" />
-        </div>
-
-        <h2 className="text-xl font-semibold text-gray-900 mb-2">{t('chatWelcomeTitle')}</h2>
-        <p className="text-sm text-gray-500 mb-8">{t('chatWelcomeSubtitle')}</p>
-
-        <div className="mb-6 flex items-center justify-center gap-2.5">
-          <span className="text-[13px] font-medium text-gray-500">
-            {t('chatDraftAgentTitle')}
-          </span>
-          <Select value={selectedAgentId} onValueChange={onSelectAgent}>
-            <SelectTrigger
-              aria-label={t('chatDraftAgentTitle')}
-              className="h-auto w-auto gap-1 rounded-full border-0 bg-transparent px-1.5 py-1 text-gray-500 shadow-none hover:bg-white/70 hover:text-gray-800 focus:ring-0"
-            >
-              <span className="sr-only">{t('chatDraftAgentTitle')}</span>
-              <div className="flex items-center gap-1.5">
-                {selectedAgent ? (
-                  <AgentAvatar
-                    agentId={selectedAgent.id}
-                    displayName={selectedAgent.displayName}
-                    avatarUrl={selectedAgent.avatarUrl}
-                    className="h-7 w-7 shrink-0"
-                  />
-                ) : null}
-              </div>
-            </SelectTrigger>
-            <SelectContent className="rounded-xl border-gray-200/80 shadow-lg">
-              {agents.map((agent) => (
-                <SelectItem key={agent.id} value={agent.id} className="rounded-lg pr-10">
-                  <div className="flex min-w-0 items-center gap-2">
-                    <AgentAvatar
-                      agentId={agent.id}
-                      displayName={agent.displayName}
-                      avatarUrl={agent.avatarUrl}
-                      className="h-5 w-5 shrink-0"
-                    />
-                    <span className="truncate text-sm font-medium text-gray-700">
-                      {agent.displayName?.trim() || agent.id}
-                    </span>
-                  </div>
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-        <div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,9.5rem),1fr))] gap-3">
-          {capabilities.map((cap) => {
-            const Icon = cap.icon;
-            return (
-              <button
-                key={cap.titleKey}
-                onClick={onCreateSession}
-                className="min-w-0 rounded-2xl border border-gray-200 bg-white p-3 text-left shadow-card hover:shadow-card-hover transition-shadow cursor-pointer sm:p-4"
-              >
-                <div className="h-9 w-9 rounded-xl bg-primary/8 flex items-center justify-center mb-3">
-                  <Icon className="h-4.5 w-4.5 text-primary" />
-                </div>
-                <div className="text-sm font-semibold text-gray-900 mb-1">{t(cap.titleKey)}</div>
-                <div className="text-[11px] text-gray-500 leading-relaxed">{t(cap.descKey)}</div>
-              </button>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/features/chat/features/input/hooks/__tests__/use-chat-input-bar-controller.test.tsx

@@ -1,152 +0,0 @@
-import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
-import { renderHook, act } from '@testing-library/react';
-import { useChatInputBarController } from '@/features/chat/features/input/hooks/use-chat-input-bar-controller';
-
-function createKeyEvent(
-  key: string,
-  overrides?: Partial<ReactKeyboardEvent<HTMLTextAreaElement>>
-): ReactKeyboardEvent<HTMLTextAreaElement> {
-  return {
-    key,
-    code: key === ' ' ? 'Space' : key,
-    shiftKey: false,
-    nativeEvent: {
-      isComposing: false
-    },
-    preventDefault: vi.fn(),
-    ...overrides
-  } as unknown as ReactKeyboardEvent<HTMLTextAreaElement>;
-}
-
-describe('useChatInputBarController', () => {
-  it('cycles slash items with arrow keys and selects the active item on enter', () => {
-    const onSelectSlashItem = vi.fn();
-    const { result } = renderHook(() =>
-      useChatInputBarController({
-        isSlashMode: true,
-        slashItems: [
-          { key: 'one', title: 'One', subtitle: 'Skill', description: '', detailLines: [] },
-          { key: 'two', title: 'Two', subtitle: 'Skill', description: '', detailLines: [] }
-        ],
-        isSlashLoading: false,
-        onSelectSlashItem,
-        onSend: vi.fn(),
-        onStop: vi.fn(),
-        isSending: false,
-        canStopGeneration: false
-      })
-    );
-
-    act(() => {
-      result.current.onTextareaKeyDown(createKeyEvent('ArrowDown'));
-    });
-    expect(result.current.activeSlashIndex).toBe(1);
-
-    act(() => {
-      result.current.onTextareaKeyDown(createKeyEvent('Enter'));
-    });
-    expect(onSelectSlashItem).toHaveBeenCalledWith(
-      expect.objectContaining({
-        key: 'two'
-      })
-    );
-  });
-
-  it('dismisses the slash panel on space and triggers stop on escape outside slash mode', () => {
-    const onStop = vi.fn();
-    const { result, rerender } = renderHook(
-      (props: {
-        isSlashMode: boolean;
-        isSending: boolean;
-        canStopGeneration: boolean;
-      }) =>
-        useChatInputBarController({
-          isSlashMode: props.isSlashMode,
-          slashItems: [{ key: 'one', title: 'One', subtitle: 'Skill', description: '', detailLines: [] }],
-          isSlashLoading: false,
-          onSelectSlashItem: vi.fn(),
-          onSend: vi.fn(),
-          onStop,
-          isSending: props.isSending,
-          canStopGeneration: props.canStopGeneration
-        }),
-      {
-        initialProps: {
-          isSlashMode: true,
-          isSending: false,
-          canStopGeneration: false
-        }
-      }
-    );
-
-    act(() => {
-      result.current.onTextareaKeyDown(createKeyEvent(' '));
-    });
-    expect(result.current.isSlashPanelOpen).toBe(false);
-
-    rerender({
-      isSlashMode: false,
-      isSending: true,
-      canStopGeneration: true
-    });
-
-    act(() => {
-      result.current.onTextareaKeyDown(createKeyEvent('Escape'));
-    });
-    expect(onStop).toHaveBeenCalled();
-  });
-
-  it('supports Tab selection and Enter send when slash mode is not active', () => {
-    const onSelectSlashItem = vi.fn();
-    const onSend = vi.fn();
-    const { result, rerender } = renderHook(
-      (props: { isSlashMode: boolean }) =>
-        useChatInputBarController({
-          isSlashMode: props.isSlashMode,
-          slashItems: [{ key: 'one', title: 'One', subtitle: 'Skill', description: '', detailLines: [] }],
-          isSlashLoading: false,
-          onSelectSlashItem,
-          onSend,
-          onStop: vi.fn(),
-          isSending: false,
-          canStopGeneration: false
-        }),
-      { initialProps: { isSlashMode: true } }
-    );
-
-    act(() => {
-      result.current.onTextareaKeyDown(createKeyEvent('Tab'));
-    });
-    expect(onSelectSlashItem).toHaveBeenCalledTimes(1);
-
-    rerender({ isSlashMode: false });
-    act(() => {
-      result.current.onTextareaKeyDown(createKeyEvent('Enter'));
-    });
-    expect(onSend).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not send on enter while a response is still running', () => {
-    const onSend = vi.fn();
-    const event = createKeyEvent('Enter');
-    const { result } = renderHook(() =>
-      useChatInputBarController({
-        isSlashMode: false,
-        slashItems: [],
-        isSlashLoading: false,
-        onSelectSlashItem: vi.fn(),
-        onSend,
-        onStop: vi.fn(),
-        isSending: true,
-        canStopGeneration: true
-      })
-    );
-
-    act(() => {
-      result.current.onTextareaKeyDown(event);
-    });
-
-    expect(onSend).not.toHaveBeenCalled();
-    expect(event.preventDefault).toHaveBeenCalledTimes(1);
-  });
-});

package/src/features/chat/features/input/hooks/use-chat-input-bar-controller.ts

@@ -1,142 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import type { ChatSlashItem } from '@nextclaw/agent-chat-ui';
-import type { KeyboardEvent } from 'react';
-
-type UseChatInputBarControllerParams = {
-  isSlashMode: boolean;
-  slashItems: ChatSlashItem[];
-  isSlashLoading: boolean;
-  onSelectSlashItem: (item: ChatSlashItem) => void;
-  onSend: () => Promise<void> | void;
-  onStop: () => Promise<void> | void;
-  isSending: boolean;
-  canStopGeneration: boolean;
-};
-
-function isSubmitKey(event: Pick<KeyboardEvent<HTMLTextAreaElement>, 'key' | 'shiftKey'>): boolean {
-  return event.key === 'Enter' && !event.shiftKey;
-}
-
-function isSlashDismissKey(event: Pick<KeyboardEvent<HTMLTextAreaElement>, 'key' | 'code' | 'nativeEvent'>): boolean {
-  return !event.nativeEvent.isComposing && (event.key === ' ' || event.code === 'Space');
-}
-
-export function useChatInputBarController(params: UseChatInputBarControllerParams) {
-  const {
-    isSlashMode,
-    slashItems,
-    onSelectSlashItem,
-    onSend,
-    onStop,
-    isSending,
-    canStopGeneration
-  } = params;
-  const [activeSlashIndex, setActiveSlashIndex] = useState(0);
-  const [dismissedSlashPanel, setDismissedSlashPanel] = useState(false);
-
-  const isSlashPanelOpen = isSlashMode && !dismissedSlashPanel;
-  const activeSlashItem = slashItems[activeSlashIndex] ?? null;
-
-  useEffect(() => {
-    if (!isSlashPanelOpen || slashItems.length === 0) {
-      setActiveSlashIndex(0);
-      return;
-    }
-    setActiveSlashIndex((current) => {
-      if (current < 0) {
-        return 0;
-      }
-      if (current >= slashItems.length) {
-        return slashItems.length - 1;
-      }
-      return current;
-    });
-  }, [isSlashPanelOpen, slashItems.length]);
-
-  useEffect(() => {
-    if (!isSlashMode && dismissedSlashPanel) {
-      setDismissedSlashPanel(false);
-    }
-  }, [dismissedSlashPanel, isSlashMode]);
-
-  const handleSelectSlashItem = useCallback((item: ChatSlashItem) => {
-    onSelectSlashItem(item);
-    setDismissedSlashPanel(false);
-  }, [onSelectSlashItem]);
-
-  const handleSlashKeyDown = useCallback((event: KeyboardEvent<HTMLTextAreaElement>): boolean => {
-    if (!isSlashPanelOpen || slashItems.length === 0) {
-      return false;
-    }
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      setActiveSlashIndex((current) => (current + 1) % slashItems.length);
-      return true;
-    }
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      setActiveSlashIndex((current) => (current - 1 + slashItems.length) % slashItems.length);
-      return true;
-    }
-    if (!isSubmitKey(event) && event.key !== 'Tab') {
-      return false;
-    }
-    event.preventDefault();
-    const selected = slashItems[activeSlashIndex];
-    if (selected) {
-      handleSelectSlashItem(selected);
-    }
-    return true;
-  }, [activeSlashIndex, handleSelectSlashItem, isSlashPanelOpen, slashItems]);
-
-  const handleEscapeKeyDown = useCallback((event: KeyboardEvent<HTMLTextAreaElement>): boolean => {
-    if (event.key !== 'Escape') {
-      return false;
-    }
-    if (isSlashPanelOpen) {
-      event.preventDefault();
-      setDismissedSlashPanel(true);
-      return true;
-    }
-    if (!isSending || !canStopGeneration) {
-      return false;
-    }
-    event.preventDefault();
-    void onStop();
-    return true;
-  }, [canStopGeneration, isSlashPanelOpen, isSending, onStop]);
-
-  const onTextareaKeyDown = useCallback((event: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (isSubmitKey(event) && isSending) {
-      event.preventDefault();
-      return;
-    }
-    if (isSlashPanelOpen && isSlashDismissKey(event)) {
-      setDismissedSlashPanel(true);
-    }
-    if (handleSlashKeyDown(event)) {
-      return;
-    }
-    if (handleEscapeKeyDown(event)) {
-      return;
-    }
-    if (isSubmitKey(event)) {
-      event.preventDefault();
-      void onSend();
-    }
-  }, [handleEscapeKeyDown, handleSlashKeyDown, isSending, isSlashPanelOpen, onSend]);
-
-  return {
-    isSlashPanelOpen,
-    activeSlashIndex,
-    activeSlashItem,
-    onSelectSlashItem: handleSelectSlashItem,
-    onSlashPanelOpenChange: (open: boolean) => {
-      if (!open) {
-        setDismissedSlashPanel(true);
-      }
-    },
-    onSetActiveSlashIndex: setActiveSlashIndex,
-    onTextareaKeyDown
-  };
-}