feat(ui): restyle workspace shell and conversation header

apps/ui/src/App.tsx

@@ -329,24 +329,43 @@ function LobsterClawIcon() {
   return (
     <svg viewBox="0 0 64 64" aria-hidden="true" focusable="false">
       <defs>
-        <linearGradient id="lobster-claw-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="#ff9a6b" />
-          <stop offset="100%" stopColor="#ff7b76" />
+        <linearGradient id="lobster-claw-orb" x1="14%" y1="12%" x2="86%" y2="88%">
+          <stop offset="0%" stopColor="#eefaff" />
+          <stop offset="52%" stopColor="#a7dcff" />
+          <stop offset="100%" stopColor="#4c9dff" />
+        </linearGradient>
+        <linearGradient id="lobster-claw-gradient" x1="12%" y1="12%" x2="88%" y2="90%">
+          <stop offset="0%" stopColor="#f9fdff" />
+          <stop offset="30%" stopColor="#87d2ff" />
+          <stop offset="100%" stopColor="#1f7cf0" />
+        </linearGradient>
+        <linearGradient id="lobster-claw-line" x1="18%" y1="18%" x2="78%" y2="82%">
+          <stop offset="0%" stopColor="#ffffff" />
+          <stop offset="100%" stopColor="#0e63c3" />
         </linearGradient>
       </defs>
+      <circle cx="32" cy="32" r="26.5" fill="url(#lobster-claw-orb)" />
+      <circle cx="32" cy="32" r="26.5" fill="none" stroke="rgba(255,255,255,0.9)" strokeWidth="1.5" />
       <path
-        d="M14 42c0-7.8 6.3-14 14-14h3.5c2.2 0 4.3.8 5.9 2.2L50 42.8c1 .9 1.1 2.4.2 3.4l-3.2 3.7a2.4 2.4 0 0 1-3.4.2L31 39.5H28c-1.9 0-3.5 1.6-3.5 3.5v4.2c0 1.3-1.1 2.3-2.3 2.3H16.3c-1.3 0-2.3-1-2.3-2.3V42Z"
+        d="M15.8 22.5C20 16.8 26.7 13.3 34 13.3c4.7 0 9.1 1.4 12.9 4.1"
+        fill="none"
+        stroke="rgba(255,255,255,0.62)"
+        strokeLinecap="round"
+        strokeWidth="1.8"
+      />
+      <path
+        d="M14 42.4c0-7.7 6.2-13.8 13.9-13.8h3.4c2.2 0 4.3.8 5.9 2.3l12.5 11.7c1 .9 1 2.4.1 3.4l-3.1 3.5a2.4 2.4 0 0 1-3.4.2L30.9 39.2H28c-2 0-3.6 1.6-3.6 3.5v4.5c0 1.3-1 2.3-2.3 2.3h-5.8c-1.3 0-2.3-1-2.3-2.3v-4.8Z"
         fill="url(#lobster-claw-gradient)"
       />
       <path
-        d="M38 16.5c6.7 0 12.3 5.1 13 11.8l.1 1.4-5.9-.1c-5.6 0-10.6-3.3-12.7-8.4l-1.2-2.8 2.9-.9c1.3-.4 2.5-.7 3.8-.9Zm-3.6 14.1c3.7 0 7.2 1.5 9.7 4.2l1.1 1.2-5.3 2.7a13.9 13.9 0 0 1-17.6-4.6l-1.8-2.5 2.6-.9c3.6-1.3 7.5-2 11.3-2Z"
-        fill="#fff3eb"
-        opacity="0.95"
+        d="M37.7 16.2c6.6 0 12.2 5.2 13 11.8l.1 1.3-6-.1c-5.7 0-10.7-3.3-12.8-8.5L30.8 18l2.9-.8c1.2-.4 2.5-.7 4-.9Zm-3.3 14.5c3.7 0 7.1 1.5 9.6 4.1l1 1.1-5.1 2.7a13.8 13.8 0 0 1-17.6-4.5l-1.9-2.5 2.6-.9c3.6-1.3 7.4-2 11.4-2Z"
+        fill="#f8fdff"
+        opacity="0.98"
       />
       <path
-        d="M31.3 22.8c2.2 5.4 7.5 8.9 13.3 8.9h6.5M22.1 32.7c3 3.9 7.6 6.2 12.5 6.2 2.2 0 4.4-.4 6.5-1.3"
+        d="M31.3 22.8c2.2 5.4 7.5 8.9 13.3 8.9h6.4M22.2 32.7c3 3.8 7.6 6.2 12.4 6.2 2.2 0 4.4-.4 6.5-1.3"
         fill="none"
-        stroke="#c85650"
+        stroke="url(#lobster-claw-line)"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2.2"
@@ -2400,8 +2419,6 @@ export default function App() {
   })));
   const workspaceStatusTone = getWorkspaceStatusTone(chatLaunchState, isBound);
   const workspaceStatusLabel = getWorkspaceStatusLabel(chatLaunchState, isBound);
-  const pageTitle = viewMode === "plugins" ? ui.plugins : viewMode === "knowledge" ? ui.knowledge : ui.settings;
-  const pageDesc = viewMode === "plugins" ? ui.pluginsPageDesc : viewMode === "knowledge" ? ui.knowledgePageDesc : ui.settingsDesc;
   useEffect(() => {
     if (!infoText) {
       return;
@@ -4561,12 +4578,19 @@ export default function App() {
     </span>
   ) : null;
   const conversationPanelLead = viewMode === "chat" ? (
-    <div className="home-microcopy" aria-label="start your idea">
-      <span className="home-microcopy-icon">
-        <LobsterClawIcon />
+    <div className="home-microcopy" aria-label="current conversation">
+      <span className="home-microcopy-icon-shell" aria-hidden="true">
+        <span className="home-microcopy-icon">
+          <LobsterClawIcon />
+        </span>
+        <span className="home-microcopy-icon-beam" />
+      </span>
+      <span className="home-microcopy-body">
+        <span className="home-microcopy-text">当前对话</span>
+      </span>
+      <span className={"home-microcopy-tag" + (selectedSkillId === DEFAULT_SKILL.id ? " brand" : "")}>
+        {selectedSkillBadge}
       </span>
-      <span className="home-microcopy-text">当前对话</span>
-      <span className="home-microcopy-tag">{selectedSkillBadge}</span>
     </div>
   ) : (
     <div className="conversation-panel-kicker expert-hero-kicker">
@@ -5131,19 +5155,6 @@ export default function App() {
         </div>
       </aside>
       <div className={"main-shell" + (isConversationView ? " conversation-main-layout" : "") + (viewMode === "settings" ? " settings-main-shell" : "")}>
-        {viewMode === "plugins" ? (
-          <div className="page-topbar">
-            <div className="page-copy">
-              <h2>{pageTitle}</h2>
-              <p>{pageDesc}</p>
-            </div>
-            <div className="page-drag-strip" aria-hidden="true" />
-            <div className="header-actions">
-              <StatusChip tone={workspaceStatusTone}>{workspaceStatusLabel}</StatusChip>
-              {isMockDesktopApi ? <StatusChip tone="warning">Mock API</StatusChip> : null}
-            </div>
-          </div>
-        ) : null}
         {infoText ? <div className="notice toast-notice">{infoText}</div> : null}
         {errorText ? <div className="notice error">{errorText}</div> : null}
         <main className={"content-area" + (isConversationView ? " conversation-content-area" : "")}>