@nextclaw/ui 0.6.3 → 0.6.4

package/dist/assets/{useConfirmDialog-_0u6i3cI.js → useConfirmDialog-C-G5k7zK.js}

@@ -1,4 +1,4 @@
-import{r as i,ab as b,aT as I,a8 as ie,j as s,aa as j,ag as le,ac as h,ad as D,ah as ce,ai as de,aj as ue,al as fe,am as ge,an as me,ak as pe,aU as ve,as as xe}from"./vendor-Ylg6Wdt_.js";import{c as N,t as x}from"./index-Cb9xiqC5.js";import{B as w}from"./page-layout-CF0JQsWW.js";function Ne(e,t){return i.useReducer((o,a)=>t[o][a]??o,e)}var E=e=>{const{present:t,children:o}=e,a=De(t),r=typeof o=="function"?o({present:a.isPresent}):i.Children.only(o),n=b(a.ref,he(r));return typeof o=="function"||a.isPresent?i.cloneElement(r,{ref:n}):null};E.displayName="Presence";function De(e){const[t,o]=i.useState(),a=i.useRef(null),r=i.useRef(e),n=i.useRef("none"),l=e?"mounted":"unmounted",[c,u]=Ne(l,{mounted:{UNMOUNT:"unmounted",ANIMATION_OUT:"unmountSuspended"},unmountSuspended:{MOUNT:"mounted",ANIMATION_END:"unmounted"},unmounted:{MOUNT:"mounted"}});return i.useEffect(()=>{const d=y(a.current);n.current=c==="mounted"?d:"none"},[c]),I(()=>{const d=a.current,f=r.current;if(f!==e){const C=n.current,p=y(d);e?u("MOUNT"):p==="none"||(d==null?void 0:d.display)==="none"?u("UNMOUNT"):u(f&&C!==p?"ANIMATION_OUT":"UNMOUNT"),r.current=e}},[e,u]),I(()=>{if(t){let d;const f=t.ownerDocument.defaultView??window,m=p=>{const re=y(a.current).includes(CSS.escape(p.animationName));if(p.target===t&&re&&(u("ANIMATION_END"),!r.current)){const se=t.style.animationFillMode;t.style.animationFillMode="forwards",d=f.setTimeout(()=>{t.style.animationFillMode==="forwards"&&(t.style.animationFillMode=se)})}},C=p=>{p.target===t&&(n.current=y(a.current))};return t.addEventListener("animationstart",C),t.addEventListener("animationcancel",m),t.addEventListener("animationend",m),()=>{f.clearTimeout(d),t.removeEventListener("animationstart",C),t.removeEventListener("animationcancel",m),t.removeEventListener("animationend",m)}}else u("ANIMATION_END")},[t,u]),{isPresent:["mounted","unmountSuspended"].includes(c),ref:i.useCallback(d=>{a.current=d?getComputedStyle(d):null,o(d)},[])}}function y(e){return(e==null?void 0:e.animationName)||"none"}function he(e){var a,r;let t=(a=Object.getOwnPropertyDescriptor(e.props,"ref"))==null?void 0:a.get,o=t&&"isReactWarning"in t&&t.isReactWarning;return o?e.ref:(t=(r=Object.getOwnPropertyDescriptor(e,"ref"))==null?void 0:r.get,o=t&&"isReactWarning"in t&&t.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}var O="Dialog",[M]=ce(O),[Ce,g]=M(O),T=e=>{const{__scopeDialog:t,children:o,open:a,defaultOpen:r,onOpenChange:n,modal:l=!0}=e,c=i.useRef(null),u=i.useRef(null),[d,f]=ie({prop:a,defaultProp:r??!1,onChange:n,caller:O});return s.jsx(Ce,{scope:t,triggerRef:c,contentRef:u,contentId:j(),titleId:j(),descriptionId:j(),open:d,onOpenChange:f,onOpenToggle:i.useCallback(()=>f(m=>!m),[f]),modal:l,children:o})};T.displayName=O;var S="DialogTrigger",ye=i.forwardRef((e,t)=>{const{__scopeDialog:o,...a}=e,r=g(S,o),n=b(t,r.triggerRef);return s.jsx(h.button,{type:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":_(r.open),...a,ref:n,onClick:D(e.onClick,r.onOpenToggle)})});ye.displayName=S;var A="DialogPortal",[Re,F]=M(A,{forceMount:void 0}),L=e=>{const{__scopeDialog:t,forceMount:o,children:a,container:r}=e,n=g(A,t);return s.jsx(Re,{scope:t,forceMount:o,children:i.Children.map(a,l=>s.jsx(E,{present:o||n.open,children:s.jsx(le,{asChild:!0,container:r,children:l})}))})};L.displayName=A;var R="DialogOverlay",k=i.forwardRef((e,t)=>{const o=F(R,e.__scopeDialog),{forceMount:a=o.forceMount,...r}=e,n=g(R,e.__scopeDialog);return n.modal?s.jsx(E,{present:a||n.open,children:s.jsx(Ee,{...r,ref:t})}):null});k.displayName=R;var be=pe("DialogOverlay.RemoveScroll"),Ee=i.forwardRef((e,t)=>{const{__scopeDialog:o,...a}=e,r=g(R,o);return s.jsx(ue,{as:be,allowPinchZoom:!0,shards:[r.contentRef],children:s.jsx(h.div,{"data-state":_(r.open),...a,ref:t,style:{pointerEvents:"auto",...a.style}})})}),v="DialogContent",W=i.forwardRef((e,t)=>{const o=F(v,e.__scopeDialog),{forceMount:a=o.forceMount,...r}=e,n=g(v,e.__scopeDialog);return s.jsx(E,{present:a||n.open,children:n.modal?s.jsx(Oe,{...r,ref:t}):s.jsx(je,{...r,ref:t})})});W.displayName=v;var Oe=i.forwardRef((e,t)=>{const o=g(v,e.__scopeDialog),a=i.useRef(null),r=b(t,o.contentRef,a);return i.useEffect(()=>{const n=a.current;if(n)return de(n)},[]),s.jsx(U,{...e,ref:r,trapFocus:o.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:D(e.onCloseAutoFocus,n=>{var l;n.preventDefault(),(l=o.triggerRef.current)==null||l.focus()}),onPointerDownOutside:D(e.onPointerDownOutside,n=>{const l=n.detail.originalEvent,c=l.button===0&&l.ctrlKey===!0;(l.button===2||c)&&n.preventDefault()}),onFocusOutside:D(e.onFocusOutside,n=>n.preventDefault())})}),je=i.forwardRef((e,t)=>{const o=g(v,e.__scopeDialog),a=i.useRef(!1),r=i.useRef(!1);return s.jsx(U,{...e,ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:n=>{var l,c;(l=e.onCloseAutoFocus)==null||l.call(e,n),n.defaultPrevented||(a.current||(c=o.triggerRef.current)==null||c.focus(),n.preventDefault()),a.current=!1,r.current=!1},onInteractOutside:n=>{var u,d;(u=e.onInteractOutside)==null||u.call(e,n),n.defaultPrevented||(a.current=!0,n.detail.originalEvent.type==="pointerdown"&&(r.current=!0));const l=n.target;((d=o.triggerRef.current)==null?void 0:d.contains(l))&&n.preventDefault(),n.detail.originalEvent.type==="focusin"&&r.current&&n.preventDefault()}})}),U=i.forwardRef((e,t)=>{const{__scopeDialog:o,trapFocus:a,onOpenAutoFocus:r,onCloseAutoFocus:n,...l}=e,c=g(v,o),u=i.useRef(null),d=b(t,u);return fe(),s.jsxs(s.Fragment,{children:[s.jsx(ge,{asChild:!0,loop:!0,trapped:a,onMountAutoFocus:r,onUnmountAutoFocus:n,children:s.jsx(me,{role:"dialog",id:c.contentId,"aria-describedby":c.descriptionId,"aria-labelledby":c.titleId,"data-state":_(c.open),...l,ref:d,onDismiss:()=>c.onOpenChange(!1)})}),s.jsxs(s.Fragment,{children:[s.jsx(Ae,{titleId:c.titleId}),s.jsx(_e,{contentRef:u,descriptionId:c.descriptionId})]})]})}),P="DialogTitle",$=i.forwardRef((e,t)=>{const{__scopeDialog:o,...a}=e,r=g(P,o);return s.jsx(h.h2,{id:r.titleId,...a,ref:t})});$.displayName=P;var G="DialogDescription",B=i.forwardRef((e,t)=>{const{__scopeDialog:o,...a}=e,r=g(G,o);return s.jsx(h.p,{id:r.descriptionId,...a,ref:t})});B.displayName=G;var z="DialogClose",H=i.forwardRef((e,t)=>{const{__scopeDialog:o,...a}=e,r=g(z,o);return s.jsx(h.button,{type:"button",...a,ref:t,onClick:D(e.onClick,()=>r.onOpenChange(!1))})});H.displayName=z;function _(e){return e?"open":"closed"}var V="DialogTitleWarning",[$e,q]=ve(V,{contentName:v,titleName:P,docsSlug:"dialog"}),Ae=({titleId:e})=>{const t=q(V),o=`\`${t.contentName}\` requires a \`${t.titleName}\` for the component to be accessible for screen reader users.
+import{r as i,ab as b,aT as I,a8 as ie,j as s,aa as j,ag as le,ac as h,ad as D,ah as ce,ai as de,aj as ue,al as fe,am as ge,an as me,ak as pe,aU as ve,as as xe}from"./vendor-Ylg6Wdt_.js";import{c as N,t as x}from"./index-8RAlp6Gn.js";import{B as w}from"./page-layout-BL29v3Ct.js";function Ne(e,t){return i.useReducer((o,a)=>t[o][a]??o,e)}var E=e=>{const{present:t,children:o}=e,a=De(t),r=typeof o=="function"?o({present:a.isPresent}):i.Children.only(o),n=b(a.ref,he(r));return typeof o=="function"||a.isPresent?i.cloneElement(r,{ref:n}):null};E.displayName="Presence";function De(e){const[t,o]=i.useState(),a=i.useRef(null),r=i.useRef(e),n=i.useRef("none"),l=e?"mounted":"unmounted",[c,u]=Ne(l,{mounted:{UNMOUNT:"unmounted",ANIMATION_OUT:"unmountSuspended"},unmountSuspended:{MOUNT:"mounted",ANIMATION_END:"unmounted"},unmounted:{MOUNT:"mounted"}});return i.useEffect(()=>{const d=y(a.current);n.current=c==="mounted"?d:"none"},[c]),I(()=>{const d=a.current,f=r.current;if(f!==e){const C=n.current,p=y(d);e?u("MOUNT"):p==="none"||(d==null?void 0:d.display)==="none"?u("UNMOUNT"):u(f&&C!==p?"ANIMATION_OUT":"UNMOUNT"),r.current=e}},[e,u]),I(()=>{if(t){let d;const f=t.ownerDocument.defaultView??window,m=p=>{const re=y(a.current).includes(CSS.escape(p.animationName));if(p.target===t&&re&&(u("ANIMATION_END"),!r.current)){const se=t.style.animationFillMode;t.style.animationFillMode="forwards",d=f.setTimeout(()=>{t.style.animationFillMode==="forwards"&&(t.style.animationFillMode=se)})}},C=p=>{p.target===t&&(n.current=y(a.current))};return t.addEventListener("animationstart",C),t.addEventListener("animationcancel",m),t.addEventListener("animationend",m),()=>{f.clearTimeout(d),t.removeEventListener("animationstart",C),t.removeEventListener("animationcancel",m),t.removeEventListener("animationend",m)}}else u("ANIMATION_END")},[t,u]),{isPresent:["mounted","unmountSuspended"].includes(c),ref:i.useCallback(d=>{a.current=d?getComputedStyle(d):null,o(d)},[])}}function y(e){return(e==null?void 0:e.animationName)||"none"}function he(e){var a,r;let t=(a=Object.getOwnPropertyDescriptor(e.props,"ref"))==null?void 0:a.get,o=t&&"isReactWarning"in t&&t.isReactWarning;return o?e.ref:(t=(r=Object.getOwnPropertyDescriptor(e,"ref"))==null?void 0:r.get,o=t&&"isReactWarning"in t&&t.isReactWarning,o?e.props.ref:e.props.ref||e.ref)}var O="Dialog",[M]=ce(O),[Ce,g]=M(O),T=e=>{const{__scopeDialog:t,children:o,open:a,defaultOpen:r,onOpenChange:n,modal:l=!0}=e,c=i.useRef(null),u=i.useRef(null),[d,f]=ie({prop:a,defaultProp:r??!1,onChange:n,caller:O});return s.jsx(Ce,{scope:t,triggerRef:c,contentRef:u,contentId:j(),titleId:j(),descriptionId:j(),open:d,onOpenChange:f,onOpenToggle:i.useCallback(()=>f(m=>!m),[f]),modal:l,children:o})};T.displayName=O;var S="DialogTrigger",ye=i.forwardRef((e,t)=>{const{__scopeDialog:o,...a}=e,r=g(S,o),n=b(t,r.triggerRef);return s.jsx(h.button,{type:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":_(r.open),...a,ref:n,onClick:D(e.onClick,r.onOpenToggle)})});ye.displayName=S;var A="DialogPortal",[Re,F]=M(A,{forceMount:void 0}),L=e=>{const{__scopeDialog:t,forceMount:o,children:a,container:r}=e,n=g(A,t);return s.jsx(Re,{scope:t,forceMount:o,children:i.Children.map(a,l=>s.jsx(E,{present:o||n.open,children:s.jsx(le,{asChild:!0,container:r,children:l})}))})};L.displayName=A;var R="DialogOverlay",k=i.forwardRef((e,t)=>{const o=F(R,e.__scopeDialog),{forceMount:a=o.forceMount,...r}=e,n=g(R,e.__scopeDialog);return n.modal?s.jsx(E,{present:a||n.open,children:s.jsx(Ee,{...r,ref:t})}):null});k.displayName=R;var be=pe("DialogOverlay.RemoveScroll"),Ee=i.forwardRef((e,t)=>{const{__scopeDialog:o,...a}=e,r=g(R,o);return s.jsx(ue,{as:be,allowPinchZoom:!0,shards:[r.contentRef],children:s.jsx(h.div,{"data-state":_(r.open),...a,ref:t,style:{pointerEvents:"auto",...a.style}})})}),v="DialogContent",W=i.forwardRef((e,t)=>{const o=F(v,e.__scopeDialog),{forceMount:a=o.forceMount,...r}=e,n=g(v,e.__scopeDialog);return s.jsx(E,{present:a||n.open,children:n.modal?s.jsx(Oe,{...r,ref:t}):s.jsx(je,{...r,ref:t})})});W.displayName=v;var Oe=i.forwardRef((e,t)=>{const o=g(v,e.__scopeDialog),a=i.useRef(null),r=b(t,o.contentRef,a);return i.useEffect(()=>{const n=a.current;if(n)return de(n)},[]),s.jsx(U,{...e,ref:r,trapFocus:o.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:D(e.onCloseAutoFocus,n=>{var l;n.preventDefault(),(l=o.triggerRef.current)==null||l.focus()}),onPointerDownOutside:D(e.onPointerDownOutside,n=>{const l=n.detail.originalEvent,c=l.button===0&&l.ctrlKey===!0;(l.button===2||c)&&n.preventDefault()}),onFocusOutside:D(e.onFocusOutside,n=>n.preventDefault())})}),je=i.forwardRef((e,t)=>{const o=g(v,e.__scopeDialog),a=i.useRef(!1),r=i.useRef(!1);return s.jsx(U,{...e,ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:n=>{var l,c;(l=e.onCloseAutoFocus)==null||l.call(e,n),n.defaultPrevented||(a.current||(c=o.triggerRef.current)==null||c.focus(),n.preventDefault()),a.current=!1,r.current=!1},onInteractOutside:n=>{var u,d;(u=e.onInteractOutside)==null||u.call(e,n),n.defaultPrevented||(a.current=!0,n.detail.originalEvent.type==="pointerdown"&&(r.current=!0));const l=n.target;((d=o.triggerRef.current)==null?void 0:d.contains(l))&&n.preventDefault(),n.detail.originalEvent.type==="focusin"&&r.current&&n.preventDefault()}})}),U=i.forwardRef((e,t)=>{const{__scopeDialog:o,trapFocus:a,onOpenAutoFocus:r,onCloseAutoFocus:n,...l}=e,c=g(v,o),u=i.useRef(null),d=b(t,u);return fe(),s.jsxs(s.Fragment,{children:[s.jsx(ge,{asChild:!0,loop:!0,trapped:a,onMountAutoFocus:r,onUnmountAutoFocus:n,children:s.jsx(me,{role:"dialog",id:c.contentId,"aria-describedby":c.descriptionId,"aria-labelledby":c.titleId,"data-state":_(c.open),...l,ref:d,onDismiss:()=>c.onOpenChange(!1)})}),s.jsxs(s.Fragment,{children:[s.jsx(Ae,{titleId:c.titleId}),s.jsx(_e,{contentRef:u,descriptionId:c.descriptionId})]})]})}),P="DialogTitle",$=i.forwardRef((e,t)=>{const{__scopeDialog:o,...a}=e,r=g(P,o);return s.jsx(h.h2,{id:r.titleId,...a,ref:t})});$.displayName=P;var G="DialogDescription",B=i.forwardRef((e,t)=>{const{__scopeDialog:o,...a}=e,r=g(G,o);return s.jsx(h.p,{id:r.descriptionId,...a,ref:t})});B.displayName=G;var z="DialogClose",H=i.forwardRef((e,t)=>{const{__scopeDialog:o,...a}=e,r=g(z,o);return s.jsx(h.button,{type:"button",...a,ref:t,onClick:D(e.onClick,()=>r.onOpenChange(!1))})});H.displayName=z;function _(e){return e?"open":"closed"}var V="DialogTitleWarning",[$e,q]=ve(V,{contentName:v,titleName:P,docsSlug:"dialog"}),Ae=({titleId:e})=>{const t=q(V),o=`\`${t.contentName}\` requires a \`${t.titleName}\` for the component to be accessible for screen reader users.
 
 If you want to hide the \`${t.titleName}\`, you can wrap it with our VisuallyHidden component.
 

package/dist/index.html

@@ -6,9 +6,9 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw - 系统配置</title>
-  <script type="module" crossorigin src="/assets/index-Cb9xiqC5.js"></script>
+  <script type="module" crossorigin src="/assets/index-8RAlp6Gn.js"></script>
   <link rel="modulepreload" crossorigin href="/assets/vendor-Ylg6Wdt_.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-BiJ2xs5X.css">
+  <link rel="stylesheet" crossorigin href="/assets/index-r3k4oB78.css">
 </head>
 
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "private": false,
   "type": "module",
   "license": "MIT",

package/src/components/chat/ChatConversationPanel.tsx

@@ -40,6 +40,34 @@ type ChatConversationPanelProps = {
   queuedCount: number;
 };
 
+function ChatConversationSkeleton() {
+  return (
+    <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
+        <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
+          <div className="space-y-4">
+            <div className="h-6 w-48 animate-pulse rounded bg-gray-200" />
+            <div className="h-24 w-[78%] animate-pulse rounded-2xl bg-gray-200/80" />
+            <div className="h-20 w-[62%] animate-pulse rounded-2xl bg-gray-200/80" />
+            <div className="h-28 w-[84%] animate-pulse rounded-2xl bg-gray-200/80" />
+          </div>
+        </div>
+      </div>
+      <div className="border-t border-gray-200/80 bg-white p-4">
+        <div className="mx-auto w-full max-w-[min(1120px,100%)]">
+          <div className="rounded-2xl border border-gray-200 bg-white shadow-card p-4">
+            <div className="h-16 w-full animate-pulse rounded-xl bg-gray-200/80" />
+            <div className="mt-3 flex items-center justify-between">
+              <div className="h-8 w-36 animate-pulse rounded-lg bg-gray-200/80" />
+              <div className="h-8 w-20 animate-pulse rounded-lg bg-gray-200/80" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 export function ChatConversationPanel({
   isProviderStateResolved,
   modelOptions,
@@ -82,6 +110,10 @@ export function ChatConversationPanel({
     !isAwaitingAssistantOutput &&
     !streamingAssistantText.trim();
 
+  if (!isProviderStateResolved) {
+    return <ChatConversationSkeleton />;
+  }
+
   return (
     <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
       {/* Minimal top bar - only shown when session is active */}
@@ -134,6 +166,7 @@ export function ChatConversationPanel({
 
       {/* Enhanced input bar */}
       <ChatInputBar
+        isProviderStateResolved={isProviderStateResolved}
         draft={draft}
         onDraftChange={onDraftChange}
         onSend={onSend}

package/src/components/chat/ChatInputBar.tsx

@@ -13,6 +13,7 @@ export type ChatModelOption = {
 };
 
 type ChatInputBarProps = {
+  isProviderStateResolved: boolean;
   draft: string;
   onDraftChange: (value: string) => void;
   onSend: () => Promise<void> | void;
@@ -33,6 +34,7 @@ type ChatInputBarProps = {
 };
 
 export function ChatInputBar({
+  isProviderStateResolved,
   draft,
   onDraftChange,
   onSend,
@@ -52,7 +54,9 @@ export function ChatInputBar({
   onSelectedSkillsChange
 }: ChatInputBarProps) {
   const hasModelOptions = modelOptions.length > 0;
-  const inputDisabled = !hasModelOptions && !isSending;
+  const isModelOptionsLoading = !isProviderStateResolved && !hasModelOptions;
+  const isModelOptionsEmpty = isProviderStateResolved && !hasModelOptions;
+  const inputDisabled = (isModelOptionsLoading || isModelOptionsEmpty) && !isSending;
   const selectedModelOption = modelOptions.find((option) => option.value === selectedModel);
   const resolvedStopHint =
     stopDisabledReason === '__preparing__'
@@ -86,10 +90,24 @@ export function ChatInputBar({
                 void onSend();
               }
             }}
-            placeholder={hasModelOptions ? t('chatInputPlaceholder') : t('chatModelNoOptions')}
+            placeholder={
+              isModelOptionsLoading
+                ? ''
+                : hasModelOptions
+                  ? t('chatInputPlaceholder')
+                  : t('chatModelNoOptions')
+            }
             className="w-full min-h-[68px] max-h-[220px] resize-y bg-transparent outline-none text-sm px-4 py-3 text-gray-800 placeholder:text-gray-400"
           />
-          {!hasModelOptions && (
+          {isModelOptionsLoading && (
+            <div className="px-4 pb-2">
+              <div className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
+                <span className="h-3 w-28 animate-pulse rounded bg-gray-200" />
+                <span className="h-3 w-16 animate-pulse rounded bg-gray-200" />
+              </div>
+            </div>
+          )}
+          {isModelOptionsEmpty && (
             <div className="px-4 pb-2">
               <div className="inline-flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs text-amber-800">
                 <span>{t('chatModelNoOptions')}</span>
@@ -147,13 +165,23 @@ export function ChatInputBar({
                         {selectedModelOption.providerLabel}/{selectedModelOption.modelLabel}
                       </span>
                     </div>
+                  ) : isModelOptionsLoading ? (
+                    <div className="h-3 w-24 animate-pulse rounded bg-gray-200" />
                   ) : (
                     <SelectValue placeholder={t('chatSelectModel')} />
                   )}
                 </SelectTrigger>
                 <SelectContent className="w-[320px]">
                   {modelOptions.length === 0 && (
-                    <div className="px-3 py-2 text-xs text-gray-500">{t('chatModelNoOptions')}</div>
+                    isModelOptionsLoading ? (
+                      <div className="space-y-2 px-3 py-2">
+                        <div className="h-3 w-36 animate-pulse rounded bg-gray-200" />
+                        <div className="h-3 w-28 animate-pulse rounded bg-gray-200" />
+                        <div className="h-3 w-32 animate-pulse rounded bg-gray-200" />
+                      </div>
+                    ) : (
+                      <div className="px-3 py-2 text-xs text-gray-500">{t('chatModelNoOptions')}</div>
+                    )
                   )}
                   {modelOptions.map((option) => (
                     <SelectItem key={option.value} value={option.value} className="py-2">

package/src/components/chat/ChatThread.tsx

@@ -1,4 +1,4 @@
-import { useMemo, type ReactNode } from 'react';
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
 import type { SessionEventView, SessionMessageView } from '@/api/types';
 import { cn } from '@/lib/utils';
 import {
@@ -11,10 +11,9 @@ import {
   type ToolCard
 } from '@/lib/chat-message';
 import { formatDateTime, t } from '@/lib/i18n';
-import ReactMarkdown from 'react-markdown';
-import rehypeSanitize from 'rehype-sanitize';
+import ReactMarkdown, { type Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Bot, Clock3, FileSearch, Globe, Search, SendHorizontal, Terminal, User, Wrench } from 'lucide-react';
+import { Bot, Check, Clock3, Copy, FileSearch, Globe, Search, SendHorizontal, Terminal, User, Wrench } from 'lucide-react';
 
 type ChatThreadProps = {
   events: SessionEventView[];
@@ -24,6 +23,8 @@ type ChatThreadProps = {
 
 const MARKDOWN_MAX_CHARS = 140_000;
 const TOOL_OUTPUT_PREVIEW_MAX = 220;
+const CODE_LANGUAGE_REGEX = /language-([a-z0-9-]+)/i;
+const SAFE_LINK_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:']);
 
 type WorkflowToolCard = ToolCard & {
   _workflowStep?: number;
@@ -36,6 +37,91 @@ function trimMarkdown(value: string): string {
   return `${value.slice(0, MARKDOWN_MAX_CHARS)}\n\n…`;
 }
 
+function flattenNodeText(value: ReactNode): string {
+  if (typeof value === 'string' || typeof value === 'number') {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(flattenNodeText).join('');
+  }
+  return '';
+}
+
+function normalizeCodeText(value: ReactNode): string {
+  const content = flattenNodeText(value);
+  return content.endsWith('\n') ? content.slice(0, -1) : content;
+}
+
+function resolveCodeLanguage(className?: string): string {
+  const match = className ? CODE_LANGUAGE_REGEX.exec(className) : null;
+  return match?.[1]?.toLowerCase() || 'text';
+}
+
+function resolveSafeHref(href?: string): string | null {
+  if (!href) {
+    return null;
+  }
+  if (href.startsWith('#') || href.startsWith('/') || href.startsWith('./') || href.startsWith('../')) {
+    return href;
+  }
+  try {
+    const url = new URL(href);
+    return SAFE_LINK_PROTOCOLS.has(url.protocol) ? href : null;
+  } catch {
+    return null;
+  }
+}
+
+function isExternalHref(href: string): boolean {
+  return /^https?:\/\//i.test(href);
+}
+
+function MarkdownCodeBlock({ className, children }: { className?: string; children: ReactNode }) {
+  const [copied, setCopied] = useState(false);
+  const language = useMemo(() => resolveCodeLanguage(className), [className]);
+  const codeText = useMemo(() => normalizeCodeText(children), [children]);
+
+  const handleCopy = useCallback(async () => {
+    if (!codeText || typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(codeText);
+      setCopied(true);
+    } catch {
+      setCopied(false);
+    }
+  }, [codeText]);
+
+  useEffect(() => {
+    if (!copied || typeof window === 'undefined') {
+      return;
+    }
+    const timer = window.setTimeout(() => setCopied(false), 1300);
+    return () => window.clearTimeout(timer);
+  }, [copied]);
+
+  return (
+    <div className="chat-codeblock">
+      <div className="chat-codeblock-toolbar">
+        <span className="chat-codeblock-language">{language}</span>
+        <button
+          type="button"
+          className="chat-codeblock-copy"
+          onClick={handleCopy}
+          aria-label={copied ? t('chatCodeCopied') : t('chatCodeCopy')}
+        >
+          {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+          <span>{copied ? t('chatCodeCopied') : t('chatCodeCopy')}</span>
+        </button>
+      </div>
+      <pre>
+        <code className={className}>{codeText}</code>
+      </pre>
+    </div>
+  );
+}
+
 function roleTitle(role: ChatRole): string {
   if (role === 'user') return t('chatRoleUser');
   if (role === 'assistant') return t('chatRoleAssistant');
@@ -91,16 +177,69 @@ function RoleAvatar({ role }: { role: ChatRole }) {
 
 function MarkdownBlock({ text, role }: { text: string; role: ChatRole }) {
   const isUser = role === 'user';
+  const markdownComponents = useMemo<Components>(() => ({
+    a: ({ href, children, ...props }) => {
+      const safeHref = resolveSafeHref(href);
+      if (!safeHref) {
+        return <span className="chat-link-invalid">{children}</span>;
+      }
+      const external = isExternalHref(safeHref);
+      return (
+        <a
+          {...props}
+          href={safeHref}
+          target={external ? '_blank' : undefined}
+          rel={external ? 'noreferrer noopener' : undefined}
+        >
+          {children}
+        </a>
+      );
+    },
+    table: ({ children, ...props }) => (
+      <div className="chat-table-wrap">
+        <table {...props}>{children}</table>
+      </div>
+    ),
+    input: ({ type, checked, ...props }) => {
+      if (type !== 'checkbox') {
+        return <input {...props} type={type} />;
+      }
+      return (
+        <input
+          {...props}
+          type="checkbox"
+          checked={checked}
+          readOnly
+          disabled
+          className="chat-task-checkbox"
+        />
+      );
+    },
+    img: ({ src, alt, ...props }) => {
+      const safeSrc = resolveSafeHref(src);
+      if (!safeSrc) {
+        return null;
+      }
+      return <img {...props} src={safeSrc} alt={alt || ''} loading="lazy" decoding="async" />;
+    },
+    code: ({ inline, className, children, ...props }) => {
+      if (inline) {
+        return (
+          <code {...props} className={cn('chat-inline-code', className)}>
+            {children}
+          </code>
+        );
+      }
+      return <MarkdownCodeBlock className={className}>{children}</MarkdownCodeBlock>;
+    }
+  }), []);
+
   return (
     <div className={cn('chat-markdown', isUser ? 'chat-markdown-user' : 'chat-markdown-assistant')}>
       <ReactMarkdown
+        skipHtml
         remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeSanitize]}
-        components={{
-          a: ({ ...props }) => (
-            <a {...props} target="_blank" rel="noreferrer noopener" />
-          )
-        }}
+        components={markdownComponents}
       >
         {trimMarkdown(text)}
       </ReactMarkdown>