From 745f6f07db74b313cd584efc63c6fbc786257a43 Mon Sep 17 00:00:00 2001
From: shihao <3127647737@qq.com>
Date: Wed, 22 Apr 2026 11:34:25 +0800
Subject: [PATCH] feat: redesign user workspace console

---
 .../src/app/(dashboard)/profile/page.tsx      |  56 +-
 .../app/(dashboard)/workspace/assets/page.tsx | 325 ++++--
 .../app/(dashboard)/workspace/create/page.tsx | 978 +++++++++++++++---
 frontend-web/src/app/globals.css              | 855 +++++++++++++--
 frontend-web/src/app/layout.tsx               |  14 +-
 frontend-web/src/components/site-shell.tsx    | 103 +-
 frontend-web/src/components/status-badge.tsx  |  17 +-
 7 files changed, 2017 insertions(+), 331 deletions(-)

diff --git a/frontend-web/src/app/(dashboard)/profile/page.tsx b/frontend-web/src/app/(dashboard)/profile/page.tsx
index 2081444..9262ede 100644
--- a/frontend-web/src/app/(dashboard)/profile/page.tsx
+++ b/frontend-web/src/app/(dashboard)/profile/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { api } from "@/lib/api";
 import type { UserProfile } from "@/lib/types";
@@ -12,29 +12,25 @@ export default function ProfilePage() {
     queryFn: () => api.get<UserProfile>("/api/v1/profile"),
   });
   const [form, setForm] = useState({
-    username: "",
-    nickname: "",
-    avatarUrl: "",
+    username: undefined as string | undefined,
+    nickname: undefined as string | undefined,
   });
