diff --git a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
index 50bf185d..c228a625 100644
--- a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
+++ b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
@@ -22,6 +22,7 @@ import {
   GalleryZone,
 } from '@/app/components';
 import AgentCard from './components/AgentCard';
+import CoreAgentCard, { type CoreAgentMeta } from './components/CoreAgentCard';
 import AgentTeamCard from './components/AgentTeamCard';
 import AgentTeamTabBar from './components/AgentTeamTabBar';
 import AgentGallery from './components/AgentGallery';
@@ -44,6 +45,14 @@ import './AgentsScene.scss';
 
 const EXAMPLE_TEAM_IDS = new Set(MOCK_AGENT_TEAMS.map((team) => team.id));
 
+const CORE_AGENT_IDS = new Set(['Claw', 'agentic', 'Cowork']);
+
+const CORE_AGENT_META: Record<string, CoreAgentMeta> = {
+  Claw:    { role: '个人助理',       accentColor: '#f59e0b', accentBg: 'rgba(245,158,11,0.10)' },
+  agentic: { role: '编码专业智能体', accentColor: '#6366f1', accentBg: 'rgba(99,102,241,0.10)' },
+  Cowork:  { role: '办公智能体',     accentColor: '#14b8a6', accentBg: 'rgba(20,184,166,0.10)' },
+};
+
 const AgentTeamEditorView: React.FC = () => {
   const { t } = useTranslation('scenes/agents');
   const { openHome } = useAgentsStore();
@@ -121,6 +130,8 @@ const AgentsHomeView: React.FC = () => {
     return team.name.toLowerCase().includes(query) || team.description.toLowerCase().includes(query);
   }), [agentTeams, searchQuery]);
 
