From 95c16a4168791f2fc18e4cb63aa9f476c3218205 Mon Sep 17 00:00:00 2001
From: kvtodev <kvtodev@outlook.com>
Date: Mon, 13 Jul 2026 19:08:00 +0800
Subject: [PATCH 1/6] extract home view from App.tsx , rewrite style with
 tailwindcss

---
 apps/ai-game-creator-shell/package.json       |   2 +
 apps/ai-game-creator-shell/src/App.tsx        | 219 ++-------
 apps/ai-game-creator-shell/src/styles.css     | 416 +-----------------
 .../src/view/home/index.tsx                   | 307 +++++++++++++
 apps/ai-game-creator-shell/vite.config.ts     |   2 +
 5 files changed, 345 insertions(+), 601 deletions(-)
 create mode 100644 apps/ai-game-creator-shell/src/view/home/index.tsx

diff --git a/apps/ai-game-creator-shell/package.json b/apps/ai-game-creator-shell/package.json
index 74f901d6f..a646241ab 100644
--- a/apps/ai-game-creator-shell/package.json
+++ b/apps/ai-game-creator-shell/package.json
@@ -21,9 +21,11 @@
     "vite": "^6.2.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.1.14",
     "@tauri-apps/cli": "^2.11.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.14",
     "typescript": "~5.8.2"
   }
 }
diff --git a/apps/ai-game-creator-shell/src/App.tsx b/apps/ai-game-creator-shell/src/App.tsx
index e42f5e595..df134d4ff 100644
--- a/apps/ai-game-creator-shell/src/App.tsx
+++ b/apps/ai-game-creator-shell/src/App.tsx
@@ -23,14 +23,16 @@ import {
   Image,
   LogOut,
   MessageSquare,
-  Plus,
   Settings,
-  Sparkles,
-  Upload,
   User,
-  X,
   Zap,
 } from 'lucide-react';