-
-  useEffect(() => {
-    if (profileQuery.data) {
-      setForm({
-        username: profileQuery.data.username,
-        nickname: profileQuery.data.nickname,
-        avatarUrl: profileQuery.data.avatarUrl,
-      });
-    }
-  }, [profileQuery.data]);
+  const username = form.username ?? profileQuery.data?.username ?? "";
+  const nickname = form.nickname ?? profileQuery.data?.nickname ?? "";
 
   const mutation = useMutation({
     mutationFn: () =>
       api.put("/api/v1/profile", {
-        username: form.username,
-        nickname: form.nickname,
-        avatar_url: form.avatarUrl,
+        username,
+        nickname,
       }),
-    onSuccess: () => profileQuery.refetch(),
+    onSuccess: () => {
+      setForm({
+        username: undefined,
+        nickname: undefined,
+      });
+      void profileQuery.refetch();
+    },
   });
 
   return (
@@ -45,7 +41,7 @@ export default function ProfilePage() {
           <label className="field-label">
             用户名
             <input
-              value={form.username}
+              value={username}
               onChange={(event) =>
                 setForm((previous) => ({ ...previous, username: event.target.value }))
               }
@@ -54,21 +50,12 @@ export default function ProfilePage() {
           <label className="field-label">
             昵称
             <input
-              value={form.nickname}
+              value={nickname}
               onChange={(event) =>
                 setForm((previous) => ({ ...previous, nickname: event.target.value }))
               }
             />
           </label>
-          <label className="field-label">
-            头像 URL
-            <input
-              value={form.avatarUrl}
-              onChange={(event) =>
-                setForm((previous) => ({ ...previous, avatarUrl: event.target.value }))
-              }
-            />
-          </label>
           <button className="primary-button" onClick={() => mutation.mutate()}>
             保存资料
           </button>
@@ -78,6 +65,17 @@ export default function ProfilePage() {
       <section className="panel">
         <h3>账户概览</h3>
         <div className="list-grid">
+          <div className="list-item profile-overview-card">
+            <div className="profile-avatar profile-avatar-large">
+              {(profileQuery.data?.nickname || profileQuery.data?.username || "AI")
+                .slice(0, 2)
+                .toUpperCase()}
+            </div>
+            <div>
+              <strong>{profileQuery.data?.nickname || profileQuery.data?.username}</strong>
+              <div className="muted">头像由系统默认生成，前台不再要求手工填写 URL。</div>
+            </div>
+          </div>
           <div className="list-item">
             <strong>{profileQuery.data?.publicId}</strong>
             <div className="muted">公共用户 ID</div>
diff --git a/frontend-web/src/app/(dashboard)/workspace/assets/page.tsx b/frontend-web/src/app/(dashboard)/workspace/assets/page.tsx
index 17ea54f..6c8acdf 100644
--- a/frontend-web/src/app/(dashboard)/workspace/assets/page.tsx
+++ b/frontend-web/src/app/(dashboard)/workspace/assets/page.tsx
@@ -1,86 +1,295 @@
 "use client";
 
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import clsx from "clsx";
+import dayjs from "dayjs";
+import { AudioLines, LoaderCircle, Search, Trash2, UploadCloud, Video } from "lucide-react";
+import { useMemo, useState } from "react";
 
-import { api } from "@/lib/api";
+import { api, ApiError } from "@/lib/api";
 import type { AssetItem } from "@/lib/types";
 
+type MediaType = "image" | "video" | "audio";
+
+const mediaTypes = [
+  { value: "image", label: "图片", accept: "image/*" },
+  { value: "video", label: "视频", accept: "video/*" },
+  { value: "audio", label: "音频", accept: "audio/*" },
+] as const satisfies Array<{
+  value: MediaType;
+  label: string;
+  accept: string;
+}>;
+
+function formatBytes(fileSize: number) {
+  if (fileSize < 1024) {
+    return `${fileSize} B`;
+  }
+  if (fileSize < 1024 * 1024) {
+    return `${Math.round(fileSize / 1024)} KB`;
+  }
+  return `${(fileSize / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function getErrorMessage(error: unknown, fallback: string) {
+  return error instanceof ApiError ? error.message : fallback;
+}
+
 export default function AssetsPage() {
-  const [mediaType, setMediaType] = useState("image");
+  const [mediaType, setMediaType] = useState<MediaType>("image");
+  const [libraryType, setLibraryType] = useState<"all" | MediaType>("all");
+  const [keyword, setKeyword] = useState("");
+  const [uploadFile, setUploadFile] = useState<File | null>(null);
+  const [feedback, setFeedback] = useState<{
+    tone: "success" | "error";
+    text: string;
+  } | null>(null);
+
   const assetsQuery = useQuery({
     queryKey: ["asset-list"],
     queryFn: () => api.get<AssetItem[]>("/api/v1/assets"),
   });
 
   const uploadMutation = useMutation({
-    mutationFn: async (file: File) => {
+    mutationFn: async () => {
+      if (!uploadFile) {
+        throw new Error("请先选择文件");
+      }
+
       const formData = new FormData();
-      formData.append("file", file);
+      formData.append("file", uploadFile);
       formData.append("mediaType", mediaType);
-      return api.post("/api/v1/assets", formData);
+      return api.post<AssetItem>("/api/v1/assets", formData);
+    },
+    onSuccess(asset) {
+      setFeedback({
+        tone: "success",
+        text: `素材 ${asset.originalFilename} 上传成功。`,
+      });
+      setUploadFile(null);
+      void assetsQuery.refetch();
+    },
+    onError(error) {
+      setFeedback({
+        tone: "error",
+        text: getErrorMessage(error, "素材上传失败"),
+      });
     },
-    onSuccess: () => assetsQuery.refetch(),
   });
 
   const deleteMutation = useMutation({
     mutationFn: (assetId: number) => api.del(`/api/v1/assets/${assetId}`),
-    onSuccess: () => assetsQuery.refetch(),
+    onSuccess: () => {
+      setFeedback({
+        tone: "success",
+        text: "素材已删除。",
+      });
+      void assetsQuery.refetch();
+    },
+    onError(error) {
+      setFeedback({
+        tone: "error",
+        text: getErrorMessage(error, "素材删除失败"),
+      });
+    },
   });
 
-  return (
-    <div className="two-col-grid">
-      <section className="panel">
-        <h3>上传素材</h3>
-        <div className="form-stack">
-          <label className="field-label">
-            素材类型
-            <select value={mediaType} onChange={(event) => setMediaType(event.target.value)}>
-              <option value="image">图片</option>
-              <option value="video">视频</option>
-              <option value="audio">音频</option>
-            </select>
-          </label>
-          <label className="field-label">
-            文件
-            <input
-              type="file"
-              onChange={(event) => {
-                const file = event.target.files?.[0];
-                if (file) {
-                  uploadMutation.mutate(file);
-                }
-              }}
-            />
-          </label>
-        </div>
-      </section>
+  const filteredAssets = useMemo(() => {
+    let items = [...(assetsQuery.data ?? [])].sort(
+      (left, right) =>
+        dayjs(right.createdAt).valueOf() - dayjs(left.createdAt).valueOf(),
+    );
 
-      <section className="panel">
-        <h3>已上传素材</h3>
-        <div className="list-grid">
-          {assetsQuery.data?.map((asset) => (
-            <div className="list-item" key={asset.id}>
-              <strong>{asset.originalFilename}</strong>
-              <div className="muted">
-                {asset.mediaType} · {Math.round(asset.fileSize / 1024)} KB
-              </div>
-              <div className="row" style={{ marginTop: 12 }}>
-                <a className="ghost-button" href={asset.publicUrl} target="_blank">
-                  查看文件
-                </a>
-                <button
-                  className="danger-button"
-                  onClick={() => deleteMutation.mutate(asset.id)}
-                >
-                  删除
-                </button>
-              </div>
-            </div>
+    if (libraryType !== "all") {
+      items = items.filter((asset) => asset.mediaType === libraryType);
+    }
+
+    if (keyword.trim()) {
+      const loweredKeyword = keyword.trim().toLowerCase();
+      items = items.filter((asset) =>
+        [asset.originalFilename, asset.assetNo]
+          .filter(Boolean)
+          .some((field) => field.toLowerCase().includes(loweredKeyword)),
+      );
+    }
+
+    return items;
+  }, [assetsQuery.data, keyword, libraryType]);
+
+  return (
+    <div className="panel asset-management-shell">
+      <div className="workbench-header">
+        <div>
+          <span className="header-kicker">Asset Center</span>
+          <h3>独立素材管理</h3>
+          <p className="muted">
+            适合批量上传和清理素材；工作台里也能直接引用这些素材。
+          </p>
+        </div>
+        <span className="mini-note">总素材数 {assetsQuery.data?.length ?? 0}</span>
+      </div>
+
+      <div className="asset-upload-panel">
+        <div className="toolbar">
+          <div className="segmented-group">
+            {mediaTypes.map((item) => (
+              <button
+                className={clsx("segmented-button", {
+                  active: mediaType === item.value,
+                })}
+                key={item.value}
+                onClick={() => setMediaType(item.value)}
+                type="button"
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+          <span className="mini-note">选择类型后再上传，文件会按类型归档</span>
+        </div>
+
+        <div className="upload-row">
+          <label className="file-picker">
+            <input
+              accept={mediaTypes.find((item) => item.value === mediaType)?.accept}
+              onChange={(event) => setUploadFile(event.target.files?.[0] ?? null)}
+              type="file"
+            />
+            <UploadCloud size={18} />
+            <span>{uploadFile?.name ?? "选择一个素材文件"}</span>
+          </label>
+          <button
+            className="primary-button"
+            disabled={!uploadFile || uploadMutation.isPending}
+            onClick={() => uploadMutation.mutate()}
+            type="button"
+          >
+            {uploadMutation.isPending ? (
+              <>
+                <LoaderCircle className="spin" size={16} />
+                上传中
+              </>
+            ) : (
+              <>
+                <UploadCloud size={16} />
+                上传素材
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      <div className="library-toolbar">
+        <div className="segmented-group">
+          <button
+            className={clsx("segmented-button", {
+              active: libraryType === "all",
+            })}
+            onClick={() => setLibraryType("all")}
+            type="button"
+          >
+            全部
+          </button>
+          {mediaTypes.map((item) => (
+            <button
+              className={clsx("segmented-button", {
+                active: libraryType === item.value,
+              })}
+              key={item.value}
+              onClick={() => setLibraryType(item.value)}
+              type="button"
+            >
+              {item.label}
+            </button>
           ))}
         </div>
-      </section>
+
+        <label className="library-search">
+          <Search size={16} />
+          <input
+            onChange={(event) => setKeyword(event.target.value)}
+            placeholder="搜索文件名 / asset id"
+            value={keyword}
+          />
+        </label>
+      </div>
+
+      {feedback ? (
+        <div
+          className={clsx("inline-feedback", {
+            "is-success": feedback.tone === "success",
+            "is-error": feedback.tone === "error",
+          })}
+        >
+          {feedback.text}
+        </div>
+      ) : null}
+
+      <div className="asset-gallery">
+        {filteredAssets.length ? (
+          filteredAssets.map((asset) => (
+            <article className="asset-library-card" key={asset.id}>
+              {asset.mediaType === "image" ? (
+                <div
+                  className="asset-thumb asset-thumb-image"
+                  style={{ backgroundImage: `url(${asset.publicUrl})` }}
+                >
+                  <span className="asset-media-badge">图片</span>
+                </div>
+              ) : asset.mediaType === "video" ? (
+                <div className="asset-thumb asset-thumb-video">
+                  <video muted preload="metadata" src={asset.publicUrl} />
+                  <span className="asset-media-badge">视频</span>
+                </div>
+              ) : (
+                <div className="asset-thumb asset-thumb-audio">
+                  <AudioLines size={22} />
+                  <span>音频</span>
+                </div>
+              )}
+
+              <div className="asset-card-body">
+                <div className="asset-card-title-row">
+                  <strong>{asset.originalFilename}</strong>
+                </div>
+                <div className="asset-card-meta">
+                  {asset.assetNo} · {formatBytes(asset.fileSize)}
+                </div>
+                <div className="asset-card-meta">
+                  {dayjs(asset.createdAt).format("YYYY-MM-DD HH:mm")}
+                </div>
+                <div className="row">
+                  <a
+                    className="ghost-button compact-button"
+                    href={asset.publicUrl}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    {asset.mediaType === "video" ? (
+                      <>
+                        <Video size={14} />
+                        预览
+                      </>
+                    ) : (
+                      "查看"
+                    )}
+                  </a>
+                  <button
+                    className="danger-button compact-button"
+                    onClick={() => deleteMutation.mutate(asset.id)}
+                    type="button"
+                  >
+                    <Trash2 size={14} />
+                    删除
+                  </button>
+                </div>
+              </div>
+            </article>
+          ))
+        ) : (
+          <div className="empty-state">当前没有匹配素材，先上传或调整筛选条件。</div>
+        )}
+      </div>
     </div>
   );
 }
-
diff --git a/frontend-web/src/app/(dashboard)/workspace/create/page.tsx b/frontend-web/src/app/(dashboard)/workspace/create/page.tsx
index b29927a..4c6a7dc 100644
--- a/frontend-web/src/app/(dashboard)/workspace/create/page.tsx
+++ b/frontend-web/src/app/(dashboard)/workspace/create/page.tsx
@@ -1,24 +1,129 @@
 "use client";
 
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
+import clsx from "clsx";
+import dayjs from "dayjs";
+import {
+  AudioLines,
+  Check,
+  Clapperboard,
+  Coins,
+  ImageIcon,
+  LoaderCircle,
+  RefreshCw,
+  Search,
+  Sparkles,
+  UploadCloud,
+  Video,
+} from "lucide-react";
 import Link from "next/link";
+import { useMemo, useState } from "react";
 
+import { StatusBadge } from "@/components/status-badge";
 import { api, ApiError } from "@/lib/api";
-import type { AssetItem, VideoModel, WalletSummary } from "@/lib/types";
+import type {
+  AssetItem,
+  TaskSummary,
+  VideoModel,
+  WalletSummary,
+} from "@/lib/types";
+
+type MediaType = "image" | "video" | "audio";
+type AssetSelectionKey =
+  | "referenceImageAssetIds"
+  | "referenceVideoAssetIds"
+  | "referenceAudioAssetIds";
+type FeedbackTone = "success" | "error" | "soft";
+
+const durationOptions = [4, 5, 8, 10, 12, 15];
+const resolutionOptions = [
+  { value: "1280x720", label: "720p" },
+  { value: "1920x1080", label: "1080p" },
+];
+const ratioOptions = ["16:9", "9:16", "1:1"];
+
+const mediaTypeMeta = {
+  image: {
+    label: "图片",
+    icon: ImageIcon,
+    key: "referenceImageAssetIds",
+    emptyText: "从右侧素材库选择图片参考",
+    inputAccept: "image/*",
+  },
+  video: {
+    label: "视频",
+    icon: Video,
+    key: "referenceVideoAssetIds",
+    emptyText: "上传视频后可作为运动参考",
+    inputAccept: "video/*",
+  },
+  audio: {
+    label: "音频",
+    icon: AudioLines,
+    key: "referenceAudioAssetIds",
+    emptyText: "上传音频后可做声音参考",
+    inputAccept: "audio/*",
+  },
+} as const satisfies Record<
+  MediaType,
+  {
+    label: string;
+    icon: typeof ImageIcon;
+    key: AssetSelectionKey;
+    emptyText: string;
+    inputAccept: string;
+  }
+>;
+
+function resolveAssetSelectionKey(mediaType: string): AssetSelectionKey | null {
+  if (mediaType === "image") {
+    return "referenceImageAssetIds";
+  }
+  if (mediaType === "video") {
+    return "referenceVideoAssetIds";
+  }
+  if (mediaType === "audio") {
+    return "referenceAudioAssetIds";
+  }
+  return null;
+}
+
+function formatBytes(fileSize: number) {
+  if (fileSize < 1024) {
+    return `${fileSize} B`;
+  }
+  if (fileSize < 1024 * 1024) {
+    return `${Math.round(fileSize / 1024)} KB`;
+  }
+  return `${(fileSize / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function getErrorMessage(error: unknown, fallback: string) {
+  return error instanceof ApiError ? error.message : fallback;
+}
 
 export default function CreateTaskPage() {
   const [form, setForm] = useState({
-    videoModelId: 0,
+    videoModelId: null as number | null,
     prompt:
       "夜晚的未来城市高架桥上，一辆银色跑车高速穿行，镜头跟拍，霓虹反光强烈。",
-    durationSeconds: 8,
-    resolution: "1280x720",
-    ratio: "16:9",
+    durationSeconds: null as number | null,
+    resolution: "",
+    ratio: "",
     generateAudio: true,
     referenceImageAssetIds: [] as number[],
+    referenceVideoAssetIds: [] as number[],
+    referenceAudioAssetIds: [] as number[],
   });
-  const [message, setMessage] = useState("");
+  const [feedback, setFeedback] = useState<{
+    tone: FeedbackTone;
+    text: string;
+  } | null>(null);
+  const [libraryScope, setLibraryScope] = useState<"recent" | "all">("recent");
+  const [libraryType, setLibraryType] = useState<"all" | MediaType>("all");
+  const [assetSearch, setAssetSearch] = useState("");
+  const [uploadMediaType, setUploadMediaType] = useState<MediaType>("image");
+  const [uploadFile, setUploadFile] = useState<File | null>(null);
 
   const videoModelsQuery = useQuery({
     queryKey: ["video-models"],
@@ -32,14 +137,141 @@ export default function CreateTaskPage() {
     queryKey: ["assets"],
     queryFn: () => api.get<AssetItem[]>("/api/v1/assets"),
   });
+  const tasksQuery = useQuery({
+    queryKey: ["task-list"],
+    queryFn: () => api.get<TaskSummary[]>("/api/v1/video-tasks"),
+    refetchInterval: 5_000,
+  });
 
   const selectedModel = useMemo(
     () =>
       videoModelsQuery.data?.find((item) => item.id === form.videoModelId) ??
-      videoModelsQuery.data?.[0],
+      videoModelsQuery.data?.[0] ??
+      null,
     [form.videoModelId, videoModelsQuery.data],
   );
 
+  const activeDuration =
+    form.durationSeconds ?? selectedModel?.defaultDurationSeconds ?? 8;
+  const activeResolution =
+    form.resolution || selectedModel?.defaultResolution || "1280x720";
+  const activeRatio = form.ratio || selectedModel?.defaultRatio || "16:9";
+
+  const sortedAssets = useMemo(
+    () =>
+      [...(assetsQuery.data ?? [])].sort(
+        (left, right) =>
+          dayjs(right.createdAt).valueOf() - dayjs(left.createdAt).valueOf(),
+      ),
+    [assetsQuery.data],
+  );
+
+  const filteredAssets = useMemo(() => {
+    let result = sortedAssets;
+
+    if (libraryType !== "all") {
+      result = result.filter((asset) => asset.mediaType === libraryType);
+    }
+
+    if (assetSearch.trim()) {
+      const keyword = assetSearch.trim().toLowerCase();
+      result = result.filter((asset) =>
+        [asset.originalFilename, asset.assetNo]
+          .filter(Boolean)
+          .some((field) => field.toLowerCase().includes(keyword)),
+      );
+    }
+
+    if (libraryScope === "recent") {
+      result = result.slice(0, 12);
+    }
+
+    return result;
+  }, [assetSearch, libraryScope, libraryType, sortedAssets]);
+
+  const selectedAssets = useMemo(
+    () => ({
+      image: sortedAssets.filter((asset) =>
+        form.referenceImageAssetIds.includes(asset.id),
+      ),
+      video: sortedAssets.filter((asset) =>
+        form.referenceVideoAssetIds.includes(asset.id),
+      ),
+      audio: sortedAssets.filter((asset) =>
+        form.referenceAudioAssetIds.includes(asset.id),
+      ),
+    }),
+    [
+      form.referenceAudioAssetIds,
+      form.referenceImageAssetIds,
+      form.referenceVideoAssetIds,
+      sortedAssets,
+    ],
+  );
+
+  const selectedAssetCount =
+    form.referenceImageAssetIds.length +
+    form.referenceVideoAssetIds.length +
+    form.referenceAudioAssetIds.length;
+
+  const estimatedPoints = useMemo(() => {
+    if (!selectedModel) {
+      return 0;
+    }
+    return Math.max(
+      selectedModel.pricing.minimumPoints,
+      selectedModel.pricing.pointsPerSecond * activeDuration,
+    );
+  }, [activeDuration, selectedModel]);
+
+  const recentTasks = useMemo(
+    () =>
+      [...(tasksQuery.data ?? [])]
+        .sort(
+          (left, right) =>
+            dayjs(right.createdAt).valueOf() - dayjs(left.createdAt).valueOf(),
+        )
+        .slice(0, 4),
+    [tasksQuery.data],
+  );
+
+  const uploadMutation = useMutation({
+    mutationFn: async () => {
+      if (!uploadFile) {
+        throw new Error("请先选择文件");
+      }
+      const formData = new FormData();
+      formData.append("file", uploadFile);
+      formData.append("mediaType", uploadMediaType);
+      return api.post<AssetItem>("/api/v1/assets", formData);
+    },
+    onSuccess(asset) {
+      setFeedback({
+        tone: "success",
+        text: `素材 ${asset.originalFilename} 上传成功，已进入素材库。`,
+      });
+      setUploadFile(null);
+      void assetsQuery.refetch();
+
+      if (asset.mediaType === "image") {
+        setForm((previous) => ({
+          ...previous,
+          referenceImageAssetIds: previous.referenceImageAssetIds.includes(
+            asset.id,
+          )
+            ? previous.referenceImageAssetIds
+            : [asset.id, ...previous.referenceImageAssetIds],
+        }));
+      }
+    },
+    onError(error) {
+      setFeedback({
+        tone: "error",
+        text: getErrorMessage(error, "素材上传失败"),
+      });
+    },
+  });
+
   const createMutation = useMutation({
     mutationFn: () =>
       api.post<{
@@ -49,165 +281,623 @@ export default function CreateTaskPage() {
         frozenPoints: number;
       }>("/api/v1/video-tasks", {
         ...form,
-        videoModelId: form.videoModelId || selectedModel?.id,
-        referenceVideoAssetIds: [],
-        referenceAudioAssetIds: [],
+        videoModelId: form.videoModelId ?? selectedModel?.id,
+        durationSeconds: activeDuration,
+        resolution: activeResolution,
+        ratio: activeRatio,
       }),
     onSuccess(data) {
-      setMessage(
-        `任务 ${data.taskNo} 已提交，预估扣费 ${data.estimatedPoints} 积分。`,
-      );
+      setFeedback({
+        tone: "success",
+        text: `任务 ${data.taskNo} 已提交，预估扣费 ${data.estimatedPoints} 积分。`,
+      });
+      void walletQuery.refetch();
+      void tasksQuery.refetch();
     },
     onError(error) {
-      setMessage(error instanceof ApiError ? error.message : "创建失败");
+      setFeedback({
+        tone: "error",
+        text: getErrorMessage(error, "创建失败"),
+      });
     },
   });
 
+  const handleModelSelect = (model: VideoModel) => {
+    setForm((previous) => ({
+      ...previous,
+      videoModelId: model.id,
+      durationSeconds: model.defaultDurationSeconds,
+      resolution: model.defaultResolution,
+      ratio: model.defaultRatio,
+    }));
+  };
+
+  const toggleAssetSelection = (asset: AssetItem) => {
+    const key = resolveAssetSelectionKey(asset.mediaType);
+    if (!key) {
+      return;
+    }
+
+    setForm((previous) => {
+      const current = previous[key];
+      const next = current.includes(asset.id)
+        ? current.filter((id) => id !== asset.id)
+        : [...current, asset.id];
+
+      return {
+        ...previous,
+        [key]: next,
+      };
+    });
+  };
+
+  const clearAssetSelection = (key: AssetSelectionKey) => {
+    setForm((previous) => ({
+      ...previous,
+      [key]: [],
+    }));
+  };
+
+  const isAssetSelected = (asset: AssetItem) => {
+    const key = resolveAssetSelectionKey(asset.mediaType);
+    return key ? form[key].includes(asset.id) : false;
+  };
+
+  const handleRefresh = () => {
+    void assetsQuery.refetch();
+    void tasksQuery.refetch();
+    void walletQuery.refetch();
+  };
+
   return (
-    <div className="two-col-grid">
-      <section className="panel">
-        <div className="toolbar">
+    <div className="workbench-grid">
+      <section className="panel studio-panel">
+        <div className="workbench-header">
           <div>
-            <h3>创建视频任务</h3>
-            <p className="muted">选择平台模型、提示词和参考素材，提交后系统会自动冻结积分并开始轮询。</p>
+            <span className="header-kicker">AI Video Studio</span>
+            <h3>工作台</h3>
+            <p className="muted">
+              按模型选型、提示词、素材引用的顺序完成一次提交。用户侧不暴露
+              URL 之类的平台配置，只保留创作需要的参数。
+            </p>
+          </div>
+          <div className="row">
+            <Link href="/workspace/tasks" className="ghost-button">
+              任务列表
+            </Link>
+            <button
+              className="ghost-button"
+              onClick={handleRefresh}
+              type="button"
+            >
+              <RefreshCw size={16} />
+              刷新
+            </button>
           </div>
-          <Link href="/workspace/tasks" className="ghost-button">
-            查看任务列表
-          </Link>
         </div>
 
-        <div className="form-stack">
-          <label className="field-label">
-            平台视频模型
-            <select
-              value={form.videoModelId || selectedModel?.id || ""}
-              onChange={(event) =>
-                setForm((previous) => ({
-                  ...previous,
-                  videoModelId: Number(event.target.value),
-                }))
-              }
-            >
-              {videoModelsQuery.data?.map((item) => (
-                <option key={item.id} value={item.id}>
-                  {item.frontendTitle}
-                </option>
-              ))}
-            </select>
-          </label>
-          <label className="field-label">
-            提示词
-            <textarea
-              value={form.prompt}
-              onChange={(event) =>
-                setForm((previous) => ({ ...previous, prompt: event.target.value }))
-              }
-            />
-          </label>
-          <div className="mini-grid">
-            <label className="field-label">
-              时长
-              <input
-                type="number"
-                min={4}
-                max={15}
-                value={form.durationSeconds}
-                onChange={(event) =>
-                  setForm((previous) => ({
-                    ...previous,
-                    durationSeconds: Number(event.target.value),
-                  }))
-                }
-              />
-            </label>
-            <label className="field-label">
-              分辨率
-              <select
-                value={form.resolution}
-                onChange={(event) =>
-                  setForm((previous) => ({ ...previous, resolution: event.target.value }))
-                }
-              >
-                <option value="1280x720">1280x720</option>
-                <option value="1920x1080">1920x1080</option>
-              </select>
-            </label>
-            <label className="field-label">
-              比例
-              <select
-                value={form.ratio}
-                onChange={(event) =>
-                  setForm((previous) => ({ ...previous, ratio: event.target.value }))
-                }
-              >
-                <option value="16:9">16:9</option>
-                <option value="9:16">9:16</option>
-                <option value="1:1">1:1</option>
-              </select>
-            </label>
+        <div className="studio-summary-grid">
+          <article className="studio-stat">
+            <span>可用积分</span>
+            <strong>{walletQuery.data?.availablePoints ?? 0}</strong>
+            <small>当前账户可直接消耗的点数</small>
+          </article>
+          <article className="studio-stat">
+            <span>预计扣费</span>
+            <strong>{estimatedPoints}</strong>
+            <small>根据时长和模型规则实时估算</small>
+          </article>
+          <article className="studio-stat">
+            <span>已选素材</span>
+            <strong>{selectedAssetCount}</strong>
+            <small>支持图片、视频、音频分别引用</small>
+          </article>
+        </div>
+
+        <div className="control-block">
+          <div className="control-head">
+            <div>
+              <div className="block-title">平台模型</div>
+              <div className="muted">切换模型时自动应用默认时长、比例和分辨率。</div>
+            </div>
+            <span className="mini-note">
+              {videoModelsQuery.data?.length ?? 0} 个可用模型
+            </span>
+          </div>
+
+          <div className="model-card-grid">
+            {videoModelsQuery.data?.map((model) => (
+              <button
+                className={clsx("model-card", {
+                  active: selectedModel?.id === model.id,
+                })}
+                key={model.id}
+                onClick={() => handleModelSelect(model)}
+                type="button"
+              >
+                <div className="model-card-head">
+                  <div>
+                    <strong>{model.frontendTitle}</strong>
+                    <span>{model.modelName}</span>
+                  </div>
+                  <Sparkles size={18} />
+                </div>
+                <p>{model.frontendDescription || "适合通用视频生成场景。"}</p>
+                <div className="model-card-metrics">
+                  <span>{model.defaultResolution}</span>
+                  <span>{model.defaultRatio}</span>
+                  <span>{model.pricing.pointsPerSecond}/s</span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="control-block">
+          <div className="control-head">
+            <div>
+              <div className="block-title">提示词</div>
+              <div className="muted">把主体、镜头语言、动作和光线写在一个段落里，质量更稳定。</div>
+            </div>
+            <span className="mini-note">{form.prompt.length}/4000</span>
+          </div>
+          <textarea
+            className="prompt-editor"
+            onChange={(event) =>
+              setForm((previous) => ({
+                ...previous,
+                prompt: event.target.value,
+              }))
+            }
+            value={form.prompt}
+          />
+        </div>
+
+        <div className="studio-control-grid">
+          <div className="control-block">
+            <div className="block-title">时长</div>
+            <div className="segmented-group">
+              {durationOptions.map((duration) => (
+                <button
+                  className={clsx("segmented-button", {
+                    active: activeDuration === duration,
+                  })}
+                  key={duration}
+                  onClick={() =>
+                    setForm((previous) => ({
+                      ...previous,
+                      videoModelId: previous.videoModelId ?? selectedModel?.id ?? null,
+                      durationSeconds: duration,
+                    }))
+                  }
+                  type="button"
+                >
+                  {duration}s
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="control-block">
+            <div className="block-title">分辨率</div>
+            <div className="segmented-group">
+              {resolutionOptions.map((resolution) => (
+                <button
+                  className={clsx("segmented-button", {
+                    active: activeResolution === resolution.value,
+                  })}
+                  key={resolution.value}
+                  onClick={() =>
+                    setForm((previous) => ({
+                      ...previous,
+                      videoModelId: previous.videoModelId ?? selectedModel?.id ?? null,
+                      resolution: resolution.value,
+                    }))
+                  }
+                  type="button"
+                >
+                  {resolution.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="control-block">
+            <div className="block-title">比例</div>
+            <div className="segmented-group">
+              {ratioOptions.map((ratio) => (
+                <button
+                  className={clsx("segmented-button", {
+                    active: activeRatio === ratio,
+                  })}
+                  key={ratio}
+                  onClick={() =>
+                    setForm((previous) => ({
+                      ...previous,
+                      videoModelId: previous.videoModelId ?? selectedModel?.id ?? null,
+                      ratio,
+                    }))
+                  }
+                  type="button"
+                >
+                  {ratio}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="control-block">
+          <div className="control-head">
+            <div>
+              <div className="block-title">媒体素材</div>
+              <div className="muted">右侧素材库点击“引用”即可同步到这里，提交时自动按类型发送。</div>
+            </div>
+            <span className="mini-note">当前已引用 {selectedAssetCount} 个素材</span>
+          </div>
+
+          <div className="media-slot-grid">
+            {(Object.keys(mediaTypeMeta) as MediaType[]).map((mediaType) => {
+              const meta = mediaTypeMeta[mediaType];
+              const Icon = meta.icon;
+              const assets = selectedAssets[mediaType];
+
+              return (
+                <div className="media-slot" key={mediaType}>
+                  <div className="media-slot-head">
+                    <div className="row">
+                      <Icon size={16} />
+                      <strong>{meta.label}</strong>
+                    </div>
+                    {assets.length ? (
+                      <button
+                        className="text-button"
+                        onClick={() => clearAssetSelection(meta.key)}
+                        type="button"
+                      >
+                        清空
+                      </button>
+                    ) : null}
+                  </div>
+                  <div className="media-slot-body">
+                    {assets.length ? (
+                      assets.map((asset) => (
+                        <button
+                          className="selected-asset-chip"
+                          key={asset.id}
+                          onClick={() => toggleAssetSelection(asset)}
+                          type="button"
+                        >
+                          <span>{asset.originalFilename}</span>
+                          <small>{asset.assetNo}</small>
+                        </button>
+                      ))
+                    ) : (
+                      <div className="selection-placeholder">{meta.emptyText}</div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        <label className="toggle-card">
+          <input
+            checked={form.generateAudio}
+            onChange={(event) =>
+              setForm((previous) => ({
+                ...previous,
+                generateAudio: event.target.checked,
+              }))
+            }
+            type="checkbox"
+          />
+          <div>
+            <span>生成音频</span>
+            <small>提交视频任务时一起请求音频输出。</small>
+          </div>
+        </label>
+
+        {feedback ? (
+          <div
+            className={clsx("inline-feedback", {
+              "is-success": feedback.tone === "success",
+              "is-error": feedback.tone === "error",
+            })}
+          >
+            {feedback.text}
+          </div>
+        ) : null}
+
+        <div className="composer-footer">
+          <div className="muted">
+            提交后系统会先冻结积分，再进入轮询。若结果尚未完成，可去任务页继续追踪。
           </div>
-          <label className="field-label">
-            参考图片
-            <select
-              multiple
-              value={form.referenceImageAssetIds.map(String)}
-              onChange={(event) =>
-                setForm((previous) => ({
-                  ...previous,
-                  referenceImageAssetIds: Array.from(event.target.selectedOptions).map((item) =>
-                    Number(item.value),
-                  ),
-                }))
-              }
-            >
-              {assetsQuery.data
-                ?.filter((item) => item.mediaType === "image")
-                .map((item) => (
-                  <option key={item.id} value={item.id}>
-                    {item.originalFilename}
-                  </option>
-                ))}
-            </select>
-          </label>
           <button
-            className="primary-button"
-            disabled={createMutation.isPending}
+            className="primary-button primary-button-wide"
+            disabled={
+              createMutation.isPending ||
+              !selectedModel ||
+              !form.prompt.trim().length
+            }
             onClick={() => createMutation.mutate()}
             type="button"
           >
-            {createMutation.isPending ? "提交中..." : "提交生成任务"}
+            {createMutation.isPending ? (
+              <>
+                <LoaderCircle className="spin" size={16} />
+                提交中...
+              </>
+            ) : (
+              <>
+                <Clapperboard size={16} />
+                提交生成任务
+              </>
+            )}
           </button>
-          {message ? <div className="muted">{message}</div> : null}
         </div>
       </section>
 
-      <section className="panel-grid">
-        <article className="stat-card">
-          <h3>钱包余额</h3>
-          <div className="value">{walletQuery.data?.availablePoints ?? 0}</div>
-          <div className="muted">可用积分</div>
-        </article>
-        <article className="panel">
-          <h3>当前模型</h3>
-          <div className="list-grid">
-            <div className="list-item">
-              <strong>{selectedModel?.frontendTitle ?? "加载中..."}</strong>
-              <span className="muted">{selectedModel?.frontendDescription}</span>
-            </div>
-            <div className="mini-grid">
-              <div className="list-item">
-                <strong>{selectedModel?.pricing.pointsPerSecond ?? 0}</strong>
-                <span className="muted">每秒积分</span>
-              </div>
-              <div className="list-item">
-                <strong>{selectedModel?.pricing.minimumPoints ?? 0}</strong>
-                <span className="muted">最低扣费</span>
-              </div>
-            </div>
+      <section className="panel library-panel">
+        <div className="library-header">
+          <div>
+            <span className="header-kicker">Asset Dock</span>
+            <h3>素材库</h3>
+            <p className="muted">上传后即时入库，右侧挑素材，左侧直接组成任务。</p>
           </div>
-        </article>
+          <div className="workspace-tabs">
+            <span className="tab-chip active">素材库</span>
+            <Link className="tab-chip" href="/workspace/tasks">
+              任务
+            </Link>
+            <Link className="tab-chip" href="/workspace/assets">
+              独立管理
+            </Link>
+          </div>
+        </div>
+
+        <div className="asset-upload-panel">
+          <div className="toolbar">
+            <div className="segmented-group">
+              {(Object.keys(mediaTypeMeta) as MediaType[]).map((mediaType) => (
+                <button
+                  className={clsx("segmented-button", {
+                    active: uploadMediaType === mediaType,
+                  })}
+                  key={mediaType}
+                  onClick={() => setUploadMediaType(mediaType)}
+                  type="button"
+                >
+                  {mediaTypeMeta[mediaType].label}
+                </button>
+              ))}
+            </div>
+            <span className="mini-note">当前支持本地文件上传</span>
+          </div>
+
+          <div className="upload-row">
+            <label className="file-picker">
+              <input
+                accept={mediaTypeMeta[uploadMediaType].inputAccept}
+                onChange={(event) =>
+                  setUploadFile(event.target.files?.[0] ?? null)
+                }
+                type="file"
+              />
+              <UploadCloud size={18} />
+              <span>{uploadFile?.name ?? "选择文件并拖入素材库"}</span>
+            </label>
+            <button
+              className="primary-button"
+              disabled={!uploadFile || uploadMutation.isPending}
+              onClick={() => uploadMutation.mutate()}
+              type="button"
+            >
+              {uploadMutation.isPending ? (
+                <>
+                  <LoaderCircle className="spin" size={16} />
+                  上传中
+                </>
+              ) : (
+                <>
+                  <UploadCloud size={16} />
+                  上传
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+
+        <div className="library-toolbar">
+          <div className="segmented-group">
+            <button
+              className={clsx("segmented-button", {
+                active: libraryType === "all",
+              })}
+              onClick={() => setLibraryType("all")}
+              type="button"
+            >
+              全部
+            </button>
+            {(Object.keys(mediaTypeMeta) as MediaType[]).map((mediaType) => (
+              <button
+                className={clsx("segmented-button", {
+                  active: libraryType === mediaType,
+                })}
+                key={mediaType}
+                onClick={() => setLibraryType(mediaType)}
+                type="button"
+              >
+                {mediaTypeMeta[mediaType].label}
+              </button>
+            ))}
+          </div>
+
+          <label className="library-search">
+            <Search size={16} />
+            <input
+              onChange={(event) => setAssetSearch(event.target.value)}
+              placeholder="搜索文件名 / asset id"
+              value={assetSearch}
+            />
+          </label>
+        </div>
+
+        <div className="toolbar">
+          <div className="segmented-group">
+            <button
+              className={clsx("segmented-button", {
+                active: libraryScope === "recent",
+              })}
+              onClick={() => setLibraryScope("recent")}
+              type="button"
+            >
+              最新
+            </button>
+            <button
+              className={clsx("segmented-button", {
+                active: libraryScope === "all",
+              })}
+              onClick={() => setLibraryScope("all")}
+              type="button"
+            >
+              全部
+            </button>
+          </div>
+          <span className="mini-note">素材总数 {sortedAssets.length}</span>
+        </div>
+
+        <div className="asset-gallery">
+          {filteredAssets.length ? (
+            filteredAssets.map((asset) => {
+              const selected = isAssetSelected(asset);
+              const mediaType =
+                asset.mediaType in mediaTypeMeta
+                  ? (asset.mediaType as MediaType)
+                  : "image";
+              const mediaLabel = mediaTypeMeta[mediaType].label;
+
+              return (
+                <article
+                  className={clsx("asset-library-card", {
+                    selected,
+                  })}
+                  key={asset.id}
+                >
+                  {asset.mediaType === "image" ? (
+                    <div
+                      className="asset-thumb asset-thumb-image"
+                      style={{ backgroundImage: `url(${asset.publicUrl})` }}
+                    >
+                      <span className="asset-media-badge">{mediaLabel}</span>
+                    </div>
+                  ) : asset.mediaType === "video" ? (
+                    <div className="asset-thumb asset-thumb-video">
+                      <video muted preload="metadata" src={asset.publicUrl} />
+                      <span className="asset-media-badge">{mediaLabel}</span>
+                    </div>
+                  ) : (
+                    <div className="asset-thumb asset-thumb-audio">
+                      <AudioLines size={22} />
+                      <span>{mediaLabel}</span>
+                    </div>
+                  )}
+
+                  <div className="asset-card-body">
+                    <div className="asset-card-title-row">
+                      <strong>{asset.originalFilename}</strong>
+                      {selected ? (
+                        <span className="asset-selected-mark">
+                          <Check size={14} />
+                          已引用
+                        </span>
+                      ) : null}
+                    </div>
+                    <div className="asset-card-meta">
+                      {asset.assetNo} · {formatBytes(asset.fileSize)}
+                    </div>
+                    <div className="asset-card-meta">
+                      {dayjs(asset.createdAt).format("MM-DD HH:mm")}
+                    </div>
+                    <div className="row">
+                      <a
+                        className="ghost-button compact-button"
+                        href={asset.publicUrl}
+                        rel="noreferrer"
+                        target="_blank"
+                      >
+                        预览
+                      </a>
+                      <button
+                        className={clsx(
+                          selected ? "ghost-button" : "primary-button",
+                          "compact-button",
+                        )}
+                        onClick={() => toggleAssetSelection(asset)}
+                        type="button"
+                      >
+                        {selected ? "取消引用" : "引用"}
+                      </button>
+                    </div>
+                  </div>
+                </article>
+              );
+            })
+          ) : (
+            <div className="empty-state">
+              没有匹配到素材，先上传文件或切换筛选条件。
+            </div>
+          )}
+        </div>
+
+        <div className="recent-task-strip">
+          <div className="toolbar">
+            <div>
+              <h4>最近任务</h4>
+              <p className="muted">素材和任务都在同一页里，不需要来回切换。</p>
+            </div>
+            <Link className="ghost-button compact-button" href="/workspace/tasks">
+              全部任务
+            </Link>
+          </div>
+
+          <div className="list-grid compact-list">
+            {recentTasks.length ? (
+              recentTasks.map((task) => (
+                <Link
+                  className="task-mini-card"
+                  href={`/workspace/tasks/${task.taskNo}`}
+                  key={task.taskNo}
+                >
+                  <div className="toolbar">
+                    <div>
+                      <strong>{task.taskNo}</strong>
+                      <div className="muted">
+                        {dayjs(task.createdAt).format("MM-DD HH:mm")} ·{" "}
+                        {task.durationSeconds}s
+                      </div>
+                    </div>
+                    <StatusBadge value={task.taskStatus} />
+                  </div>
+                  <div className="task-mini-meta">
+                    <span>
+                      <Coins size={14} />
+                      {task.estimatedPoints}
+                    </span>
+                    <span>
+                      <Video size={14} />
+                      {task.resultVideoUrl ? "已出片" : "处理中"}
+                    </span>
+                  </div>
+                </Link>
+              ))
+            ) : (
+              <div className="empty-state">还没有任务记录，左侧填写参数后就能开始生成。</div>
+            )}
+          </div>
+        </div>
       </section>
     </div>
   );
 }
-
diff --git a/frontend-web/src/app/globals.css b/frontend-web/src/app/globals.css
index 3873cdc..a18880f 100644
--- a/frontend-web/src/app/globals.css
+++ b/frontend-web/src/app/globals.css
@@ -1,18 +1,29 @@
 @import "tailwindcss";
 
 :root {
-  --bg: #f7f2e8;
-  --surface: rgba(255, 255, 255, 0.78);
-  --surface-strong: #fffdf9;
-  --ink: #132238;
-  --muted: #5f6977;
-  --line: rgba(19, 34, 56, 0.12);
-  --accent: #e66a2c;
-  --accent-deep: #a43e13;
-  --olive: #35524a;
-  --success: #198754;
-  --warn: #c27a11;
-  --danger: #b63d3d;
+  --font-display: "Bahnschrift", "Segoe UI", "PingFang SC", sans-serif;
+  --font-body: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", sans-serif;
+  --bg: #090b12;
+  --bg-soft: #101521;
+  --bg-elevated: #171d2d;
+  --surface: rgba(17, 22, 35, 0.88);
+  --surface-strong: rgba(24, 31, 48, 0.98);
+  --surface-muted: rgba(13, 17, 27, 0.92);
+  --ink: #f5f7fb;
+  --muted: #97a3bb;
+  --line: rgba(151, 163, 187, 0.16);
+  --line-strong: rgba(135, 196, 255, 0.32);
+  --accent: #4ea9ff;
+  --accent-strong: #7fd6ff;
+  --accent-soft: rgba(78, 169, 255, 0.14);
+  --success: #68d391;
+  --warn: #f0b354;
+  --danger: #f07f7f;
+  --shadow: 0 28px 90px rgba(0, 0, 0, 0.4);
+}
+
+.app-fonts {
+  font-family: var(--font-body);
 }
 
 * {
@@ -29,9 +40,10 @@ body {
   color: var(--ink);
   font-family: var(--font-body), sans-serif;
   background:
-    radial-gradient(circle at top right, rgba(230, 106, 44, 0.18), transparent 28%),
-    radial-gradient(circle at bottom left, rgba(53, 82, 74, 0.22), transparent 30%),
-    linear-gradient(180deg, #fbf6ee 0%, #f2ecdf 100%);
+    radial-gradient(circle at top left, rgba(53, 112, 255, 0.18), transparent 26%),
+    radial-gradient(circle at top right, rgba(12, 132, 92, 0.12), transparent 24%),
+    radial-gradient(circle at bottom center, rgba(92, 51, 174, 0.12), transparent 30%),
+    linear-gradient(180deg, #0a0d15 0%, #080a10 100%);
 }
 
 a {
@@ -46,6 +58,30 @@ textarea {
   font: inherit;
 }
 
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: rgba(151, 163, 187, 0.74);
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .fullscreen-shell {
   min-height: 100vh;
   display: grid;
@@ -56,7 +92,9 @@ textarea {
 .auth-grid {
   min-height: 100vh;
   display: grid;
-  grid-template-columns: 1.2fr 0.8fr;
+  grid-template-columns: 1.12fr 0.88fr;
+  background:
+    linear-gradient(160deg, rgba(10, 13, 21, 0.98) 0%, rgba(8, 10, 16, 0.98) 100%);
 }
 
 .auth-hero {
@@ -72,14 +110,16 @@ textarea {
   padding: 32px;
   border: 1px solid var(--line);
   border-radius: 28px;
-  background: rgba(255, 255, 255, 0.86);
-  box-shadow: 0 28px 80px rgba(19, 34, 56, 0.1);
+  background: rgba(16, 21, 33, 0.94);
+  box-shadow: var(--shadow);
 }
 
-.eyebrow {
+.eyebrow,
+.brand-kicker,
+.header-kicker {
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: var(--accent-deep);
+  color: var(--accent-strong);
   font-size: 12px;
 }
 
@@ -92,13 +132,13 @@ textarea {
 
 .subcopy {
   max-width: 560px;
-  line-height: 1.6;
+  line-height: 1.7;
   color: var(--muted);
 }
 
 .form-stack {
   display: grid;
-  gap: 14px;
+  gap: 16px;
   margin-top: 20px;
 }
 
@@ -106,21 +146,36 @@ textarea {
   display: grid;
   gap: 8px;
   color: var(--muted);
+  font-size: 14px;
 }
 
 .field-label input,
 .field-label select,
-.field-label textarea {
+.field-label textarea,
+.prompt-editor,
+.library-search input {
   width: 100%;
   padding: 14px 16px;
-  border: 1px solid rgba(19, 34, 56, 0.16);
+  border: 1px solid var(--line);
   border-radius: 16px;
-  background: rgba(255, 255, 255, 0.9);
+  color: var(--ink);
+  background: rgba(10, 14, 23, 0.88);
   outline: none;
+  transition: border-color 0.2s ease, background 0.2s ease;
 }
 
-.field-label textarea {
-  min-height: 120px;
+.field-label input:focus,
+.field-label select:focus,
+.field-label textarea:focus,
+.prompt-editor:focus,
+.library-search input:focus {
+  border-color: var(--line-strong);
+  background: rgba(16, 21, 33, 0.96);
+}
+
+.field-label textarea,
+.prompt-editor {
+  min-height: 150px;
   resize: vertical;
 }
 
@@ -135,23 +190,39 @@ textarea {
   justify-content: center;
   gap: 10px;
   cursor: pointer;
+  transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
+}
+
+.primary-button:hover,
+.ghost-button:hover,
+.danger-button:hover {
+  transform: translateY(-1px);
 }
 
 .primary-button {
-  background: linear-gradient(135deg, var(--accent) 0%, #f48f39 100%);
+  background: linear-gradient(135deg, #2f86ff 0%, #59c7ff 100%);
   color: white;
+  box-shadow: 0 16px 40px rgba(47, 134, 255, 0.28);
 }
 
 .ghost-button {
-  background: rgba(19, 34, 56, 0.06);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--line);
   color: var(--ink);
 }
 
 .danger-button {
-  background: rgba(182, 61, 61, 0.12);
+  background: rgba(240, 127, 127, 0.12);
+  border: 1px solid rgba(240, 127, 127, 0.22);
   color: var(--danger);
 }
 
+.compact-button {
+  min-height: 40px;
+  padding: 10px 14px;
+  font-size: 13px;
+}
+
 .shell-grid {
   min-height: 100vh;
   display: grid;
@@ -159,13 +230,25 @@ textarea {
 }
 
 .shell-sidebar {
-  padding: 24px;
+  padding: 28px 22px;
   border-right: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.54);
-  backdrop-filter: blur(14px);
+  background:
+    linear-gradient(180deg, rgba(14, 18, 29, 0.98) 0%, rgba(9, 12, 20, 0.98) 100%);
   display: flex;
   flex-direction: column;
   gap: 22px;
+  position: sticky;
+  top: 0;
+  min-height: 100vh;
+}
+
+.brand-block {
+  padding: 18px;
+  border-radius: 28px;
+  border: 1px solid rgba(127, 214, 255, 0.1);
+  background:
+    linear-gradient(145deg, rgba(27, 38, 61, 0.96) 0%, rgba(12, 17, 28, 0.98) 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
 .brand-block h1 {
@@ -174,12 +257,30 @@ textarea {
   font-family: var(--font-display), sans-serif;
 }
 
-.brand-kicker,
-.header-kicker {
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--accent-deep);
-  font-size: 12px;
+.brand-block p {
+  margin: 0;
+  line-height: 1.7;
+  color: var(--muted);
+}
+
+.brand-status {
+  margin-top: 18px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--ink);
+  font-size: 13px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--success);
+  box-shadow: 0 0 0 6px rgba(104, 211, 145, 0.12);
 }
 
 .sidebar-nav {
@@ -189,17 +290,35 @@ textarea {
 
 .nav-item {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 12px;
   padding: 14px 16px;
-  border-radius: 16px;
+  border-radius: 18px;
   color: var(--muted);
+  border: 1px solid transparent;
+  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
+}
+
+.nav-item svg {
+  margin-top: 2px;
+}
+
+.nav-item span {
+  display: block;
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.nav-item small {
+  display: block;
+  margin-top: 4px;
+  color: var(--muted);
+  line-height: 1.45;
 }
 
 .nav-item.active {
-  background: linear-gradient(135deg, rgba(230, 106, 44, 0.12), rgba(53, 82, 74, 0.12));
-  color: var(--ink);
-  font-weight: 700;
+  background: linear-gradient(135deg, rgba(47, 134, 255, 0.16), rgba(89, 199, 255, 0.08));
+  border-color: rgba(127, 214, 255, 0.18);
 }
 
 .profile-card,
@@ -207,17 +326,39 @@ textarea {
 .stat-card,
 .pulse-card {
   border: 1px solid var(--line);
-  border-radius: 24px;
+  border-radius: 26px;
   background: var(--surface);
-  backdrop-filter: blur(12px);
-  box-shadow: 0 18px 60px rgba(19, 34, 56, 0.08);
+  backdrop-filter: blur(16px);
+  box-shadow: var(--shadow);
 }
 
 .profile-card {
   padding: 18px;
   margin-top: auto;
   display: grid;
-  gap: 14px;
+  gap: 16px;
+}
+
+.profile-card-main {
+  display: grid;
+  gap: 10px;
+}
+
+.profile-avatar {
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  border-radius: 18px;
+  background: linear-gradient(135deg, rgba(47, 134, 255, 0.28), rgba(89, 199, 255, 0.16));
+  border: 1px solid rgba(127, 214, 255, 0.16);
+  font-weight: 800;
+  letter-spacing: 0.06em;
+}
+
+.profile-avatar-large {
+  width: 64px;
+  height: 64px;
 }
 
 .profile-name {
@@ -241,34 +382,62 @@ textarea {
 }
 
 .shell-header h2 {
-  margin: 6px 0 0;
+  margin: 6px 0 8px;
   font-size: 34px;
   font-family: var(--font-display), sans-serif;
 }
 
+.shell-header-copy {
+  margin: 0;
+  max-width: 620px;
+  color: var(--muted);
+  line-height: 1.65;
+}
+
+.shell-header-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
 .header-chip {
   padding: 10px 14px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.76);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.05);
   border: 1px solid var(--line);
   color: var(--muted);
   font-size: 13px;
 }
 
+.header-chip-success {
+  color: #baf5cf;
+  background: rgba(104, 211, 145, 0.1);
+  border-color: rgba(104, 211, 145, 0.16);
+}
+
 .shell-content {
-  margin-top: 20px;
+  margin-top: 22px;
   display: grid;
   gap: 18px;
 }
 
 .panel,
-.stat-card {
+.stat-card,
+.pulse-card {
   padding: 22px;
 }
 
 .panel-grid,
 .stats-grid,
-.two-col-grid {
+.two-col-grid,
+.workbench-grid,
+.studio-summary-grid,
+.studio-control-grid,
+.media-slot-grid {
   display: grid;
   gap: 18px;
 }
@@ -285,10 +454,26 @@ textarea {
   grid-template-columns: 1.05fr 0.95fr;
 }
 
+.workbench-grid {
+  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
+  align-items: start;
+}
+
+.studio-summary-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.studio-control-grid,
+.media-slot-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .panel h3,
-.stat-card h3 {
-  margin: 0 0 14px;
-  font-size: 20px;
+.stat-card h3,
+.library-header h3,
+.workbench-header h3 {
+  margin: 0 0 12px;
+  font-size: 24px;
   font-family: var(--font-display), sans-serif;
 }
 
@@ -322,7 +507,7 @@ textarea {
   padding: 16px;
   border-radius: 18px;
   border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.78);
+  background: rgba(255, 255, 255, 0.04);
 }
 
 .list-item strong {
@@ -347,26 +532,27 @@ textarea {
 }
 
 .tone-soft {
-  background: rgba(19, 34, 56, 0.08);
+  background: rgba(151, 163, 187, 0.12);
+  color: #ced8ea;
 }
 
 .tone-success {
-  background: rgba(25, 135, 84, 0.12);
+  background: rgba(104, 211, 145, 0.14);
   color: var(--success);
 }
 
 .tone-warn {
-  background: rgba(194, 122, 17, 0.12);
+  background: rgba(240, 179, 84, 0.14);
   color: var(--warn);
 }
 
 .tone-danger {
-  background: rgba(182, 61, 61, 0.12);
+  background: rgba(240, 127, 127, 0.14);
   color: var(--danger);
 }
 
 .tone-ghost {
-  background: rgba(95, 105, 119, 0.12);
+  background: rgba(151, 163, 187, 0.08);
   color: var(--muted);
 }
 
@@ -374,29 +560,566 @@ textarea {
   width: 100%;
   border-radius: 18px;
   border: 1px solid var(--line);
-  background: #111827;
+  background: #06080c;
 }
 
 .code-block {
   margin: 0;
   padding: 16px;
   border-radius: 18px;
-  background: #101623;
+  background: #080b12;
+  border: 1px solid var(--line);
   color: #d7e1ff;
   overflow: auto;
   font-size: 13px;
 }
 
+.studio-panel,
+.library-panel,
+.asset-management-shell {
+  overflow: hidden;
+}
+
+.workbench-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.studio-stat {
+  padding: 18px;
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background: linear-gradient(160deg, rgba(31, 41, 64, 0.88), rgba(15, 20, 32, 0.94));
+}
+
+.studio-stat span,
+.studio-stat small {
+  display: block;
+}
+
+.studio-stat span,
+.mini-note {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.studio-stat strong {
+  display: block;
+  margin: 14px 0 10px;
+  font-size: 30px;
+  font-family: var(--font-display), sans-serif;
+}
+
+.control-block {
+  padding: 18px;
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.control-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.block-title {
+  font-weight: 800;
+  font-size: 15px;
+}
+
+.model-card-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.model-card {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  padding: 16px;
+  background: linear-gradient(160deg, rgba(12, 17, 28, 0.96), rgba(25, 34, 53, 0.88));
+  color: var(--ink);
+  text-align: left;
+  cursor: pointer;
+}
+
+.model-card.active {
+  border-color: rgba(127, 214, 255, 0.32);
+  background: linear-gradient(160deg, rgba(29, 63, 116, 0.92), rgba(18, 29, 52, 0.96));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.model-card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.model-card-head strong,
+.asset-card-title-row strong {
+  display: block;
+  font-size: 16px;
+}
+
+.model-card-head span {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.model-card p {
+  margin: 14px 0;
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.model-card-metrics {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.model-card-metrics span {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  color: #d4ebff;
+  font-size: 12px;
+}
+
+.prompt-editor {
+  min-height: 180px;
+}
+
+.segmented-group {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.segmented-button {
+  min-height: 40px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.segmented-button.active {
+  background: linear-gradient(135deg, rgba(47, 134, 255, 0.18), rgba(89, 199, 255, 0.12));
+  border-color: rgba(127, 214, 255, 0.22);
+  color: white;
+}
+
+.media-slot {
+  padding: 16px;
+  border-radius: 20px;
+  border: 1px solid var(--line);
+  background: rgba(8, 11, 18, 0.7);
+}
+
+.media-slot-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.media-slot-body {
+  margin-top: 14px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.selection-placeholder {
+  color: var(--muted);
+  line-height: 1.6;
+  font-size: 13px;
+}
+
+.selected-asset-chip {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  border: 1px solid rgba(127, 214, 255, 0.16);
+  border-radius: 14px;
+  padding: 10px 12px;
+  background: rgba(47, 134, 255, 0.08);
+  color: var(--ink);
+  cursor: pointer;
+  text-align: left;
+}
+
+.selected-asset-chip span,
+.selected-asset-chip small {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selected-asset-chip small {
+  color: var(--muted);
+}
+
+.text-button {
+  border: 0;
+  padding: 0;
+  background: none;
+  color: var(--accent-strong);
+  cursor: pointer;
+}
+
+.toggle-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 18px;
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.toggle-card input {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--accent);
+}
+
+.toggle-card span {
+  display: block;
+  font-weight: 700;
+}
+
+.toggle-card small {
+  display: block;
+  margin-top: 4px;
+  color: var(--muted);
+}
+
+.inline-feedback {
+  padding: 14px 16px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--line);
+  color: var(--muted);
+}
+
+.inline-feedback.is-success {
+  border-color: rgba(104, 211, 145, 0.18);
+  background: rgba(104, 211, 145, 0.08);
+  color: #c8f3d5;
+}
+
+.inline-feedback.is-error {
+  border-color: rgba(240, 127, 127, 0.18);
+  background: rgba(240, 127, 127, 0.08);
+  color: #ffd7d7;
+}
+
+.composer-footer {
+  display: grid;
+  gap: 14px;
+}
+
+.primary-button-wide {
+  width: 100%;
+}
+
+.library-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.workspace-tabs {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.tab-chip {
+  padding: 10px 14px;
+  border-radius: 14px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.tab-chip.active {
+  background: rgba(47, 134, 255, 0.16);
+  color: white;
+  border-color: rgba(127, 214, 255, 0.2);
+}
+
+.asset-upload-panel,
+.recent-task-strip {
+  margin-bottom: 18px;
+  padding: 18px;
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.upload-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  margin-top: 14px;
+}
+
+.file-picker {
+  min-height: 52px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px;
+  border-radius: 16px;
+  border: 1px dashed rgba(127, 214, 255, 0.22);
+  background: rgba(10, 14, 23, 0.7);
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.file-picker input {
+  display: none;
+}
+
+.file-picker span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.library-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 18px;
+  flex-wrap: wrap;
+}
+
+.library-search {
+  min-width: min(100%, 280px);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-left: 14px;
+  border-radius: 16px;
+  border: 1px solid var(--line);
+  background: rgba(10, 14, 23, 0.8);
+}
+
+.library-search input {
+  border: 0;
+  background: transparent;
+}
+
+.asset-gallery {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.asset-library-card {
+  overflow: hidden;
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background: linear-gradient(160deg, rgba(12, 17, 28, 0.96), rgba(18, 24, 36, 0.92));
+}
+
+.asset-library-card.selected {
+  border-color: rgba(127, 214, 255, 0.26);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.asset-thumb {
+  position: relative;
+  height: 152px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.asset-thumb-image {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.asset-thumb-video video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.asset-thumb-audio {
+  gap: 10px;
+  color: var(--accent-strong);
+  background:
+    radial-gradient(circle at top, rgba(47, 134, 255, 0.2), transparent 52%),
+    rgba(8, 11, 18, 0.96);
+}
+
+.asset-media-badge {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(9, 12, 20, 0.8);
+  border: 1px solid rgba(127, 214, 255, 0.18);
+  font-size: 12px;
+}
+
+.asset-card-body {
+  padding: 16px;
+}
+
+.asset-card-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.asset-card-title-row strong {
+  margin: 0;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.asset-card-meta {
+  margin-top: 8px;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.asset-selected-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #c7eeff;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.recent-task-strip h4 {
+  margin: 0 0 8px;
+  font-size: 18px;
+}
+
+.compact-list {
+  margin-top: 14px;
+}
+
+.task-mini-card {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.task-mini-meta {
+  display: flex;
+  gap: 14px;
+  flex-wrap: wrap;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.task-mini-meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.empty-state {
+  padding: 24px;
+  border-radius: 18px;
+  border: 1px dashed rgba(151, 163, 187, 0.2);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--muted);
+  text-align: center;
+}
+
+.profile-overview-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+@media (max-width: 1320px) {
+  .workbench-grid,
+  .two-col-grid,
+  .studio-control-grid,
+  .media-slot-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .studio-summary-grid {
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  }
+}
+
 @media (max-width: 1100px) {
   .auth-grid,
-  .shell-grid,
-  .two-col-grid {
+  .shell-grid {
     grid-template-columns: 1fr;
   }
 
   .shell-sidebar {
+    position: static;
+    min-height: auto;
     border-right: 0;
     border-bottom: 1px solid var(--line);
   }
+
+  .shell-main {
+    padding: 18px;
+  }
 }
 
+@media (max-width: 720px) {
+  .auth-hero,
+  .shell-sidebar,
+  .shell-main,
+  .panel,
+  .stat-card,
+  .pulse-card {
+    padding: 18px;
+  }
+
+  .workbench-header,
+  .library-header,
+  .shell-header {
+    flex-direction: column;
+  }
+
+  .upload-row {
+    grid-template-columns: 1fr;
+  }
+
+  .asset-gallery {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/frontend-web/src/app/layout.tsx b/frontend-web/src/app/layout.tsx
index 7f135af..ad039f0 100644
--- a/frontend-web/src/app/layout.tsx
+++ b/frontend-web/src/app/layout.tsx
@@ -1,20 +1,9 @@
 import type { Metadata } from "next";
-import { Manrope, Space_Grotesk } from "next/font/google";
 
 import { Providers } from "@/components/providers";
 
 import "./globals.css";
 
-const displayFont = Space_Grotesk({
-  subsets: ["latin"],
-  variable: "--font-display",
-});
-
-const bodyFont = Manrope({
-  subsets: ["latin"],
-  variable: "--font-body",
-});
-
 export const metadata: Metadata = {
   title: "AIVideo",
   description: "AI 视频生成平台用户前台",
@@ -27,10 +16,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="zh-CN">
-      <body className={`${displayFont.variable} ${bodyFont.variable}`}>
+      <body className="app-fonts">
         <Providers>{children}</Providers>
       </body>
     </html>
   );
 }
-
diff --git a/frontend-web/src/components/site-shell.tsx b/frontend-web/src/components/site-shell.tsx
index 7ba7bc6..b570cfc 100644
--- a/frontend-web/src/components/site-shell.tsx
+++ b/frontend-web/src/components/site-shell.tsx
@@ -3,6 +3,7 @@
 import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
 import {
+  Activity,
   Coins,
   FolderKanban,
   ImagePlus,
@@ -20,16 +21,60 @@ import { api } from "@/lib/api";
 import type { UserProfile } from "@/lib/types";
 
 const navigation = [
-  { href: "/workspace/create", label: "创建任务", icon: Sparkles },
-  { href: "/workspace/tasks", label: "任务记录", icon: FolderKanban },
-  { href: "/workspace/assets", label: "素材管理", icon: ImagePlus },
-  { href: "/wallet", label: "钱包概览", icon: Coins },
-  { href: "/wallet/recharge", label: "充值中心", icon: Coins },
-  { href: "/wallet/redeem", label: "兑换密钥", icon: Ticket },
-  { href: "/invite", label: "邀请中心", icon: Users },
-  { href: "/profile", label: "个人资料", icon: UserRound },
+  {
+    href: "/workspace/create",
+    label: "工作台",
+    description: "生成参数、提示词与素材联动",
+    icon: Sparkles,
+  },
+  {
+    href: "/workspace/tasks",
+    label: "任务记录",
+    description: "查看队列、状态轮询与结果视频",
+    icon: FolderKanban,
+  },
+  {
+    href: "/workspace/assets",
+    label: "素材管理",
+    description: "上传图片、视频和音频素材",
+    icon: ImagePlus,
+  },
+  {
+    href: "/wallet",
+    label: "钱包概览",
+    description: "查看可用积分和冻结明细",
+    icon: Coins,
+  },
+  {
+    href: "/wallet/recharge",
+    label: "充值中心",
+    description: "采购积分，补足生产额度",
+    icon: Coins,
+  },
+  {
+    href: "/wallet/redeem",
+    label: "兑换密钥",
+    description: "使用兑换码快速充值",
+    icon: Ticket,
+  },
+  {
+    href: "/invite",
+    label: "邀请中心",
+    description: "管理关系链与推广奖励",
+    icon: Users,
+  },
+  {
+    href: "/profile",
+    label: "个人资料",
+    description: "维护账户信息与展示名",
+    icon: UserRound,
+  },
 ];
 
+function matchesPath(pathname: string, href: string) {
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
 export function SiteShell({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const router = useRouter();
@@ -45,8 +90,10 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
   }, [error, router]);
 
   const title = useMemo(() => {
-    const current = navigation.find((item) => pathname.startsWith(item.href));
-    return current?.label ?? "AIVideo";
+    const current = [...navigation]
+      .sort((left, right) => right.href.length - left.href.length)
+      .find((item) => matchesPath(pathname, item.href));
+    return current ?? navigation[0];
   }, [pathname]);
 
   if (isLoading || !data) {
@@ -61,9 +108,13 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
     <div className="shell-grid">
       <aside className="shell-sidebar">
         <div className="brand-block">
-          <span className="brand-kicker">AI VIDEO PLATFORM</span>
+          <span className="brand-kicker">AI VIDEO STUDIO</span>
           <h1>AIVideo</h1>
-          <p>把文生视频、图生视频、充值结算和模型路由放进一个工作台。</p>
+          <p>把模型路由、素材管理和任务轮询收进一个暗色工作台，专门给创作流程用。</p>
+          <div className="brand-status">
+            <span className="status-dot" />
+            创作链路在线
+          </div>
         </div>
 
         <nav className="sidebar-nav">
@@ -74,18 +125,26 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
                 key={item.href}
                 href={item.href}
                 className={clsx("nav-item", {
-                  active: pathname.startsWith(item.href),
+                  active: title.href === item.href,
                 })}
               >
                 <Icon size={18} />
-                <span>{item.label}</span>
+                <div>
+                  <span>{item.label}</span>
+                  <small>{item.description}</small>
+                </div>
               </Link>
             );
           })}
         </nav>
 
         <div className="profile-card">
-          <div>
+          <div className="profile-card-main">
+            <div className="profile-avatar">
+              {(data.nickname || data.username || "AI")
+                .slice(0, 2)
+                .toUpperCase()}
+            </div>
             <div className="profile-name">{data.nickname || data.username}</div>
             <div className="profile-meta">{data.email}</div>
           </div>
@@ -105,14 +164,20 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
       <main className="shell-main">
         <header className="shell-header">
           <div>
-            <div className="header-kicker">Creative Ops</div>
-            <h2>{title}</h2>
+            <div className="header-kicker">Creative Ops Console</div>
+            <h2>{title.label}</h2>
+            <p className="shell-header-copy">{title.description}</p>
+          </div>
+          <div className="shell-header-meta">
+            <div className="header-chip header-chip-success">
+              <Activity size={14} />
+              会话正常
+            </div>
+            <div className="header-chip">{data.publicId}</div>
           </div>
-          <div className="header-chip">{data.publicId}</div>
         </header>
         <section className="shell-content">{children}</section>
       </main>
     </div>
   );
 }
-
diff --git a/frontend-web/src/components/status-badge.tsx b/frontend-web/src/components/status-badge.tsx
index 660f6e6..00a97e7 100644
--- a/frontend-web/src/components/status-badge.tsx
+++ b/frontend-web/src/components/status-badge.tsx
@@ -14,6 +14,20 @@ const statusMap: Record<string, string> = {
   disabled: "danger",
 };
 
+const statusLabelMap: Record<string, string> = {
+  queued: "排队中",
+  submitted: "已提交",
+  running: "生成中",
+  succeeded: "已完成",
+  failed: "失败",
+  cancelled: "已取消",
+  pending: "待处理",
+  paid: "已支付",
+  unused: "未使用",
+  used: "已使用",
+  disabled: "已停用",
+};
+
 export function StatusBadge({ value }: { value: string }) {
   const tone = statusMap[value] ?? "soft";
   return (
@@ -26,8 +40,7 @@ export function StatusBadge({ value }: { value: string }) {
         "tone-ghost": tone === "ghost",
       })}
     >
-      {value}
+      {statusLabelMap[value] ?? value}
     </span>
   );
 }
-