+  const coreAgents = useMemo(() => allAgents.filter((agent) => CORE_AGENT_IDS.has(agent.id)), [allAgents]);
+
   const handleCreateTeam = useCallback(() => {
     const id = `agent-team-${Date.now()}`;
     addAgentTeam({
@@ -214,6 +225,13 @@ const AgentsHomeView: React.FC = () => {
         subtitle={t('page.subtitle')}
         extraContent={(
           <div className="gallery-anchor-bar">
+            <button
+              type="button"
+              className="gallery-anchor-btn"
+              onClick={() => scrollToZone('core-agents-zone')}
+            >
+              {t('nav.coreAgents')}
+            </button>
             <button
               type="button"
               className="gallery-anchor-btn"
@@ -267,6 +285,37 @@ const AgentsHomeView: React.FC = () => {
       />
 
       <div className="gallery-zones">
+        <GalleryZone
+          id="core-agents-zone"
+          title={t('coreAgentsZone.title')}
+          subtitle={t('coreAgentsZone.subtitle')}
+          tools={(
+            <span className="gallery-zone-count">{coreAgents.length}</span>
+          )}
+        >
+          {loading ? (
+            <GallerySkeleton count={3} cardHeight={160} className="core-agent-skeleton" />
+          ) : coreAgents.length === 0 ? (
+            <GalleryEmpty
+              icon={<Cpu size={32} strokeWidth={1.5} />}
+              message={t('coreAgentsZone.empty')}
+            />
+          ) : (
+            <div className="core-agents-grid">
+              {coreAgents.map((agent, index) => (
+                <CoreAgentCard
+                  key={agent.id}
+                  agent={agent}
+                  index={index}
+                  meta={CORE_AGENT_META[agent.id] ?? { role: agent.name, accentColor: '#6366f1', accentBg: 'rgba(99,102,241,0.10)' }}
+                  skillCount={agent.agentKind === 'mode' ? (getModeConfig(agent.id)?.available_skills?.length ?? 0) : 0}
+                  onOpenDetails={openAgentDetails}
+                />
+              ))}
+            </div>
+          )}
+        </GalleryZone>
+
         <GalleryZone
           id="agents-zone"
           title={t('agentsZone.title')}
diff --git a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss
new file mode 100644
index 00000000..51b5c9d6
--- /dev/null
+++ b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss
@@ -0,0 +1,213 @@
+@use '../../../../component-library/styles/tokens' as *;
+
+.core-agent-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: $size-radius-xl;
+  background: var(--element-bg-soft);
+  border: 1px solid transparent;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  animation: core-card-in 0.28s $easing-decelerate both;
+  animation-delay: calc(var(--card-index, 0) * 60ms);
+  transition:
+    background $motion-fast $easing-standard,
+    border-color $motion-fast $easing-standard,
+    box-shadow $motion-fast $easing-standard,
+    transform $motion-fast $easing-standard;
+
+  // Subtle top accent glow
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(
+      ellipse 80% 40% at 50% 0%,
+      color-mix(in srgb, var(--core-accent, var(--color-accent-500)) 10%, transparent) 0%,
+      transparent 70%
+    );
+    pointer-events: none;
+  }
+
+  &:hover {
+    background: var(--element-bg-medium);
+    border-color: color-mix(in srgb, var(--core-accent, var(--color-accent-500)) 30%, transparent);
+    transform: translateY(-2px);
+    box-shadow:
+      0 8px 24px rgba(0, 0, 0, 0.14),
+      0 0 0 1px color-mix(in srgb, var(--core-accent, var(--color-accent-500)) 20%, transparent);
+
+    .core-agent-card__icon-wrap {
+      transform: scale(1.08);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--core-accent, var(--color-accent-500));
+    outline-offset: 2px;
+  }
+
+  &--disabled {
+    .core-agent-card__name,
+    .core-agent-card__desc,
+    .core-agent-card__footer {
+      opacity: 0.65;
+    }
+  }
+
+  // ── Top section ──────────────────────────────────────────────────
+
+  &__top {
+    display: flex;
+    align-items: center;
+    gap: $size-gap-3;
+    padding: $size-gap-4 $size-gap-4 $size-gap-3 $size-gap-4;
+    background: var(--core-accent-bg, rgba(99, 102, 241, 0.08));
+    border-bottom: 1px solid color-mix(in srgb, var(--core-accent, var(--color-accent-500)) 15%, transparent);
+  }
+
+  &__icon-wrap {
+    flex-shrink: 0;
+    width: 44px;
+    height: 44px;
+    border-radius: $size-radius-lg;
+    background: color-mix(in srgb, var(--core-accent, var(--color-accent-500)) 18%, var(--element-bg-soft));
+    border: 1px solid color-mix(in srgb, var(--core-accent, var(--color-accent-500)) 30%, transparent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--core-accent, var(--color-accent-500));
+    transition: transform $motion-fast $easing-decelerate;
+  }
+
+  &__top-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__name {
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+    color: var(--color-text-primary);
+    line-height: $line-height-tight;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__role {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    color: var(--core-accent, var(--color-accent-500));
+    opacity: 0.9;
+  }
+
+  // ── Body ─────────────────────────────────────────────────────────
+
+  &__body {
+    flex: 1;
+    padding: $size-gap-3 $size-gap-4 $size-gap-2 $size-gap-4;
+  }
+
+  &__desc {
+    margin: 0;
+    font-size: $font-size-xs;
+    color: var(--color-text-secondary);
+    line-height: $line-height-relaxed;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-word;
+  }
+
+  // ── Footer ───────────────────────────────────────────────────────
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: $size-gap-2;
+    padding: $size-gap-2 $size-gap-4 $size-gap-3 $size-gap-4;
+    border-top: 1px dashed color-mix(in srgb, var(--core-accent, var(--color-accent-500)) 18%, var(--border-subtle));
+  }
+
+  &__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 10px;
+    color: var(--color-text-muted);
+
+    strong {
+      font-weight: $font-weight-semibold;
+      color: var(--core-accent, var(--color-accent-500));
+      opacity: 0.9;
+    }
+  }
+
+  &__meta {
+    display: inline-flex;
+    align-items: center;
+    gap: $size-gap-2;
+  }
+
+  &__meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 10px;
+    color: var(--color-text-muted);
+  }
+}
+
+// ── Grid wrapper (3-col max for core section) ─────────────────────
+
+.core-agents-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: $size-gap-4;
+  width: 100%;
+}
+
+// ── Animation ─────────────────────────────────────────────────────
+
+@keyframes core-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(14px) scale(0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .core-agent-card {
+    animation: none;
+    transition: none;
+  }
+}
+
+// ── Responsive ────────────────────────────────────────────────────
+
+@media (max-width: 1080px) {
+  .core-agents-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .core-agents-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
new file mode 100644
index 00000000..de6be029
--- /dev/null
+++ b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import {
+  Bot,
+  Wrench,
+  Puzzle,
+  Cpu,
+  Sparkles,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import type { AgentWithCapabilities } from '../agentsStore';
+import { AGENT_ICON_MAP } from '../agentsIcons';
+import './CoreAgentCard.scss';
+
+export interface CoreAgentMeta {
+  role: string;
+  accentColor: string;
+  accentBg: string;
+}
+
+interface CoreAgentCardProps {
+  agent: AgentWithCapabilities;
+  index?: number;
+  meta: CoreAgentMeta;
+  skillCount?: number;
+  onOpenDetails: (agent: AgentWithCapabilities) => void;
+}
+
+const CoreAgentCard: React.FC<CoreAgentCardProps> = ({
+  agent,
+  index = 0,
+  meta,
+  skillCount = 0,
+  onOpenDetails,
+}) => {
+  const { t } = useTranslation('scenes/agents');
+  const Icon = AGENT_ICON_MAP[(agent.iconKey ?? 'bot') as keyof typeof AGENT_ICON_MAP] ?? Bot;
+  const totalTools = agent.toolCount ?? agent.defaultTools?.length ?? 0;
+  const openDetails = () => onOpenDetails(agent);
+
+  return (
+    <div
+      className={[
+        'core-agent-card',
+        !agent.enabled && 'core-agent-card--disabled',
+      ].filter(Boolean).join(' ')}
+      style={{
+        '--card-index': index,
+        '--core-accent': meta.accentColor,
+        '--core-accent-bg': meta.accentBg,
+      } as React.CSSProperties}
+      onClick={openDetails}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => e.key === 'Enter' && openDetails()}
+      aria-label={agent.name}
+    >
+      <div className="core-agent-card__top">
+        <div className="core-agent-card__icon-wrap">
+          <Icon size={28} strokeWidth={1.6} />
+        </div>
+        <div className="core-agent-card__top-info">
+          <span className="core-agent-card__name">{agent.name}</span>
+          <span className="core-agent-card__role">
+            <Sparkles size={10} strokeWidth={2} />
+            {meta.role}
+          </span>
+        </div>
+      </div>
+
+      <div className="core-agent-card__body">
+        <p className="core-agent-card__desc">
+          {agent.description?.trim() || '—'}
+        </p>
+      </div>
+
+      <div className="core-agent-card__footer">
+        <span className="core-agent-card__tag">
+          {t('coreAgentsZone.roleLabel')}
+          <strong>{meta.role}</strong>
+        </span>
+        <div className="core-agent-card__meta">
+          <span className="core-agent-card__meta-item">
+            <Wrench size={11} />
+            {totalTools}
+          </span>
+          {agent.agentKind === 'mode' && skillCount > 0 ? (
+            <span className="core-agent-card__meta-item">
+              <Puzzle size={11} />
+              {skillCount}
+            </span>
+          ) : null}
+          <span className="core-agent-card__meta-item">
+            <Cpu size={11} />
+            {agent.model ?? 'primary'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CoreAgentCard;
diff --git a/src/web-ui/src/app/scenes/settings/settingsConfig.ts b/src/web-ui/src/app/scenes/settings/settingsConfig.ts
index ae339b63..b215acc9 100644
--- a/src/web-ui/src/app/scenes/settings/settingsConfig.ts
+++ b/src/web-ui/src/app/scenes/settings/settingsConfig.ts
@@ -53,7 +53,7 @@ export const SETTINGS_CATEGORIES: ConfigCategoryDef[] = [
     nameKey: 'configCenter.categories.devkit',
     tabs: [
       { id: 'editor',  labelKey: 'configCenter.tabs.editor'  },
-      { id: 'lsp',     labelKey: 'configCenter.tabs.lsp'     },
+      // { id: 'lsp',     labelKey: 'configCenter.tabs.lsp'     },
       { id: 'debug',   labelKey: 'configCenter.tabs.debug'   },
       { id: 'terminal',labelKey: 'configCenter.tabs.terminal'},
       { id: 'logging', labelKey: 'configCenter.tabs.logging' },
diff --git a/src/web-ui/src/app/scenes/skills/SkillsScene.scss b/src/web-ui/src/app/scenes/skills/SkillsScene.scss
index 6dc7b62f..57eb3364 100644
--- a/src/web-ui/src/app/scenes/skills/SkillsScene.scss
+++ b/src/web-ui/src/app/scenes/skills/SkillsScene.scss
@@ -162,6 +162,22 @@
     font-size: $font-size-sm;
     color: var(--color-text-secondary);
   }
+
+  &__modal-form {
+    display: flex;
+    flex-direction: column;
+    gap: $size-gap-4;
+    padding: $size-gap-5 $size-gap-5 $size-gap-4;
+  }
+
+  &__modal-form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: $size-gap-2;
+    margin-top: $size-gap-1;
+    padding-top: $size-gap-3;
+    border-top: 1px solid var(--border-subtle);
+  }
 }
 
 @media (max-width: 720px) {
diff --git a/src/web-ui/src/app/scenes/skills/SkillsScene.tsx b/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
index b80cee19..869ce649 100644
--- a/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
+++ b/src/web-ui/src/app/scenes/skills/SkillsScene.tsx
@@ -15,10 +15,9 @@ import {
   Store,
   Trash2,
   TrendingUp,
-  X,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Badge, Button, ConfirmDialog, Input, Search, Select } from '@/component-library';
+import { Badge, Button, ConfirmDialog, Input, Modal, Search, Select } from '@/component-library';
 import {
   GalleryDetailModal,
   GalleryEmpty,
@@ -244,116 +243,6 @@ const SkillsScene: React.FC = () => {
             </>
           )}
         >
-          {isAddFormOpen ? (
-            <div className="bitfun-collection-form bitfun-skills-scene__form-card">
-              <div className="bitfun-collection-form__header">
-                <h3>{t('form.title')}</h3>
-                <button
-                  type="button"
-                  className="gallery-plain-icon-btn"
-                  onClick={() => {
-                    installed.resetForm();
-                    setAddFormOpen(false);
-                  }}
-                  aria-label={t('form.closeTooltip')}
-                >
-                  <X size={14} />
-                </button>
-              </div>
-              <div className="bitfun-collection-form__body">
-                <Select
-                  label={t('form.level.label')}
-                  options={[
-                    { label: t('form.level.user'), value: 'user' },
-                    {
-                      label: `${t('form.level.project')}${installed.hasWorkspace ? '' : t('form.level.projectDisabled')}`,
-                      value: 'project',
-                      disabled: !installed.hasWorkspace,
-                    },
-                  ]}
-                  value={installed.formLevel}
-                  onChange={(value) => installed.setFormLevel(value as SkillLevel)}
-                  size="medium"
-                />
-
-                {installed.formLevel === 'project' && installed.hasWorkspace ? (
-                  <div className="bitfun-skills-scene__form-hint">
-                    {t('form.level.currentWorkspace', { path: installed.workspacePath })}
-                  </div>
-                ) : null}
-
-                <div className="bitfun-skills-scene__path-input">
-                  <Input
-                    label={t('form.path.label')}
-                    placeholder={t('form.path.placeholder')}
-                    value={installed.formPath}
-                    onChange={(e) => installed.setFormPath(e.target.value)}
-                    variant="outlined"
-                  />
-                  <button
-                    type="button"
-                    className="gallery-action-btn"
-                    onClick={installed.handleBrowse}
-                    aria-label={t('form.path.browseTooltip')}
-                  >
-                    <FolderOpen size={15} />
-                  </button>
-                </div>
-                <div className="bitfun-skills-scene__path-hint">
-                  {t('form.path.hint')}
-                </div>
-
-                {installed.isValidating ? (
-                  <div className="bitfun-skills-scene__validating">{t('form.validating')}</div>
-                ) : null}
-
-                {installed.validationResult ? (
-                  <div
-                    className={[
-                      'bitfun-skills-scene__validation',
-                      installed.validationResult.valid ? 'is-valid' : 'is-invalid',
-                    ].filter(Boolean).join(' ')}
-                  >
-                    {installed.validationResult.valid ? (
-                      <>
-                        <div className="bitfun-skills-scene__validation-name">
-                          {installed.validationResult.name}
-                        </div>
-                        <div className="bitfun-skills-scene__validation-desc">
-                          {installed.validationResult.description}
-                        </div>
-                      </>
-                    ) : (
-                      <div className="bitfun-skills-scene__validation-error">
-                        {installed.validationResult.error}
-                      </div>
-                    )}
-                  </div>
-                ) : null}
-              </div>
-              <div className="bitfun-collection-form__footer">
-                <Button
-                  variant="secondary"
-                  size="small"
-                  onClick={() => {
-                    installed.resetForm();
-                    setAddFormOpen(false);
-                  }}
-                >
-                  {t('form.actions.cancel')}
-                </Button>
-                <Button
-                  variant="primary"
-                  size="small"
-                  onClick={handleAddSkill}
-                  disabled={!installed.validationResult?.valid || installed.isAdding}
-                >
-                  {installed.isAdding ? t('form.actions.adding') : t('form.actions.add')}
-                </Button>
-              </div>
-            </div>
-          ) : null}
-
           {installed.loading ? <GallerySkeleton /> : null}
 
           {!installed.loading && installed.error ? (
@@ -548,6 +437,109 @@ const SkillsScene: React.FC = () => {
         ) : null}
       </GalleryDetailModal>
 
+      <Modal
+        isOpen={isAddFormOpen}
+        onClose={() => {
+          installed.resetForm();
+          setAddFormOpen(false);
+        }}
+        title={t('form.title')}
+        size="small"
+      >
+        <div className="bitfun-skills-scene__modal-form">
+          <Select
+            label={t('form.level.label')}
+            options={[
+              { label: t('form.level.user'), value: 'user' },
+              {
+                label: `${t('form.level.project')}${installed.hasWorkspace ? '' : t('form.level.projectDisabled')}`,
+                value: 'project',
+                disabled: !installed.hasWorkspace,
+              },
+            ]}
+            value={installed.formLevel}
+            onChange={(value) => installed.setFormLevel(value as SkillLevel)}
+            size="medium"
+          />
+
+          {installed.formLevel === 'project' && installed.hasWorkspace ? (
+            <div className="bitfun-skills-scene__form-hint">
+              {t('form.level.currentWorkspace', { path: installed.workspacePath })}
+            </div>
+          ) : null}
+
+          <div className="bitfun-skills-scene__path-input">
+            <Input
+              label={t('form.path.label')}
+              placeholder={t('form.path.placeholder')}
+              value={installed.formPath}
+              onChange={(e) => installed.setFormPath(e.target.value)}
+              variant="outlined"
+            />
+            <button
+              type="button"
+              className="gallery-action-btn"
+              onClick={installed.handleBrowse}
+              aria-label={t('form.path.browseTooltip')}
+            >
+              <FolderOpen size={15} />
+            </button>
+          </div>
+          <div className="bitfun-skills-scene__path-hint">
+            {t('form.path.hint')}
+          </div>
+
+          {installed.isValidating ? (
+            <div className="bitfun-skills-scene__validating">{t('form.validating')}</div>
+          ) : null}
+
+          {installed.validationResult ? (
+            <div
+              className={[
+                'bitfun-skills-scene__validation',
+                installed.validationResult.valid ? 'is-valid' : 'is-invalid',
+              ].filter(Boolean).join(' ')}
+            >
+              {installed.validationResult.valid ? (
+                <>
+                  <div className="bitfun-skills-scene__validation-name">
+                    {installed.validationResult.name}
+                  </div>
+                  <div className="bitfun-skills-scene__validation-desc">
+                    {installed.validationResult.description}
+                  </div>
+                </>
+              ) : (
+                <div className="bitfun-skills-scene__validation-error">
+                  {installed.validationResult.error}
+                </div>
+              )}
+            </div>
+          ) : null}
+
+          <div className="bitfun-skills-scene__modal-form-actions">
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={() => {
+                installed.resetForm();
+                setAddFormOpen(false);
+              }}
+            >
+              {t('form.actions.cancel')}
+            </Button>
+            <Button
+              variant="primary"
+              size="small"
+              onClick={handleAddSkill}
+              disabled={!installed.validationResult?.valid || installed.isAdding}
+            >
+              {installed.isAdding ? t('form.actions.adding') : t('form.actions.add')}
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
       <ConfirmDialog
         isOpen={Boolean(deleteTarget)}
         onClose={() => setDeleteTarget(null)}
diff --git a/src/web-ui/src/component-library/components/Markdown/Markdown.scss b/src/web-ui/src/component-library/components/Markdown/Markdown.scss
index 645e75ee..a72c9032 100644
--- a/src/web-ui/src/component-library/components/Markdown/Markdown.scss
+++ b/src/web-ui/src/component-library/components/Markdown/Markdown.scss
@@ -259,7 +259,8 @@
 
 .markdown-renderer .copy-button {
   position: absolute;
-  top: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
   right: 0.75rem;
   padding: 0.5rem;
   background: transparent;
@@ -267,7 +268,7 @@
   border-radius: 6px;
   color: rgba(255, 255, 255, 0.5);
   cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -289,11 +290,11 @@
 .markdown-renderer .copy-button:hover {
   background: transparent;
   color: #3b82f6;
-  transform: scale(1.1);
+  transform: translateY(-50%) scale(1.1);
 }
 
 .markdown-renderer .copy-button:active {
-  transform: scale(1);
+  transform: translateY(-50%) scale(1);
   color: #2563eb;
 }
 
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.scss b/src/web-ui/src/flow_chat/components/ChatInput.scss
index ca68401b..6f27997d 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.scss
+++ b/src/web-ui/src/flow_chat/components/ChatInput.scss
@@ -70,27 +70,54 @@
       max-height: 42px;
       padding: 0 18px;
       border-radius: 999px;
-      background: var(--color-bg-tertiary);
-      border: none;
+      background: rgba(18, 18, 28, 0.22);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
       box-shadow: 
-        0 2px 8px rgba(0, 0, 0, 0.12),
-        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
-        inset 0 1px 0 rgba(255, 255, 255, 0.04);
+        0 2px 8px rgba(0, 0, 0, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.06);
       flex-direction: row;
       align-items: center;
       gap: 8px;
       
       &:hover {
-        background: var(--color-bg-elevated);
-        border: 1px solid rgba(100, 150, 255, 0.25);
+        background: rgba(25, 25, 40, 0.38);
+        border: 1px solid rgba(100, 150, 255, 0.2);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
         box-shadow: 
-          0 6px 20px rgba(0, 0, 0, 0.35),
-          0 0 15px rgba(100, 140, 255, 0.1),
-          inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          0 4px 16px rgba(0, 0, 0, 0.18),
+          inset 0 1px 0 rgba(255, 255, 255, 0.08);
         transform: translateY(-2px);
       }
     }
     
+    // Light theme overrides for the collapsed capsule
+    :root[data-theme="light"] &,
+    :root[data-theme-type="light"] &,
+    .light & {
+      .bitfun-chat-input__box {
+        background: rgba(255, 255, 255, 0.28);
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        box-shadow:
+          0 2px 8px rgba(0, 0, 0, 0.06),
+          inset 0 1px 0 rgba(255, 255, 255, 0.8);
+        
+        &:hover {
+          background: rgba(255, 255, 255, 0.45);
+          border: 1px solid rgba(80, 120, 255, 0.18);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          box-shadow:
+            0 4px 16px rgba(0, 0, 0, 0.08),
+            inset 0 1px 0 rgba(255, 255, 255, 0.9);
+        }
+      }
+    }
+    
     .bitfun-chat-input__expand-button,
     .bitfun-chat-input__template-hint,
     .bitfun-chat-input__cowork-examples,
diff --git a/src/web-ui/src/locales/en-US/flow-chat.json b/src/web-ui/src/locales/en-US/flow-chat.json
index ad1a595b..e0c93658 100644
--- a/src/web-ui/src/locales/en-US/flow-chat.json
+++ b/src/web-ui/src/locales/en-US/flow-chat.json
@@ -122,7 +122,7 @@
     "willSendAfterStop": "Will send after stop",
     "openWorkspaceFolder": "Open workspace folder",
     "openWorkspaceFolderFailed": "Failed to open workspace folder: {{error}}",
-    "spaceToActivate": "Press <space>Space</space> to tell me what you'd like to do"
+    "spaceToActivate": "Press <space>Space</space> to type"
   },
   "context": {
     "title": "Context",
diff --git a/src/web-ui/src/locales/en-US/scenes/agents.json b/src/web-ui/src/locales/en-US/scenes/agents.json
index 91c448eb..86adc4ef 100644
--- a/src/web-ui/src/locales/en-US/scenes/agents.json
+++ b/src/web-ui/src/locales/en-US/scenes/agents.json
@@ -15,6 +15,7 @@
     "refresh": "Refresh"
   },
   "nav": {
+    "coreAgents": "Core Agents",
     "agents": "Agent",
     "teams": "Agent Team"
   },
@@ -115,6 +116,12 @@
     "strategySeq": "Sequential",
     "strategyFree": "Free"
   },
+  "coreAgentsZone": {
+    "title": "Core Agents",
+    "subtitle": "Built-in core agent modes covering mainstream AI workflows, ready to use out of the box.",
+    "empty": "No core agents detected",
+    "roleLabel": "Primary Use · "
+  },
   "agentsZone": {
     "title": "Agents Overview",
     "subtitle": "Browse all agents and sub-agents, then manage solo usage, tools, and skills directly.",
diff --git a/src/web-ui/src/locales/zh-CN/flow-chat.json b/src/web-ui/src/locales/zh-CN/flow-chat.json
index e2a0fff7..6aa94427 100644
--- a/src/web-ui/src/locales/zh-CN/flow-chat.json
+++ b/src/web-ui/src/locales/zh-CN/flow-chat.json
@@ -122,7 +122,7 @@
     "willSendAfterStop": "将在停止后发送",
     "openWorkspaceFolder": "打开工作区文件夹",
     "openWorkspaceFolderFailed": "打开工作区文件夹失败：{{error}}",
-    "spaceToActivate": "按<space>空格键</space>说说你想做什么"
+    "spaceToActivate": "按<space>空格键</space>快速键入"
   },
   "context": {
     "title": "上下文",
diff --git a/src/web-ui/src/locales/zh-CN/scenes/agents.json b/src/web-ui/src/locales/zh-CN/scenes/agents.json
index 2c8b451a..40af342a 100644
--- a/src/web-ui/src/locales/zh-CN/scenes/agents.json
+++ b/src/web-ui/src/locales/zh-CN/scenes/agents.json
@@ -15,6 +15,7 @@
     "refresh": "刷新"
   },
   "nav": {
+    "coreAgents": "核心智能体",
     "agents": "Agent",
     "teams": "Agent Team"
   },
@@ -115,6 +116,12 @@
     "strategySeq": "顺序",
     "strategyFree": "自由"
   },
+  "coreAgentsZone": {
+    "title": "核心智能体",
+    "subtitle": "平台内置的核心 Agent 模式，覆盖主流 AI 工作流，开箱即用。",
+    "empty": "暂未检测到核心智能体",
+    "roleLabel": "主要应用 · "
+  },
   "agentsZone": {
     "title": "Agent 总览",
     "subtitle": "查看所有 Agent / Sub-Agent，并直接管理独立启用、工具与 Skills。",