+import HomeView, {
+  type HomeAgentMode,
+  type HomeAgentModeItem,
+  type HomeAttachmentDraft,
+  type HomeShowcaseResource,
+} from './view/home';
 
 import type {
   AuthEntryResponse,
@@ -105,13 +107,6 @@ type LauncherView =
   | 'contact'
   | 'news'
   | 'project-development';
-type HomeAgentMode = 'game' | 'art' | 'doc';
-
-type HomeAttachmentDraft = {
-  id: string;
-  file: File;
-};
-
 type LauncherImportedAttachment = {
   fileName: string;
   mediaType: string;
@@ -149,7 +144,7 @@ type PendingNonEmptyProject =
       projectPath: string;
     };
 
-type EditorShowcaseResource = {
+type EditorShowcaseResource = HomeShowcaseResource & {
   resourceId: string;
   showcaseId?: string | null;
   label?: string | null;
@@ -1267,13 +1262,7 @@ function listClientShowcaseResources() {
   );
 }
 
-const homeAgentModeItems: Array<{
-  mode: HomeAgentMode;
-  label: string;
-  placeholder: string;
-  emptyPrompt: string;
-  icon: typeof Gamepad2;
-}> = [
+const homeAgentModeItems: HomeAgentModeItem[] = [
   {
     mode: 'game',
     label: '做游戏',
@@ -3189,10 +3178,6 @@ export function WorkspaceLauncher({
   const recentProjectRows = projectRows
     .filter((project) => project.canOpen)
     .slice(0, 3);
-  const activeHomeMode =
-    homeAgentModeItems.find((item) => item.mode === homeAgentMode) ??
-    homeAgentModeItems[0]!;
-  const ActiveHomeModeIcon = activeHomeMode.icon;
   const currentAgentChatAgent = selectedLauncherAgentChatAgent();
   const currentAgentChatLlmWarning = getCurrentAgentChatLlmWarning(
     currentAgentChatAgent,
@@ -3407,171 +3392,29 @@ export function WorkspaceLauncher({
         </div>
 
         {launcherView === 'home' ? (
-          <>
-            <section className="launcher-hero" aria-label="首页输入">
-              <div className="launcher-hero-title">
-                <span className="launcher-hero-logo">
-                  <ActiveHomeModeIcon size={18} aria-hidden="true" />
-                </span>
-                <div>
-                  <h1>陶泥儿 GameAgent</h1>
-                  <p>{activeHomeMode.placeholder}</p>
-                </div>
-              </div>
-              <div className="launcher-model-pills" aria-label="Agent 分类">
-                {homeAgentModeItems.map((item) => {
-                  const ModeIcon = item.icon;
-                  return (
-                    <button
-                      type="button"
-                      key={item.mode}
-                      className={
-                        item.mode === homeAgentMode
-                          ? 'launcher-pill-active'
-                          : ''
-                      }
-                      onClick={() => setHomeAgentMode(item.mode)}
-                    >
-                      <ModeIcon size={14} aria-hidden="true" />
-                      {item.label}
-                    </button>
-                  );
-                })}
-              </div>
-              <form className="launcher-prompt-card" onSubmit={handleHomeSubmit}>
-                <textarea
-                  aria-label="创作想法"
-                  placeholder={activeHomeMode.placeholder}
-                  value={homePrompt}
-                  onChange={(event) => setHomePrompt(event.currentTarget.value)}
-                />
-                {homeAttachments.length > 0 ? (
-                  <div className="launcher-attachment-queue" aria-label="附件队列">
-                    {homeAttachments.map((attachment) => (
-                      <span key={attachment.id}>
-                        {attachment.file.name}
-                        <button
-                          type="button"
-                          aria-label={`移除附件 ${attachment.file.name}`}
-                          onClick={() => removeHomeAttachment(attachment.id)}
-                        >
-                          <X size={12} aria-hidden="true" />
-                        </button>
-                      </span>
-                    ))}
-                  </div>
-                ) : null}
-                <div className="launcher-prompt-actions">
-                  <input
-                    ref={homeAttachmentInputRef}
-                    className="launcher-file-input"
-                    type="file"
-                    multiple
-                    onChange={handleHomeAttachmentSelection}
-                  />
-                  <button
-                    type="button"
-                    aria-label="上传素材"
-                    onClick={() => homeAttachmentInputRef.current?.click()}
-                  >
-                    <Upload size={15} aria-hidden="true" />
-                  </button>
-                  <span>{status}</span>
-                  <button
-                    type="submit"
-                    aria-label="开启创作"
-                    disabled={homeCreationBusy}
-                  >
-                    <Plus size={16} aria-hidden="true" />
-                  </button>
-                </div>
-              </form>
-            </section>
-
-            <section className="launcher-project-list" aria-label="最近项目">
-              <header>
-                <div>
-                  <h2>最近项目</h2>
-                  <p className="launcher-project-status">{status}</p>
-                </div>
-                <div className="launcher-project-list-actions">
-                  <button
-                    type="button"
-                    onClick={() => setLauncherView('projects')}
-                  >
-                    查看全部 〉
-                  </button>
-                </div>
-              </header>
-              {recentProjectRows.length > 0 ? (
-                <div className="launcher-project-grid">
-                  {recentProjectRows.map((project) => (
-                    <article
-                      className="launcher-project-card"
-                      key={project.path}
-                    >
-                      <button
-                        type="button"
-                        className="launcher-project-card-main"
-                        disabled={!project.canOpen}
-                        onClick={() => {
-                          setProjectPath(project.path);
-                          void openProject(project.path, 'open');
-                        }}
-                      >
-                        <span>{project.name.slice(0, 2)}</span>
-                        <strong>{project.name}</strong>
-                        <small>{project.path}</small>
-                        <small>{project.status}</small>
-                      </button>
-                    </article>
-                  ))}
-                </div>
-              ) : (
-                <div className="launcher-project-list-empty">
-                  <FolderKanban size={22} aria-hidden="true" />
-                  <strong>暂无最近项目</strong>
-                  <button
-                    type="button"
-                    onClick={() => setLauncherView('projects')}
-                  >
-                    去项目组
-                  </button>
-                </div>
-              )}
-            </section>
-            <section className="launcher-showcase" aria-label="灵感推荐">
-              <header>
-                <div className="launcher-section-title">
-                  <span>
-                    <h2>灵感推荐</h2>
-                    <Sparkles size={15} aria-hidden="true" />
-                  </span>
-                  <p>{showcaseStatus}</p>
-                </div>
-              </header>
-              {showcaseResources.length > 0 ? (
-                <div className="launcher-showcase-grid">
-                  {showcaseResources.map((resource) => (
-                    <article key={resource.showcaseId ?? resource.resourceId}>
-                      <img
-                        src={resource.imageSrc}
-                        alt={resource.label || resource.prompt || '灵感素材'}
-                      />
-                      <strong>{resource.label || '未命名素材'}</strong>
-                      <small>
-                        {resource.authorDisplayName ||
-                          resource.authorPublicUserCode ||
-                          '陶泥儿精选'}
-                      </small>
-                    </article>
-                  ))}
-                </div>
-              ) : (
-                <div className="launcher-showcase-empty">{showcaseStatus}</div>
-              )}
-            </section>
-          </>
+          <HomeView
+            hasPromo={launcherNotifications.length > 0}
+            homeAgentMode={homeAgentMode}
+            homeAgentModeItems={homeAgentModeItems}
+            homePrompt={homePrompt}
+            homeAttachments={homeAttachments}
+            homeAttachmentInputRef={homeAttachmentInputRef}
+            homeCreationBusy={homeCreationBusy}
+            status={status}
+            recentProjectRows={recentProjectRows}
+            showcaseResources={showcaseResources}
+            showcaseStatus={showcaseStatus}
+            onHomeAgentModeChange={setHomeAgentMode}
+            onHomePromptChange={setHomePrompt}
+            onHomeAttachmentSelection={handleHomeAttachmentSelection}
+            onHomeAttachmentRemove={removeHomeAttachment}
+            onHomeSubmit={handleHomeSubmit}
+            onProjectsOpen={() => setLauncherView('projects')}
+            onProjectOpen={(path) => {
+              setProjectPath(path);
+              void openProject(path, 'open');
+            }}
+          />
         ) : launcherView === 'projects' ? (
           <section className="launcher-page launcher-projects-page">
             <header>
diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index 128f74870..b6478a1b1 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -1,3 +1,5 @@
+@import 'tailwindcss';
+
 :root {
   color: #18202f;
   background: #f5f7fb;
@@ -196,11 +198,8 @@ textarea {
 }
 
 .launcher-sidebar button,
-.launcher-project-list button,
 .launcher-promo button,
-.launcher-account-bar button,
-.launcher-prompt-card button,
-.launcher-model-pills button {
+.launcher-account-bar button {
   border: 0;
   cursor: pointer;
 }
@@ -466,281 +465,12 @@ textarea {
   font-weight: 700;
 }
 
-.launcher-hero {
-  display: grid;
-  align-content: start;
-  justify-items: center;
-  gap: 13px;
-  min-height: 374px;
-  padding: 103px 24px 18px;
-}
-
-.launcher-main-with-promo .launcher-hero {
-  padding-top: 135px;
-}
-
-.launcher-hero-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  text-align: center;
-}
-
-.launcher-hero-logo {
-  display: grid;
-  width: 30px;
-  height: 30px;
-  flex: 0 0 auto;
-  border-radius: 50%;
-  background: #060606;
-  color: #fff;
-  font-size: 11px;
-  font-weight: 700;
-  place-items: center;
-}
-
-.launcher-hero-title h1 {
-  margin: 0;
-  font-size: 27px;
-  font-weight: 750;
-  letter-spacing: 0;
-}
-
-.launcher-hero-title p {
-  margin-top: 12px;
-  color: #a0a0a0;
-  font-size: 13px;
-}
-
-.launcher-prompt-card {
-  display: grid;
-  grid-template-rows: minmax(42px, auto) auto auto;
-  width: min(488px, calc(100vw - 110px));
-  min-height: 80px;
-  padding: 13px 12px 8px;
-  border: 1px solid #e1e4e8;
-  border-radius: 18px;
-  background: #fff;
-  box-shadow: 0 8px 24px rgb(15 23 42 / 8%);
-}
-
-.launcher-prompt-card textarea {
-  width: 100%;
-  min-height: 36px;
-  padding: 0;
-  resize: none;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: #171717;
-  font-size: 13px;
-}
-
-.launcher-attachment-queue {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 8px 0 4px;
-}
-
-.launcher-attachment-queue span {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  max-width: 100%;
-  min-height: 24px;
-  padding: 0 7px;
-  border: 1px solid #e5e7eb;
-  border-radius: 7px;
-  background: #f8fafc;
-  color: #374151;
-  font-size: 11px;
-}
-
-.launcher-attachment-queue button {
-  width: 18px;
-  height: 18px;
-  color: #6b7280;
-}
-
-.launcher-file-input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.launcher-prompt-card textarea::placeholder {
-  color: #bababa;
-}
-
-.launcher-prompt-actions {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 10px;
-  color: #777;
-  font-size: 12px;
-}
-
-.launcher-prompt-actions button {
-  display: grid;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border-radius: 50%;
-  background: transparent;
-  color: #666;
-  place-items: center;
-}
-
-.launcher-prompt-actions button:last-child {
-  background: #f1f1f1;
-  color: #9a9a9a;
-}
-
-.launcher-prompt-actions button:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.launcher-model-pills {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 9px;
-  width: min(488px, calc(100vw - 110px));
-}
-
-.launcher-model-pills button {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  min-height: 27px;
-  padding: 0 12px;
-  border: 1px solid #d6d6d6;
-  border-radius: 999px;
-  background: #fff;
-  color: #333;
-  font-size: 12px;
-}
-
-.launcher-model-pills .launcher-pill-active {
-  border-color: #8b5cf6;
-  background: #f8f2ff;
-  color: #7c3aed;
-}
-
-.launcher-project-list {
-  display: grid;
-  gap: 14px;
-  width: min(1054px, calc(100vw - 122px));
-  margin: 0 auto;
-}
-
-.launcher-project-list header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.launcher-project-list h2 {
-  margin: 0;
-  color: #111827;
-  font-size: 15px;
-}
-
-.launcher-project-status {
-  margin: 4px 0 0;
-  color: #8b8b8b;
-  font-size: 12px;
-}
-
-.launcher-project-list header button,
-.launcher-project-list-empty > button {
-  padding: 0;
-  background: transparent;
-  color: #888;
-  font-size: 12px;
-}
-
 .launcher-project-list-actions {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
-.launcher-project-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 12px;
-  overflow: hidden;
-}
-
-.launcher-project-card {
-  display: grid;
-  min-width: 0;
-}
-
-.launcher-project-card > div,
-.launcher-project-card > button {
-  position: relative;
-  height: 116px;
-  width: 100%;
-  overflow: hidden;
-  border: 1px solid #e1e4e8;
-  border-radius: 8px;
-  background: #f7f7f7;
-  cursor: pointer;
-}
-
-.launcher-project-card-main {
-  display: grid;
-  align-content: start;
-  justify-items: start;
-  gap: 6px;
-  padding: 12px;
-  text-align: left;
-}
-
-.launcher-project-card-main:disabled {
-  cursor: not-allowed;
-  opacity: 0.58;
-}
-
-.launcher-project-card-main > span {
-  display: grid;
-  width: 42px;
-  height: 42px;
-  border-radius: 12px;
-  background: #fff;
-  color: #f26d2d;
-  font-size: 16px;
-  font-weight: 700;
-  place-items: center;
-}
-
-.launcher-project-card strong {
-  min-width: 0;
-  color: #111;
-  font-size: 12px;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.launcher-project-card small {
-  margin-top: -5px;
-  color: #8b8b8b;
-  font-size: 11px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .launcher-project-create > button {
   display: grid;
   border-style: dashed;
@@ -766,96 +496,6 @@ textarea {
   box-shadow: 0 8px 22px rgb(242 109 45 / 16%);
 }
 
-.launcher-showcase {
-  display: grid;
-  gap: 14px;
-  width: min(1054px, calc(100vw - 122px));
-  margin: 22px auto 0;
-}
-
-.launcher-showcase header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 12px;
-}
-
-.launcher-section-title {
-  display: grid;
-  gap: 4px;
-}
-
-.launcher-section-title span {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.launcher-showcase h2 {
-  margin: 0;
-  color: #111827;
-  font-size: 15px;
-}
-
-.launcher-showcase p {
-  margin: 4px 0 0;
-  color: #8b8b8b;
-  font-size: 12px;
-}
-
-.launcher-showcase-grid {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.launcher-showcase-grid article,
-.launcher-showcase-empty {
-  overflow: hidden;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  background: #fff;
-}
-
-.launcher-showcase-grid article {
-  display: grid;
-  gap: 7px;
-  padding-bottom: 10px;
-}
-
-.launcher-showcase-grid img {
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  object-fit: cover;
-  background: #f3f4f6;
-}
-
-.launcher-showcase-grid strong,
-.launcher-showcase-grid small {
-  min-width: 0;
-  padding: 0 9px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.launcher-showcase-grid strong {
-  color: #111827;
-  font-size: 12px;
-}
-
-.launcher-showcase-grid small,
-.launcher-showcase-empty {
-  color: #6b7280;
-  font-size: 11px;
-}
-
-.launcher-showcase-empty {
-  display: grid;
-  min-height: 96px;
-  place-items: center;
-}
-
 .launcher-page {
   display: grid;
   gap: 22px;
@@ -910,18 +550,6 @@ textarea {
   font-size: 12px;
 }
 
-.launcher-project-list-empty {
-  display: grid;
-  justify-items: center;
-  gap: 10px;
-  padding: 18px 0 32px;
-}
-
-.launcher-project-list-empty h2 {
-  color: #111827;
-  font-size: 16px;
-}
-
 .launcher-project-form input {
   min-width: 0;
   height: 34px;
@@ -1467,52 +1095,14 @@ textarea {
     white-space: nowrap;
   }
 
-  .launcher-hero {
-    align-content: start;
-    gap: 16px;
-    min-height: auto;
-    padding: 84px 14px 34px;
-  }
-
-  .launcher-main-with-promo .launcher-hero {
-    padding-top: 84px;
-  }
-
-  .launcher-hero-title {
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .launcher-hero-title h1 {
-    font-size: 22px;
-  }
-
-  .launcher-prompt-card,
-  .launcher-model-pills,
-  .launcher-project-list {
-    width: min(100%, calc(100vw - 76px));
-  }
-
-  .launcher-project-grid {
-    grid-template-columns: 1fr;
-    overflow: visible;
-  }
-
   .launcher-project-form {
     grid-template-columns: 1fr;
   }
 
-  .launcher-project-card > div,
-  .launcher-project-card > button {
-    height: 132px;
-  }
-
-  .launcher-showcase,
   .launcher-page {
     width: min(100%, calc(100vw - 76px));
   }
 
-  .launcher-showcase-grid,
   .launcher-development-grid {
     grid-template-columns: 1fr;
   }
diff --git a/apps/ai-game-creator-shell/src/view/home/index.tsx b/apps/ai-game-creator-shell/src/view/home/index.tsx
new file mode 100644
index 000000000..2240a5488
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/view/home/index.tsx
@@ -0,0 +1,307 @@
+import {
+  FolderKanban,
+  type LucideIcon,
+  Plus,
+  Sparkles,
+  Upload,
+  X,
+} from 'lucide-react';
+import type {
+  ChangeEventHandler,
+  FormEventHandler,
+  RefObject,
+} from 'react';
+
+export type HomeAgentMode = 'game' | 'art' | 'doc';
+
+export type HomeAttachmentDraft = {
+  id: string;
+  file: File;
+};
+
+export type HomeAgentModeItem = {
+  mode: HomeAgentMode;
+  label: string;
+  placeholder: string;
+  emptyPrompt: string;
+  icon: LucideIcon;
+};
+
+export type HomeProjectRow = {
+  path: string;
+  name: string;
+  status: string;
+  canOpen: boolean;
+};
+
+export type HomeShowcaseResource = {
+  resourceId: string;
+  showcaseId?: string | null;
+  label?: string | null;
+  imageSrc: string;
+  prompt?: string | null;
+  authorDisplayName?: string | null;
+  authorPublicUserCode?: string | null;
+};
+
+type HomeViewProps = {
+  hasPromo: boolean;
+  homeAgentMode: HomeAgentMode;
+  homeAgentModeItems: readonly HomeAgentModeItem[];
+  homePrompt: string;
+  homeAttachments: readonly HomeAttachmentDraft[];
+  homeAttachmentInputRef: RefObject<HTMLInputElement | null>;
+  homeCreationBusy: boolean;
+  status: string;
+  recentProjectRows: readonly HomeProjectRow[];
+  showcaseResources: readonly HomeShowcaseResource[];
+  showcaseStatus: string;
+  onHomeAgentModeChange: (mode: HomeAgentMode) => void;
+  onHomePromptChange: (value: string) => void;
+  onHomeAttachmentSelection: ChangeEventHandler<HTMLInputElement>;
+  onHomeAttachmentRemove: (attachmentId: string) => void;
+  onHomeSubmit: FormEventHandler<HTMLFormElement>;
+  onProjectsOpen: () => void;
+  onProjectOpen: (path: string) => void;
+};
+
+export default function HomeView({
+  hasPromo,
+  homeAgentMode,
+  homeAgentModeItems,
+  homePrompt,
+  homeAttachments,
+  homeAttachmentInputRef,
+  homeCreationBusy,
+  status,
+  recentProjectRows,
+  showcaseResources,
+  showcaseStatus,
+  onHomeAgentModeChange,
+  onHomePromptChange,
+  onHomeAttachmentSelection,
+  onHomeAttachmentRemove,
+  onHomeSubmit,
+  onProjectsOpen,
+  onProjectOpen,
+}: HomeViewProps) {
+  const activeHomeMode =
+    homeAgentModeItems.find((item) => item.mode === homeAgentMode) ??
+    homeAgentModeItems[0];
+
+  if (!activeHomeMode) {
+    return null;
+  }
+
+  const ActiveHomeModeIcon = activeHomeMode.icon;
+
+  return (
+    <>
+      <section
+        className={`grid min-h-93.5 content-start justify-items-center gap-3.25 px-6 pb-4.5 pt-25.75 max-[720px]:min-h-0 max-[720px]:gap-4 max-[720px]:px-3.5 max-[720px]:pb-[34px] max-[720px]:pt-[84px] ${
+          hasPromo ? 'pt-33.75 max-[720px]:pt-21' : ''
+        }`}
+        aria-label="首页输入"
+      >
+        <div className="flex items-center gap-3 text-center max-[720px]:flex-col max-[720px]:gap-2.5">
+          <span className="grid size-7.5 shrink-0 place-items-center rounded-full bg-[#060606] text-[11px] font-bold text-white">
+            <ActiveHomeModeIcon size={18} aria-hidden="true" />
+          </span>
+          <div>
+            <h1 className="m-0 text-[27px] font-[750] tracking-normal max-[720px]:text-[22px]">
+              陶泥儿 GameAgent
+            </h1>
+            <p className="m-0 mt-3 text-[13px] text-[#a0a0a0]">
+              {activeHomeMode.placeholder}
+            </p>
+          </div>
+        </div>
+        <div
+          className="flex w-[min(488px,calc(100vw-110px))] flex-wrap justify-center gap-[9px] max-[720px]:w-[min(100%,calc(100vw-76px))]"
+          aria-label="Agent 分类"
+        >
+          {homeAgentModeItems.map((item) => {
+            const ModeIcon = item.icon;
+            const isActive = item.mode === homeAgentMode;
+            return (
+              <button
+                type="button"
+                key={item.mode}
+                className={`inline-flex min-h-6.75 items-center gap-1.25 rounded-full border px-3 text-[12px] ${
+                  isActive
+                    ? 'border-violet-500 bg-[#f8f2ff] text-violet-600'
+                    : 'border-[#d6d6d6] bg-white text-[#333]'
+                }`}
+                onClick={() => onHomeAgentModeChange(item.mode)}
+              >
+                <ModeIcon size={14} aria-hidden="true" />
+                {item.label}
+              </button>
+            );
+          })}
+        </div>
+        <form
+          className="grid min-h-20 w-[min(488px,calc(100vw-110px))] grid-rows-[minmax(42px,auto)_auto_auto] rounded-[18px] border border-[#e1e4e8] bg-white px-3 pb-2 pt-[13px] shadow-[0_8px_24px_rgb(15_23_42_/_8%)] max-[720px]:w-[min(100%,calc(100vw-76px))]"
+          onSubmit={onHomeSubmit}
+        >
+          <textarea
+            className="min-h-9 w-full resize-none border-0 bg-transparent p-0 text-[13px] text-[#171717] outline-0 placeholder:text-[#bababa]"
+            aria-label="创作想法"
+            placeholder={activeHomeMode.placeholder}
+            value={homePrompt}
+            onChange={(event) => onHomePromptChange(event.currentTarget.value)}
+          />
+          {homeAttachments.length > 0 ? (
+            <div className="flex flex-wrap gap-1.5 py-2 pb-1" aria-label="附件队列">
+              {homeAttachments.map((attachment) => (
+                <span
+                  className="inline-flex min-h-6 max-w-full items-center gap-1 rounded-[7px] border border-gray-200 bg-slate-50 px-[7px] text-[11px] text-gray-700"
+                  key={attachment.id}
+                >
+                  {attachment.file.name}
+                  <button
+                    className="size-[18px] cursor-pointer border-0 bg-transparent p-0 text-gray-500"
+                    type="button"
+                    aria-label={`移除附件 ${attachment.file.name}`}
+                    onClick={() => onHomeAttachmentRemove(attachment.id)}
+                  >
+                    <X size={12} aria-hidden="true" />
+                  </button>
+                </span>
+              ))}
+            </div>
+          ) : null}
+          <div className="grid grid-cols-[auto_1fr_auto] items-center gap-2.5 text-[12px] text-[#777]">
+            <input
+              ref={homeAttachmentInputRef}
+              className="pointer-events-none absolute size-px opacity-0"
+              type="file"
+              multiple
+              onChange={onHomeAttachmentSelection}
+            />
+            <button
+              className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-[#666]"
+              type="button"
+              aria-label="上传素材"
+              onClick={() => homeAttachmentInputRef.current?.click()}
+            >
+              <Upload size={15} aria-hidden="true" />
+            </button>
+            <span>{status}</span>
+            <button
+              className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-[#f1f1f1] p-0 text-[#9a9a9a] disabled:cursor-not-allowed disabled:opacity-55"
+              type="submit"
+              aria-label="开启创作"
+              disabled={homeCreationBusy}
+            >
+              <Plus size={16} aria-hidden="true" />
+            </button>
+          </div>
+        </form>
+      </section>
+
+      <section
+        className="mx-auto grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[720px]:w-[min(100%,calc(100vw-76px))]"
+        aria-label="最近项目"
+      >
+        <header className="flex items-center justify-between gap-3">
+          <div>
+            <h2 className="m-0 text-[15px] text-gray-900">最近项目</h2>
+            <p className="mb-0 mt-1 text-[12px] text-[#8b8b8b]">{status}</p>
+          </div>
+          <div className="launcher-project-list-actions">
+            <button
+              className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-[#888]"
+              type="button"
+              onClick={onProjectsOpen}
+            >
+              查看全部 〉
+            </button>
+          </div>
+        </header>
+        {recentProjectRows.length > 0 ? (
+          <div className="grid grid-cols-5 gap-3 overflow-hidden max-[720px]:grid-cols-1 max-[720px]:overflow-visible">
+            {recentProjectRows.map((project) => (
+              <article className="grid min-w-0" key={project.path}>
+                <button
+                  className="grid h-[116px] w-full cursor-pointer content-start justify-items-start gap-1.5 overflow-hidden rounded-lg border border-[#e1e4e8] bg-[#f7f7f7] p-3 text-left disabled:cursor-not-allowed disabled:opacity-[0.58] max-[720px]:h-[132px]"
+                  type="button"
+                  disabled={!project.canOpen}
+                  onClick={() => onProjectOpen(project.path)}
+                >
+                  <span className="grid size-[42px] place-items-center rounded-xl bg-white text-[16px] font-bold text-[#f26d2d]">
+                    {project.name.slice(0, 2)}
+                  </span>
+                  <strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium text-[#111]">
+                    {project.name}
+                  </strong>
+                  <small className="-mt-[5px] min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-[#8b8b8b]">
+                    {project.path}
+                  </small>
+                  <small className="-mt-[5px] min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[11px] text-[#8b8b8b]">
+                    {project.status}
+                  </small>
+                </button>
+              </article>
+            ))}
+          </div>
+        ) : (
+          <div className="grid justify-items-center gap-2.5 px-0 pb-8 pt-[18px]">
+            <FolderKanban size={22} aria-hidden="true" />
+            <strong>暂无最近项目</strong>
+            <button
+              className="cursor-pointer border-0 bg-transparent p-0 text-[12px] text-[#888]"
+              type="button"
+              onClick={onProjectsOpen}
+            >
+              去项目组
+            </button>
+          </div>
+        )}
+      </section>
+
+      <section
+        className="mx-auto mt-[22px] grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[720px]:w-[min(100%,calc(100vw-76px))]"
+        aria-label="灵感推荐"
+      >
+        <header className="flex items-center justify-start gap-3">
+          <div className="grid gap-1">
+            <span className="inline-flex items-center gap-1.5">
+              <h2 className="m-0 text-[15px] text-gray-900">灵感推荐</h2>
+              <Sparkles size={15} aria-hidden="true" />
+            </span>
+            <p className="mb-0 mt-1 text-[12px] text-[#8b8b8b]">{showcaseStatus}</p>
+          </div>
+        </header>
+        {showcaseResources.length > 0 ? (
+          <div className="grid grid-cols-6 gap-3 max-[720px]:grid-cols-1">
+            {showcaseResources.map((resource) => (
+              <article
+                className="grid gap-[7px] overflow-hidden rounded-lg border border-gray-200 bg-white pb-2.5"
+                key={resource.showcaseId ?? resource.resourceId}
+              >
+                <img
+                  className="aspect-square w-full object-cover bg-gray-100"
+                  src={resource.imageSrc}
+                  alt={resource.label || resource.prompt || '灵感素材'}
+                />
+                <strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-[9px] text-[12px] text-gray-900">
+                  {resource.label || '未命名素材'}
+                </strong>
+                <small className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap px-[9px] text-[11px] text-gray-500">
+                  {resource.authorDisplayName ||
+                    resource.authorPublicUserCode ||
+                    '陶泥儿精选'}
+                </small>
+              </article>
+            ))}
+          </div>
+        ) : (
+          <div className="grid min-h-24 place-items-center overflow-hidden rounded-lg border border-gray-200 bg-white text-[11px] text-gray-500">
+            {showcaseStatus}
+          </div>
+        )}
+      </section>
+    </>
+  );
+}
diff --git a/apps/ai-game-creator-shell/vite.config.ts b/apps/ai-game-creator-shell/vite.config.ts
index 94caaba66..42b9392b4 100644
--- a/apps/ai-game-creator-shell/vite.config.ts
+++ b/apps/ai-game-creator-shell/vite.config.ts
@@ -2,6 +2,7 @@ import { existsSync, readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
@@ -41,6 +42,7 @@ const apiTarget = resolveDevApiTarget();
 export default defineConfig({
   root: appRoot,
   plugins: [
+    tailwindcss(),
     react(),
     {
       name: 'genarrative-ai-game-creator-dev-marker',
-- 
2.52.0


From d6f6bfc8b4fbc4f58d35bcfba7017bca375fd704 Mon Sep 17 00:00:00 2001
From: kvtodev <kvtodev@outlook.com>
Date: Mon, 13 Jul 2026 20:17:50 +0800
Subject: [PATCH 2/6] reorganize prop and state

---
 apps/ai-game-creator-shell/package.json       |   3 +-
 apps/ai-game-creator-shell/src/App.tsx        | 244 +++++-------------
 .../src/services/clientApi.ts                 | 152 +++++++++++
 .../src/stores/useHomeDraftStore.ts           |  44 ++++
 .../src/view/home/index.tsx                   | 126 ++++++---
 .../src/view/home/useHomeShowcase.ts          |  35 +++
 6 files changed, 384 insertions(+), 220 deletions(-)
 create mode 100644 apps/ai-game-creator-shell/src/services/clientApi.ts
 create mode 100644 apps/ai-game-creator-shell/src/stores/useHomeDraftStore.ts
 create mode 100644 apps/ai-game-creator-shell/src/view/home/useHomeShowcase.ts

diff --git a/apps/ai-game-creator-shell/package.json b/apps/ai-game-creator-shell/package.json
index a646241ab..4d7563c1a 100644
--- a/apps/ai-game-creator-shell/package.json
+++ b/apps/ai-game-creator-shell/package.json
@@ -18,7 +18,8 @@
     "lucide-react": "^0.546.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "zustand": "^5.0.14"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.14",
diff --git a/apps/ai-game-creator-shell/src/App.tsx b/apps/ai-game-creator-shell/src/App.tsx
index df134d4ff..907962747 100644
--- a/apps/ai-game-creator-shell/src/App.tsx
+++ b/apps/ai-game-creator-shell/src/App.tsx
@@ -28,11 +28,16 @@ import {
   Zap,
 } from 'lucide-react';
 import HomeView, {
+  type HomeDraft,
   type HomeAgentMode,
   type HomeAgentModeItem,
   type HomeAttachmentDraft,
-  type HomeShowcaseResource,
 } from './view/home';
+import { useLauncherHomeDraftStore } from './stores/useHomeDraftStore';
+import {
+  getClientProfileDashboard,
+  getClientProfileWalletLedger,
+} from './services/clientApi';
 
 import type {
   AuthEntryResponse,
@@ -51,7 +56,6 @@ import {
 import type {
   ProfileDashboardSummary,
   ProfileWalletLedgerEntry,
-  ProfileWalletLedgerResponse,
 } from '../../../packages/shared/src/contracts/runtime';
 import {
   createGameCreationAppManifest,
@@ -144,26 +148,6 @@ type PendingNonEmptyProject =
       projectPath: string;
     };
 
-type EditorShowcaseResource = HomeShowcaseResource & {
-  resourceId: string;
-  showcaseId?: string | null;
-  label?: string | null;
-  imageSrc: string;
-  width?: number;
-  height?: number;
-  prompt?: string | null;
-  actualPrompt?: string | null;
-  assetKind?: string | null;
-  authorDisplayName?: string | null;
-  authorPublicUserCode?: string | null;
-  likeCount?: number | null;
-};
-
-type EditorShowcaseResourceListResponse = {
-  resources: EditorShowcaseResource[];
-  nextCursor?: string | null;
-};
-
 interface InitLocalProjectResult {
   projectPath: string;
   manifestPath: string;
@@ -1237,31 +1221,6 @@ async function logoutClientAuthSession() {
   }
 }
 
-function getClientProfileDashboard() {
-  return requestAuthJson<ProfileDashboardSummary>(
-    '/api/profile/dashboard',
-    { method: 'GET' },
-    '读取泥点余额失败',
-  );
-}
-
-function getClientProfileWalletLedger() {
-  return requestAuthJson<ProfileWalletLedgerResponse>(
-    '/api/profile/wallet-ledger',
-    { method: 'GET' },
-    '读取泥点明细失败',
-  );
-}
-
-function listClientShowcaseResources() {
-  return requestAuthJson<EditorShowcaseResourceListResponse>(
-    '/api/editor/showcase/resources',
-    { method: 'GET' },
-    '读取灵感推荐失败',
-    { skipAuth: true },
-  );
-}
-
 const homeAgentModeItems: HomeAgentModeItem[] = [
   {
     mode: 'game',
@@ -1320,10 +1279,6 @@ function formatLocalDateTime(value: string | number | null | undefined) {
   });
 }
 
-function createHomeAttachmentId(file: File, index: number) {
-  return `${file.name}:${file.size}:${file.lastModified}:${index}:${Date.now()}`;
-}
-
 function buildHomeConversationContent(
   mode: HomeAgentMode,
   prompt: string,
@@ -2153,12 +2108,6 @@ export function WorkspaceLauncher({
   const [projectPath, setProjectPath] = useState(defaultProjectPath);
   const [status, setStatus] = useState('请选择项目');
   const [launcherView, setLauncherView] = useState<LauncherView>(initialView);
-  const [homeAgentMode, setHomeAgentMode] = useState<HomeAgentMode>('game');
-  const [homePrompt, setHomePrompt] = useState('');
-  const [homeAttachments, setHomeAttachments] = useState<HomeAttachmentDraft[]>(
-    [],
-  );
-  const [homeCreationBusy, setHomeCreationBusy] = useState(false);
   const [currentProjectContext, setCurrentProjectContext] =
     useState<LauncherProjectContext | null>(null);
   const [recentWorkspaces, setRecentWorkspaces] =
@@ -2186,13 +2135,11 @@ export function WorkspaceLauncher({
     title: string;
     message: string;
   } | null>(null);
-  const [showcaseResources, setShowcaseResources] = useState<
-    EditorShowcaseResource[]
-  >([]);
-  const [showcaseStatus, setShowcaseStatus] = useState('正在读取灵感');
-  const homeAttachmentInputRef = useRef<HTMLInputElement | null>(null);
   const accountMenuRef = useRef<HTMLDivElement | null>(null);
   const helpMenuRef = useRef<HTMLDivElement | null>(null);
+  const resetLauncherHomeDraft = useLauncherHomeDraftStore(
+    (state) => state.reset,
+  );
   const launcherAgentChatAgents = deriveAgentStatusCards(seedManifest, null);
   const [agentChatProjectPath, setAgentChatProjectPath] =
     useState(defaultProjectPath);
@@ -2258,23 +2205,8 @@ export function WorkspaceLauncher({
           return;
         }
         setProfileDashboard(null);
-        setWalletLedgerStatus(error instanceof Error ? error.message : '泥点读取失败');
-      });
-    void listClientShowcaseResources()
-      .then((response) => {
-        if (disposed) {
-          return;
-        }
-        setShowcaseResources(response.resources.slice(0, 6));
-        setShowcaseStatus(response.resources.length > 0 ? '已读取灵感' : '暂无灵感');
-      })
-      .catch((error) => {
-        if (disposed) {
-          return;
-        }
-        setShowcaseResources([]);
-        setShowcaseStatus(
-          error instanceof Error ? error.message : '灵感读取失败',
+        setWalletLedgerStatus(
+          error instanceof Error ? error.message : '泥点读取失败',
         );
       });
     return () => {
@@ -2433,14 +2365,13 @@ export function WorkspaceLauncher({
   ) {
     const trimmedProjectPath = validateProjectPath(nextProjectPath);
     if (!trimmedProjectPath) {
-      return;
+      return '项目目录无效';
     }
     const invoke = resolveTauriInvoke();
     if (!invoke) {
       setStatus('需要在 Tauri App 内运行');
-      return;
+      return '需要在 Tauri App 内运行';
     }
-    setHomeCreationBusy(true);
     setStatus('正在创建项目');
     try {
       if (!skipNonEmptyCheck) {
@@ -2457,7 +2388,7 @@ export function WorkspaceLauncher({
             attachments,
           });
           setStatus('目标文件夹不是空的');
-          return;
+          return '目标文件夹不是空的，请确认是否继续新建';
         }
       }
       const result = await invoke<InitLocalProjectResult>(
@@ -2503,12 +2434,11 @@ export function WorkspaceLauncher({
         recentRunStopReason: null,
         createdAt: Date.now(),
       });
-      setHomePrompt('');
-      setHomeAttachments([]);
+      return '已创建项目并进入项目开发';
     } catch (error) {
-      setStatus(error instanceof Error ? error.message : String(error));
-    } finally {
-      setHomeCreationBusy(false);
+      const message = error instanceof Error ? error.message : String(error);
+      setStatus(message);
+      throw error;
     }
   }
 
@@ -2649,43 +2579,51 @@ export function WorkspaceLauncher({
     void openProject(projectPath, 'open');
   }
 
-  async function handleHomeSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    const activeMode = homeAgentModeItems.find(
-      (item) => item.mode === homeAgentMode,
-    );
-    if (!homePrompt.trim() && homeAttachments.length === 0) {
-      setStatus(activeMode?.emptyPrompt ?? '请输入需求或上传附件');
-      return;
-    }
+  async function createHomeDraft(draft: HomeDraft) {
     const invoke = resolveTauriInvoke();
     if (!invoke) {
-      setStatus('需要在 Tauri App 内运行');
-      return;
+      throw new Error('需要在 Tauri App 内运行');
     }
-    setHomeCreationBusy(true);
-    setStatus('请选择项目目录');
+    const selectedPath = await invoke<string | null>(
+      'pick_local_project_directory',
+    );
+    if (!selectedPath) {
+      return '已取消';
+    }
+    return createHomeProjectFromDirectory(
+      selectedPath,
+      draft.mode,
+      draft.prompt,
+      draft.attachments,
+    );
+  }
+
+  async function loadWalletLedger() {
+    setWalletLedgerStatus('正在读取明细');
     try {
-      const selectedPath = await invoke<string | null>(
-        'pick_local_project_directory',
-      );
-      if (!selectedPath) {
-        setStatus('已取消');
-        return;
-      }
-      await createHomeProjectFromDirectory(
-        selectedPath,
-        homeAgentMode,
-        homePrompt,
-        homeAttachments,
+      const response = await getClientProfileWalletLedger();
+      setWalletLedger(response.entries.slice(0, 5));
+      setWalletLedgerStatus(
+        response.entries.length > 0 ? '已读取明细' : '暂无泥点明细',
       );
     } catch (error) {
-      setStatus(error instanceof Error ? error.message : String(error));
-    } finally {
-      setHomeCreationBusy(false);
+      setWalletLedger([]);
+      setWalletLedgerStatus(
+        error instanceof Error ? error.message : '明细读取失败',
+      );
     }
   }
 
+  function showLauncherNotice(title: string) {
+    setAccountMenuOpen(false);
+    setHelpMenuOpen(false);
+    setWalletPanelOpen(false);
+    setLauncherNotice({
+      title,
+      message: `${title}正在接入中，当前版本会先保留入口。`,
+    });
+  }
+
   async function handlePickProjectDirectory() {
     const invoke = resolveTauriInvoke();
     if (!invoke) {
@@ -2733,53 +2671,6 @@ export function WorkspaceLauncher({
     }
   }
 
-  function handleHomeAttachmentSelection(event: ChangeEvent<HTMLInputElement>) {
-    const files = Array.from(event.currentTarget.files ?? []);
-    event.currentTarget.value = '';
-    if (files.length === 0) {
-      return;
-    }
-    setHomeAttachments((current) => [
-      ...current,
-      ...files.map((file, index) => ({
-        id: createHomeAttachmentId(file, index),
-        file,
-      })),
-    ]);
-  }
-
-  function removeHomeAttachment(attachmentId: string) {
-    setHomeAttachments((current) =>
-      current.filter((attachment) => attachment.id !== attachmentId),
-    );
-  }
-
-  async function loadWalletLedger() {
-    setWalletLedgerStatus('正在读取明细');
-    try {
-      const response = await getClientProfileWalletLedger();
-      setWalletLedger(response.entries.slice(0, 5));
-      setWalletLedgerStatus(
-        response.entries.length > 0 ? '已读取明细' : '暂无泥点明细',
-      );
-    } catch (error) {
-      setWalletLedger([]);
-      setWalletLedgerStatus(
-        error instanceof Error ? error.message : '明细读取失败',
-      );
-    }
-  }
-
-  function showLauncherNotice(title: string) {
-    setAccountMenuOpen(false);
-    setHelpMenuOpen(false);
-    setWalletPanelOpen(false);
-    setLauncherNotice({
-      title,
-      message: `${title}正在接入中，当前版本会先保留入口。`,
-    });
-  }
-
   function handleRecentWorkspaceRefresh() {
     if (recentWorkspaces.length === 0 || recentWorkspaceRefreshing) {
       return;
@@ -3241,7 +3132,9 @@ export function WorkspaceLauncher({
               <div className="launcher-account-popover" role="menu">
                 <strong>{currentUser.displayName || '陶泥儿用户'}</strong>
                 <span>
-                  {currentUser.phoneNumberMasked || currentUser.publicUserCode}
+                  {currentUser.phoneNumberMasked ||
+                    currentUser.publicUserCode ||
+                    '账号信息读取中'}
                 </span>
                 <button
                   type="button"
@@ -3264,7 +3157,14 @@ export function WorkspaceLauncher({
                 >
                   反馈联系
                 </button>
-                <button type="button" role="menuitem" onClick={onLogout}>
+                <button
+                  type="button"
+                  role="menuitem"
+                  onClick={() => {
+                    resetLauncherHomeDraft();
+                    onLogout();
+                  }}
+                >
                   <LogOut size={14} aria-hidden="true" />
                   退出登录
                 </button>
@@ -3394,21 +3294,9 @@ export function WorkspaceLauncher({
         {launcherView === 'home' ? (
           <HomeView
             hasPromo={launcherNotifications.length > 0}
-            homeAgentMode={homeAgentMode}
             homeAgentModeItems={homeAgentModeItems}
-            homePrompt={homePrompt}
-            homeAttachments={homeAttachments}
-            homeAttachmentInputRef={homeAttachmentInputRef}
-            homeCreationBusy={homeCreationBusy}
-            status={status}
             recentProjectRows={recentProjectRows}
-            showcaseResources={showcaseResources}
-            showcaseStatus={showcaseStatus}
-            onHomeAgentModeChange={setHomeAgentMode}
-            onHomePromptChange={setHomePrompt}
-            onHomeAttachmentSelection={handleHomeAttachmentSelection}
-            onHomeAttachmentRemove={removeHomeAttachment}
-            onHomeSubmit={handleHomeSubmit}
+            onCreateDraft={createHomeDraft}
             onProjectsOpen={() => setLauncherView('projects')}
             onProjectOpen={(path) => {
               setProjectPath(path);
diff --git a/apps/ai-game-creator-shell/src/services/clientApi.ts b/apps/ai-game-creator-shell/src/services/clientApi.ts
new file mode 100644
index 000000000..1684e04b9
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/services/clientApi.ts
@@ -0,0 +1,152 @@
+import {
+  API_RESPONSE_ENVELOPE_HEADER,
+  API_RESPONSE_ENVELOPE_VERSION,
+  ProfileDashboardSummary,
+  ProfileWalletLedgerResponse,
+  unwrapApiResponse,
+} from '../../../../packages/shared/src';
+
+const ACCESS_TOKEN_STORAGE_KEY = 'genarrative.auth.access-token.v1';
+const DEFAULT_CLIENT_AUTH_API_BASE_URL = 'http://127.0.0.1:8082';
+
+export type EditorShowcaseResource = {
+  resourceId: string;
+  showcaseId?: string | null;
+  label?: string | null;
+  imageSrc: string;
+  width?: number;
+  height?: number;
+  prompt?: string | null;
+  actualPrompt?: string | null;
+  assetKind?: string | null;
+  authorDisplayName?: string | null;
+  authorPublicUserCode?: string | null;
+  likeCount?: number | null;
+};
+
+type EditorShowcaseResourceListResponse = {
+  resources: EditorShowcaseResource[];
+  nextCursor?: string | null;
+};
+
+export class ClientAuthRequestError extends Error {
+  readonly status: number | null;
+  readonly networkError: boolean;
+
+  constructor(
+    message: string,
+    options: { status?: number | null; networkError?: boolean } = {},
+  ) {
+    super(message);
+    this.status = options.status ?? null;
+    this.networkError = options.networkError ?? false;
+  }
+}
+
+export function getStoredAuthAccessToken() {
+  return window.localStorage.getItem(ACCESS_TOKEN_STORAGE_KEY)?.trim() || '';
+}
+
+export function setStoredAuthAccessToken(token: string) {
+  const nextToken = token.trim();
+  if (nextToken) {
+    window.localStorage.setItem(ACCESS_TOKEN_STORAGE_KEY, nextToken);
+    return;
+  }
+  window.localStorage.removeItem(ACCESS_TOKEN_STORAGE_KEY);
+}
+
+export function clearStoredAuthAccessToken() {
+  window.localStorage.removeItem(ACCESS_TOKEN_STORAGE_KEY);
+}
+
+function resolveClientApiUrl(url: string) {
+  if (/^https?:\/\//iu.test(url)) {
+    return url;
+  }
+  if (import.meta.env.DEV) {
+    return url;
+  }
+  const isHttpPage =
+    window.location.protocol === 'http:' ||
+    window.location.protocol === 'https:';
+  if (!window.__TAURI__ && isHttpPage) {
+    return url;
+  }
+  return `${DEFAULT_CLIENT_AUTH_API_BASE_URL}${url}`;
+}
+
+async function readApiErrorMessage(response: Response, fallback: string) {
+  const text = await response.text();
+  if (!text.trim()) {
+    return fallback;
+  }
+  try {
+    unwrapApiResponse(JSON.parse(text) as unknown);
+  } catch (error) {
+    return error instanceof Error ? error.message : fallback;
+  }
+  return fallback;
+}
+
+export async function requestClientApi<T>(
+  url: string,
+  init: RequestInit,
+  fallbackMessage: string,
+  options: { skipAuth?: boolean } = {},
+) {
+  const headers = new Headers(init.headers);
+  headers.set(API_RESPONSE_ENVELOPE_HEADER, API_RESPONSE_ENVELOPE_VERSION);
+  if (!options.skipAuth) {
+    const token = getStoredAuthAccessToken();
+    if (token) {
+      headers.set('Authorization', `Bearer ${token}`);
+    }
+  }
+  let response: Response;
+  try {
+    response = await fetch(resolveClientApiUrl(url), {
+      ...init,
+      credentials: 'same-origin',
+      headers,
+    });
+  } catch {
+    throw new ClientAuthRequestError(
+      '无法连接登录服务，请确认配套后端或 API 代理已启动后重试',
+      { networkError: true },
+    );
+  }
+  if (!response.ok) {
+    throw new ClientAuthRequestError(
+      await readApiErrorMessage(response, fallbackMessage),
+      { status: response.status },
+    );
+  }
+  const text = await response.text();
+  return text ? unwrapApiResponse<T>(JSON.parse(text) as T) : (null as T);
+}
+
+export function getClientProfileDashboard() {
+  return requestClientApi<ProfileDashboardSummary>(
+    '/api/profile/dashboard',
+    { method: 'GET' },
+    '读取泥点余额失败',
+  );
+}
+
+export function getClientProfileWalletLedger() {
+  return requestClientApi<ProfileWalletLedgerResponse>(
+    '/api/profile/wallet-ledger',
+    { method: 'GET' },
+    '读取泥点明细失败',
+  );
+}
+
+export function listClientShowcaseResources() {
+  return requestClientApi<EditorShowcaseResourceListResponse>(
+    '/api/editor/showcase/resources',
+    { method: 'GET' },
+    '读取灵感推荐失败',
+    { skipAuth: true },
+  );
+}
diff --git a/apps/ai-game-creator-shell/src/stores/useHomeDraftStore.ts b/apps/ai-game-creator-shell/src/stores/useHomeDraftStore.ts
new file mode 100644
index 000000000..4773a84c3
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/stores/useHomeDraftStore.ts
@@ -0,0 +1,44 @@
+import { create } from 'zustand';
+
+export type HomeAgentMode = 'game' | 'art' | 'doc';
+
+export type HomeAttachmentDraft = {
+  id: string;
+  file: File;
+};
+
+export type HomeDraft = {
+  mode: HomeAgentMode;
+  prompt: string;
+  attachments: HomeAttachmentDraft[];
+};
+
+type UseHomeDraftStore = HomeDraft & {
+  setMode: (mode: HomeAgentMode) => void;
+  setPrompt: (prompt: string) => void;
+  addAttachments: (attachments: HomeAttachmentDraft[]) => void;
+  removeAttachment: (attachmentId: string) => void;
+  reset: () => void;
+};
+
+const initialHomeDraft: HomeDraft = {
+  mode: 'game',
+  prompt: '',
+  attachments: [],
+};
+
+// Keep non-serializable File objects available while the Home view is unmounted.
+export const useLauncherHomeDraftStore = create<UseHomeDraftStore>((set) => ({
+  ...initialHomeDraft,
+  setMode: (mode) => set({ mode }),
+  setPrompt: (prompt) => set({ prompt }),
+  addAttachments: (attachments) =>
+    set((state) => ({ attachments: [...state.attachments, ...attachments] })),
+  removeAttachment: (attachmentId) =>
+    set((state) => ({
+      attachments: state.attachments.filter(
+        (attachment) => attachment.id !== attachmentId,
+      ),
+    })),
+  reset: () => set(initialHomeDraft),
+}));
diff --git a/apps/ai-game-creator-shell/src/view/home/index.tsx b/apps/ai-game-creator-shell/src/view/home/index.tsx
index 2240a5488..4291ea093 100644
--- a/apps/ai-game-creator-shell/src/view/home/index.tsx
+++ b/apps/ai-game-creator-shell/src/view/home/index.tsx
@@ -7,17 +7,23 @@ import {
   X,
 } from 'lucide-react';
 import type {
-  ChangeEventHandler,
-  FormEventHandler,
-  RefObject,
+  FormEvent,
 } from 'react';
+import { useRef, useState } from 'react';
 
-export type HomeAgentMode = 'game' | 'art' | 'doc';
+import {
+  useLauncherHomeDraftStore,
+  type HomeAgentMode,
+  type HomeAttachmentDraft,
+  type HomeDraft,
+} from '../../stores/useHomeDraftStore';
+import { useHomeShowcase } from './useHomeShowcase';
 
-export type HomeAttachmentDraft = {
-  id: string;
-  file: File;
-};
+export type {
+  HomeAgentMode,
+  HomeAttachmentDraft,
+  HomeDraft,
+} from '../../stores/useHomeDraftStore';
 
 export type HomeAgentModeItem = {
   mode: HomeAgentMode;
@@ -46,45 +52,39 @@ export type HomeShowcaseResource = {
 
 type HomeViewProps = {
   hasPromo: boolean;
-  homeAgentMode: HomeAgentMode;
   homeAgentModeItems: readonly HomeAgentModeItem[];
-  homePrompt: string;
-  homeAttachments: readonly HomeAttachmentDraft[];
-  homeAttachmentInputRef: RefObject<HTMLInputElement | null>;
-  homeCreationBusy: boolean;
-  status: string;
   recentProjectRows: readonly HomeProjectRow[];
-  showcaseResources: readonly HomeShowcaseResource[];
-  showcaseStatus: string;
-  onHomeAgentModeChange: (mode: HomeAgentMode) => void;
-  onHomePromptChange: (value: string) => void;
-  onHomeAttachmentSelection: ChangeEventHandler<HTMLInputElement>;
-  onHomeAttachmentRemove: (attachmentId: string) => void;
-  onHomeSubmit: FormEventHandler<HTMLFormElement>;
+  onCreateDraft: (draft: HomeDraft) => Promise<string>;
   onProjectsOpen: () => void;
   onProjectOpen: (path: string) => void;
 };
 
 export default function HomeView({
   hasPromo,
-  homeAgentMode,
   homeAgentModeItems,
-  homePrompt,
-  homeAttachments,
-  homeAttachmentInputRef,
-  homeCreationBusy,
-  status,
   recentProjectRows,
-  showcaseResources,
-  showcaseStatus,
-  onHomeAgentModeChange,
-  onHomePromptChange,
-  onHomeAttachmentSelection,
-  onHomeAttachmentRemove,
-  onHomeSubmit,
+  onCreateDraft,
   onProjectsOpen,
   onProjectOpen,
 }: HomeViewProps) {
+  const homeAgentMode = useLauncherHomeDraftStore((state) => state.mode);
+  const homePrompt = useLauncherHomeDraftStore((state) => state.prompt);
+  const homeAttachments = useLauncherHomeDraftStore(
+    (state) => state.attachments,
+  );
+  const setHomeAgentMode = useLauncherHomeDraftStore((state) => state.setMode);
+  const setHomePrompt = useLauncherHomeDraftStore((state) => state.setPrompt);
+  const addHomeAttachments = useLauncherHomeDraftStore(
+    (state) => state.addAttachments,
+  );
+  const removeHomeAttachment = useLauncherHomeDraftStore(
+    (state) => state.removeAttachment,
+  );
+  const [homeCreationBusy, setHomeCreationBusy] = useState(false);
+  const [homeStatus, setHomeStatus] = useState('请选择创作模式');
+  const { resources: showcaseResources, status: showcaseStatus } =
+    useHomeShowcase();
+  const homeAttachmentInputRef = useRef<HTMLInputElement | null>(null);
   const activeHomeMode =
     homeAgentModeItems.find((item) => item.mode === homeAgentMode) ??
     homeAgentModeItems[0];
@@ -95,6 +95,48 @@ export default function HomeView({
 
   const ActiveHomeModeIcon = activeHomeMode.icon;
 
+  function handleHomeAttachmentSelection(
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) {
+    const files = Array.from(event.currentTarget.files ?? []);
+    event.currentTarget.value = '';
+    if (files.length === 0) {
+      return;
+    }
+    addHomeAttachments(
+      files.map((file, index) => ({
+        id: `${file.name}:${file.size}:${file.lastModified}:${index}:${Date.now()}`,
+        file,
+      })),
+    );
+  }
+
+  async function handleHomeSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!homePrompt.trim() && homeAttachments.length === 0) {
+      setHomeStatus(
+        homeAgentModeItems.find((item) => item.mode === homeAgentMode)
+          ?.emptyPrompt ?? '请输入需求或上传附件',
+      );
+      return;
+    }
+    setHomeCreationBusy(true);
+    setHomeStatus('请选择项目目录');
+    try {
+      setHomeStatus(
+        await onCreateDraft({
+          mode: homeAgentMode,
+          prompt: homePrompt,
+          attachments: homeAttachments,
+        }),
+      );
+    } catch (error) {
+      setHomeStatus(error instanceof Error ? error.message : String(error));
+    } finally {
+      setHomeCreationBusy(false);
+    }
+  }
+
   return (
     <>
       <section
@@ -132,7 +174,7 @@ export default function HomeView({
                     ? 'border-violet-500 bg-[#f8f2ff] text-violet-600'
                     : 'border-[#d6d6d6] bg-white text-[#333]'
                 }`}
-                onClick={() => onHomeAgentModeChange(item.mode)}
+                onClick={() => setHomeAgentMode(item.mode)}
               >
                 <ModeIcon size={14} aria-hidden="true" />
                 {item.label}
@@ -142,14 +184,14 @@ export default function HomeView({
         </div>
         <form
           className="grid min-h-20 w-[min(488px,calc(100vw-110px))] grid-rows-[minmax(42px,auto)_auto_auto] rounded-[18px] border border-[#e1e4e8] bg-white px-3 pb-2 pt-[13px] shadow-[0_8px_24px_rgb(15_23_42_/_8%)] max-[720px]:w-[min(100%,calc(100vw-76px))]"
-          onSubmit={onHomeSubmit}
+          onSubmit={handleHomeSubmit}
         >
           <textarea
             className="min-h-9 w-full resize-none border-0 bg-transparent p-0 text-[13px] text-[#171717] outline-0 placeholder:text-[#bababa]"
             aria-label="创作想法"
             placeholder={activeHomeMode.placeholder}
             value={homePrompt}
-            onChange={(event) => onHomePromptChange(event.currentTarget.value)}
+            onChange={(event) => setHomePrompt(event.currentTarget.value)}
           />
           {homeAttachments.length > 0 ? (
             <div className="flex flex-wrap gap-1.5 py-2 pb-1" aria-label="附件队列">
@@ -163,7 +205,7 @@ export default function HomeView({
                     className="size-[18px] cursor-pointer border-0 bg-transparent p-0 text-gray-500"
                     type="button"
                     aria-label={`移除附件 ${attachment.file.name}`}
-                    onClick={() => onHomeAttachmentRemove(attachment.id)}
+                    onClick={() => removeHomeAttachment(attachment.id)}
                   >
                     <X size={12} aria-hidden="true" />
                   </button>
@@ -177,7 +219,7 @@ export default function HomeView({
               className="pointer-events-none absolute size-px opacity-0"
               type="file"
               multiple
-              onChange={onHomeAttachmentSelection}
+              onChange={handleHomeAttachmentSelection}
             />
             <button
               className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-[#666]"
@@ -187,7 +229,7 @@ export default function HomeView({
             >
               <Upload size={15} aria-hidden="true" />
             </button>
-            <span>{status}</span>
+            <span>{homeStatus}</span>
             <button
               className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-[#f1f1f1] p-0 text-[#9a9a9a] disabled:cursor-not-allowed disabled:opacity-55"
               type="submit"
@@ -207,7 +249,9 @@ export default function HomeView({
         <header className="flex items-center justify-between gap-3">
           <div>
             <h2 className="m-0 text-[15px] text-gray-900">最近项目</h2>
-            <p className="mb-0 mt-1 text-[12px] text-[#8b8b8b]">{status}</p>
+            <p className="mb-0 mt-1 text-[12px] text-[#8b8b8b]">
+              {homeStatus}
+            </p>
           </div>
           <div className="launcher-project-list-actions">
             <button
diff --git a/apps/ai-game-creator-shell/src/view/home/useHomeShowcase.ts b/apps/ai-game-creator-shell/src/view/home/useHomeShowcase.ts
new file mode 100644
index 000000000..d6bfd7e82
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/view/home/useHomeShowcase.ts
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+import {
+  listClientShowcaseResources,
+  type EditorShowcaseResource,
+} from '../../services/clientApi';
+
+export function useHomeShowcase() {
+  const [resources, setResources] = useState<EditorShowcaseResource[]>([]);
+  const [status, setStatus] = useState('正在读取灵感');
+
+  useEffect(() => {
+    let disposed = false;
+    void listClientShowcaseResources()
+      .then((response) => {
+        if (disposed) {
+          return;
+        }
+        setResources(response.resources.slice(0, 6));
+        setStatus(response.resources.length > 0 ? '已读取灵感' : '暂无灵感');
+      })
+      .catch((error) => {
+        if (disposed) {
+          return;
+        }
+        setResources([]);
+        setStatus(error instanceof Error ? error.message : '灵感读取失败');
+      });
+    return () => {
+      disposed = true;
+    };
+  }, []);
+
+  return { resources, status };
+}
-- 
2.52.0


From dd8eb60e05b8f846f3b966ac4d5b8115284359f6 Mon Sep 17 00:00:00 2001
From: kvtodev <kvtodev@outlook.com>
Date: Wed, 15 Jul 2026 11:21:37 +0800
Subject: [PATCH 3/6] removed home status, adjust style, reset draft on
 submitted chat, give error echo back

---
 apps/ai-game-creator-shell/src/App.tsx        | 27 +++++++-----
 .../src/view/home/index.tsx                   | 41 ++++++++++---------
 2 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/App.tsx b/apps/ai-game-creator-shell/src/App.tsx
index 907962747..e3a6650d1 100644
--- a/apps/ai-game-creator-shell/src/App.tsx
+++ b/apps/ai-game-creator-shell/src/App.tsx
@@ -2434,6 +2434,7 @@ export function WorkspaceLauncher({
         recentRunStopReason: null,
         createdAt: Date.now(),
       });
+      resetLauncherHomeDraft();
       return '已创建项目并进入项目开发';
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
@@ -2551,17 +2552,21 @@ export function WorkspaceLauncher({
     }
     const pendingProject = pendingNonEmptyProject;
     setPendingNonEmptyProject(null);
-    if (pendingProject.kind === 'home-create') {
-      await createHomeProjectFromDirectory(
-        pendingProject.projectPath,
-        pendingProject.mode,
-        pendingProject.prompt,
-        pendingProject.attachments,
-        true,
-      );
-      return;
+    try {
+      if (pendingProject.kind === 'home-create') {
+        await createHomeProjectFromDirectory(
+          pendingProject.projectPath,
+          pendingProject.mode,
+          pendingProject.prompt,
+          pendingProject.attachments,
+          true,
+        );
+        return;
+      }
+      await createProjectFromProjectPage(pendingProject.projectPath, true);
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : String(error));
     }
-    await createProjectFromProjectPage(pendingProject.projectPath, true);
   }
 
   function cancelCreateInNonEmptyFolder() {
@@ -3294,6 +3299,8 @@ export function WorkspaceLauncher({
         {launcherView === 'home' ? (
           <HomeView
             hasPromo={launcherNotifications.length > 0}
+            status={status}
+            onStatusChange={setStatus}
             homeAgentModeItems={homeAgentModeItems}
             recentProjectRows={recentProjectRows}
             onCreateDraft={createHomeDraft}
diff --git a/apps/ai-game-creator-shell/src/view/home/index.tsx b/apps/ai-game-creator-shell/src/view/home/index.tsx
index 4291ea093..db4060d7d 100644
--- a/apps/ai-game-creator-shell/src/view/home/index.tsx
+++ b/apps/ai-game-creator-shell/src/view/home/index.tsx
@@ -52,6 +52,8 @@ export type HomeShowcaseResource = {
 
 type HomeViewProps = {
   hasPromo: boolean;
+  status: string;
+  onStatusChange: (status: string) => void;
   homeAgentModeItems: readonly HomeAgentModeItem[];
   recentProjectRows: readonly HomeProjectRow[];
   onCreateDraft: (draft: HomeDraft) => Promise<string>;
@@ -61,6 +63,8 @@ type HomeViewProps = {
 
 export default function HomeView({
   hasPromo,
+  status,
+  onStatusChange,
   homeAgentModeItems,
   recentProjectRows,
   onCreateDraft,
@@ -81,7 +85,6 @@ export default function HomeView({
     (state) => state.removeAttachment,
   );
   const [homeCreationBusy, setHomeCreationBusy] = useState(false);
-  const [homeStatus, setHomeStatus] = useState('请选择创作模式');
   const { resources: showcaseResources, status: showcaseStatus } =
     useHomeShowcase();
   const homeAttachmentInputRef = useRef<HTMLInputElement | null>(null);
@@ -114,16 +117,16 @@ export default function HomeView({
   async function handleHomeSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (!homePrompt.trim() && homeAttachments.length === 0) {
-      setHomeStatus(
+      onStatusChange(
         homeAgentModeItems.find((item) => item.mode === homeAgentMode)
           ?.emptyPrompt ?? '请输入需求或上传附件',
       );
       return;
     }
     setHomeCreationBusy(true);
-    setHomeStatus('请选择项目目录');
+    onStatusChange('请选择项目目录');
     try {
-      setHomeStatus(
+      onStatusChange(
         await onCreateDraft({
           mode: homeAgentMode,
           prompt: homePrompt,
@@ -131,7 +134,7 @@ export default function HomeView({
         }),
       );
     } catch (error) {
-      setHomeStatus(error instanceof Error ? error.message : String(error));
+      onStatusChange(error instanceof Error ? error.message : String(error));
     } finally {
       setHomeCreationBusy(false);
     }
@@ -140,17 +143,17 @@ export default function HomeView({
   return (
     <>
       <section
-        className={`grid min-h-93.5 content-start justify-items-center gap-3.25 px-6 pb-4.5 pt-25.75 max-[720px]:min-h-0 max-[720px]:gap-4 max-[720px]:px-3.5 max-[720px]:pb-[34px] max-[720px]:pt-[84px] ${
-          hasPromo ? 'pt-33.75 max-[720px]:pt-21' : ''
+        className={`grid min-h-93.5 content-start justify-items-center gap-3.25 px-6 pb-4.5 pt-25.75 max-[760px]:min-h-0 max-[760px]:gap-4 max-[760px]:px-3.5 max-[760px]:pb-[34px] max-[760px]:pt-[84px] ${
+          hasPromo ? 'pt-33.75 max-[760px]:pt-21' : ''
         }`}
         aria-label="首页输入"
       >
-        <div className="flex items-center gap-3 text-center max-[720px]:flex-col max-[720px]:gap-2.5">
+        <div className="flex items-center gap-3 text-center max-[760px]:flex-col max-[760px]:gap-2.5">
           <span className="grid size-7.5 shrink-0 place-items-center rounded-full bg-[#060606] text-[11px] font-bold text-white">
             <ActiveHomeModeIcon size={18} aria-hidden="true" />
           </span>
           <div>
-            <h1 className="m-0 text-[27px] font-[750] tracking-normal max-[720px]:text-[22px]">
+            <h1 className="m-0 text-[27px] font-[750] tracking-normal max-[760px]:text-[22px]">
               陶泥儿 GameAgent
             </h1>
             <p className="m-0 mt-3 text-[13px] text-[#a0a0a0]">
@@ -159,7 +162,7 @@ export default function HomeView({
           </div>
         </div>
         <div
-          className="flex w-[min(488px,calc(100vw-110px))] flex-wrap justify-center gap-[9px] max-[720px]:w-[min(100%,calc(100vw-76px))]"
+          className="flex w-[min(488px,calc(100vw-110px))] flex-wrap justify-center gap-[9px] max-[760px]:w-[min(100%,calc(100vw-76px))]"
           aria-label="Agent 分类"
         >
           {homeAgentModeItems.map((item) => {
@@ -183,7 +186,7 @@ export default function HomeView({
           })}
         </div>
         <form
-          className="grid min-h-20 w-[min(488px,calc(100vw-110px))] grid-rows-[minmax(42px,auto)_auto_auto] rounded-[18px] border border-[#e1e4e8] bg-white px-3 pb-2 pt-[13px] shadow-[0_8px_24px_rgb(15_23_42_/_8%)] max-[720px]:w-[min(100%,calc(100vw-76px))]"
+          className="grid min-h-20 w-[min(488px,calc(100vw-110px))] grid-rows-[minmax(42px,auto)_auto_auto] rounded-[18px] border border-[#e1e4e8] bg-white px-3 pb-2 pt-[13px] shadow-[0_8px_24px_rgb(15_23_42_/_8%)] max-[760px]:w-[min(100%,calc(100vw-76px))]"
           onSubmit={handleHomeSubmit}
         >
           <textarea
@@ -216,7 +219,7 @@ export default function HomeView({
           <div className="grid grid-cols-[auto_1fr_auto] items-center gap-2.5 text-[12px] text-[#777]">
             <input
               ref={homeAttachmentInputRef}
-              className="pointer-events-none absolute size-px opacity-0"
+              className="launcher-file-input pointer-events-none absolute size-px opacity-0"
               type="file"
               multiple
               onChange={handleHomeAttachmentSelection}
@@ -229,7 +232,7 @@ export default function HomeView({
             >
               <Upload size={15} aria-hidden="true" />
             </button>
-            <span>{homeStatus}</span>
+            <span>{status}</span>
             <button
               className="grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-[#f1f1f1] p-0 text-[#9a9a9a] disabled:cursor-not-allowed disabled:opacity-55"
               type="submit"
@@ -243,14 +246,14 @@ export default function HomeView({
       </section>
 
       <section
-        className="mx-auto grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[720px]:w-[min(100%,calc(100vw-76px))]"
+        className="mx-auto grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[760px]:w-[min(100%,calc(100vw-76px))]"
         aria-label="最近项目"
       >
         <header className="flex items-center justify-between gap-3">
           <div>
             <h2 className="m-0 text-[15px] text-gray-900">最近项目</h2>
             <p className="mb-0 mt-1 text-[12px] text-[#8b8b8b]">
-              {homeStatus}
+              {status}
             </p>
           </div>
           <div className="launcher-project-list-actions">
@@ -264,11 +267,11 @@ export default function HomeView({
           </div>
         </header>
         {recentProjectRows.length > 0 ? (
-          <div className="grid grid-cols-5 gap-3 overflow-hidden max-[720px]:grid-cols-1 max-[720px]:overflow-visible">
+          <div className="grid grid-cols-5 gap-3 overflow-hidden max-[760px]:grid-cols-1 max-[760px]:overflow-visible">
             {recentProjectRows.map((project) => (
               <article className="grid min-w-0" key={project.path}>
                 <button
-                  className="grid h-[116px] w-full cursor-pointer content-start justify-items-start gap-1.5 overflow-hidden rounded-lg border border-[#e1e4e8] bg-[#f7f7f7] p-3 text-left disabled:cursor-not-allowed disabled:opacity-[0.58] max-[720px]:h-[132px]"
+                  className="grid h-[116px] w-full cursor-pointer content-start justify-items-start gap-1.5 overflow-hidden rounded-lg border border-[#e1e4e8] bg-[#f7f7f7] p-3 text-left disabled:cursor-not-allowed disabled:opacity-[0.58] max-[760px]:h-[132px]"
                   type="button"
                   disabled={!project.canOpen}
                   onClick={() => onProjectOpen(project.path)}
@@ -305,7 +308,7 @@ export default function HomeView({
       </section>
 
       <section
-        className="mx-auto mt-[22px] grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[720px]:w-[min(100%,calc(100vw-76px))]"
+        className="mx-auto mt-[22px] grid w-[min(1054px,calc(100vw-122px))] gap-[14px] max-[760px]:w-[min(100%,calc(100vw-76px))]"
         aria-label="灵感推荐"
       >
         <header className="flex items-center justify-start gap-3">
@@ -318,7 +321,7 @@ export default function HomeView({
           </div>
         </header>
         {showcaseResources.length > 0 ? (
-          <div className="grid grid-cols-6 gap-3 max-[720px]:grid-cols-1">
+          <div className="grid grid-cols-6 gap-3 max-[760px]:grid-cols-1">
             {showcaseResources.map((resource) => (
               <article
                 className="grid gap-[7px] overflow-hidden rounded-lg border border-gray-200 bg-white pb-2.5"
-- 
2.52.0


From cc0b289df6db5328d0c5098b09177e5953021c84 Mon Sep 17 00:00:00 2001
From: kvtodev <kvtodev@outlook.com>
Date: Wed, 15 Jul 2026 11:46:44 +0800
Subject: [PATCH 4/6] adjusted project card height to be dynamic in home view

---
 apps/ai-game-creator-shell/src/view/home/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ai-game-creator-shell/src/view/home/index.tsx b/apps/ai-game-creator-shell/src/view/home/index.tsx
index db4060d7d..9cfe6b4e4 100644
--- a/apps/ai-game-creator-shell/src/view/home/index.tsx
+++ b/apps/ai-game-creator-shell/src/view/home/index.tsx
@@ -271,7 +271,7 @@ export default function HomeView({
             {recentProjectRows.map((project) => (
               <article className="grid min-w-0" key={project.path}>
                 <button
-                  className="grid h-[116px] w-full cursor-pointer content-start justify-items-start gap-1.5 overflow-hidden rounded-lg border border-[#e1e4e8] bg-[#f7f7f7] p-3 text-left disabled:cursor-not-allowed disabled:opacity-[0.58] max-[760px]:h-[132px]"
+                  className="grid h-auto w-full cursor-pointer content-start justify-items-start gap-1.5 overflow-hidden rounded-lg border border-[#e1e4e8] bg-[#f7f7f7] p-3 text-left disabled:cursor-not-allowed disabled:opacity-[0.58] max-[760px]:h-[132px]"
                   type="button"
                   disabled={!project.canOpen}
                   onClick={() => onProjectOpen(project.path)}
-- 
2.52.0


From 427203471eaf5dff14095c404e9d5c79b5a00595 Mon Sep 17 00:00:00 2001
From: kvtodev <kvtodev@outlook.com>
Date: Wed, 15 Jul 2026 13:35:41 +0800
Subject: [PATCH 5/6] update doc

---
 .../【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md b/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md
index 4041844d9..b3e26708a 100644
--- a/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md
+++ b/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md
@@ -159,7 +159,7 @@ game-project/
 - 短期记忆、长期记忆、项目黑板和角色私有记忆按授权本地项目路径读写；普通用户仍只通过聊天命令访问短期 / 长期 / 黑板记忆，角色私有记忆只在单 agent 对话和生成 loop 中按目标 agent 读取。
 - 结构化对话记录按授权本地项目路径追加 JSONL；普通聊天、`/history`、工作区历史和单 agent 对话都读取 `.agent/conversations/`，最近 project / agent 对话可进入生成 prompt 上下文，但 v1 不提供 fork、archive 或云端同步。
 - Agent 状态列表从 `.agent/manifest.json` 的任务 / 角色清单和 `.agent/run.latest.json` / `.agent/runs/<runId>.json` 的 step、taskGraph、passPlans、lifecycleStatus 派生；v1 不新增独立状态数据库，也不承诺完整后台 runner。
-- App 启动先检查平台登录态；登录后进入同一个客户端首页，不再有面向用户的启动器 / 主窗口切换概念。首页按 `做游戏` / `做素材` / `做方案` 保存 `game` / `art` / `doc` 初始意图，发送时弹出原生目录选择，目标目录存在且非空时必须二次确认；确认后只调用 `init_local_game_project` 初始化本地项目、`upload_local_asset` 导入附件、`append_local_conversation_message` 记录首条需求和接收回执，再写入最近项目并切到项目开发占位页。本流程不调用 `generate_local_game_draft`、`generate_platform_art_asset` 或 LLM 聊天。
+- App 启动先检查平台登录态；登录后进入同一个客户端首页，不再有面向用户的启动器 / 主窗口切换概念。首页按 `做游戏` / `做素材` / `做方案` 保存 `game` / `art` / `doc` 初始意图，发送时弹出原生目录选择，目标目录存在且非空时必须二次确认；确认后只调用 `init_local_game_project` 初始化本地项目、`upload_local_asset` 导入附件、`append_local_conversation_message` 记录首条需求和接收回执，再写入最近项目并切到项目开发占位页，成功后清空首页草稿。取消和创建失败的状态必须回显到首页；首页响应式断点与应用外壳统一为 `760px`。本流程不调用 `generate_local_game_draft`、`generate_platform_art_asset` 或 LLM 聊天。
 - debug 构建启动后在用户 `client` 窗口之外额外打开 `developer` 窗口；该窗口用于开发者单独选择 Agent、切换时自动读取该 Agent 历史，并把用户消息和真实 Agent 回复持久化到 `.agent/conversations/agents/<agentId>.jsonl`，普通用户窗口不得出现 `Agent 聊天` 导航或入口。
 - 首页最近项目只展示最近 3 个有效项目；项目组页在同一窗口管理最近项目、打开项目、新建项目和显示目录。打开项目只读取已初始化项目并切到项目开发占位页，不打开第二窗口；新建项目仍沿用非空目录确认，不自动重建无效历史路径。
 - 项目开发占位页保留左侧栏和顶部栏，展示项目名、路径、创建模式、首条需求、附件导入结果、最近 run 状态和后续“项目开发画布”占位；本轮不落地真正画板 + Agent 双栏。
-- 
2.52.0


From c524e4573e85bc5b0aa37c2ecb03e8004cef08f4 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Thu, 16 Jul 2026 14:23:39 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=B8=B8=E6=88=8F?=
 =?UTF-8?q?=E5=88=9B=E4=BD=9C=E9=A1=B5=E5=A4=B4=E6=8C=89=E9=92=AE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

恢复 Tailwind Preflight 后的页头操作按钮边框与间距
补充页头按钮样式与禁用态回归测试
---
 apps/ai-game-creator-shell/src/styles.css       |  6 ++++++
 .../tests/appSurface.test.ts                    | 17 +++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index b6478a1b1..f826e231b 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -561,6 +561,7 @@ textarea {
 }
 
 .launcher-page-actions button,
+.launcher-page .launcher-project-list-actions button,
 .launcher-project-table article > button,
 .launcher-empty-projects button {
   height: 32px;
@@ -572,6 +573,11 @@ textarea {
   font-size: 12px;
 }
 
+.launcher-page .launcher-project-list-actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
 .launcher-page-actions button:last-child {
   border-color: #111827;
   background: #111827;
diff --git a/apps/ai-game-creator-shell/tests/appSurface.test.ts b/apps/ai-game-creator-shell/tests/appSurface.test.ts
index 15f10de1a..dc2d3a62c 100644
--- a/apps/ai-game-creator-shell/tests/appSurface.test.ts
+++ b/apps/ai-game-creator-shell/tests/appSurface.test.ts
@@ -13642,6 +13642,23 @@ describe('AI 游戏创作 App 界面边界', () => {
     expect(styles).toMatch(/\.message\s*\{[^}]*overflow-wrap:\s*anywhere/s);
   });
 
+  it('keeps launcher page header actions styled after Tailwind preflight', () => {
+    const styles = readFileSync(
+      resolve(process.cwd(), 'apps/ai-game-creator-shell/src/styles.css'),
+      'utf8',
+    );
+    const headerActionRule = styles.match(
+      /\.launcher-page \.launcher-project-list-actions button,[^{]*\{([^}]*)\}/s,
+    );
+
+    expect(headerActionRule?.[1]).toContain('padding: 0 12px;');
+    expect(headerActionRule?.[1]).toContain('border: 1px solid #d8dde5;');
+    expect(headerActionRule?.[1]).toContain('background: #fff;');
+    expect(styles).toMatch(
+      /\.launcher-page \.launcher-project-list-actions button:disabled\s*\{[^}]*cursor:\s*not-allowed;[^}]*opacity:\s*0\.55;/s,
+    );
+  });
+
   it('shows developer panels only in dev mode', () => {
     renderAppAt('/?dev');
 
-- 
2.52.0