better studio, remove play

CLAUDE.md

@@ -138,11 +138,11 @@ Required environment variables:
       - [x] [LIMIT] can setting in use profile
       - [ ] [LIMIT] max is by Subscribe
       - [ ] Delete Version Button
-    - [x] Prompt Debugger run
-      - [x] Select AI Model
-      - [x] Input Prompt Content
-      - [x] Show Test Result
-      - [x] Need to User Credit
+    - [ ] Prompt Debugger run
+      - [ ] Select AI Model
+      - [ ] Input Prompt Content
+      - [ ] Show Test Result
+      - [ ] Need to User Credit
 - [ ] Subscribe
   - [ ] Free
     - [ ] 20 Prompt Limit

src/app/studio/[id]/page.tsx

@@ -13,10 +13,8 @@ import { LoadingSpinner } from '@/components/ui/loading-spinner'
 import { FullScreenLoading } from '@/components/ui/full-screen-loading'
 import { VersionTimeline, VersionTimelineRef } from '@/components/studio/VersionTimeline'
 import {
-  Play,
   Save,
   Copy,
-  Zap,
   ArrowLeft,
   FileText,
   Clock
@@ -62,8 +60,6 @@ export default function PromptPage({ params }: PromptPageProps) {
   const [prompt, setPrompt] = useState<PromptData | null>(null)
   const [promptContent, setPromptContent] = useState('')
   const [promptTitle, setPromptTitle] = useState('')
-  const [testResult, setTestResult] = useState('')
-  const [isRunning, setIsRunning] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
   const [currentVersion, setCurrentVersion] = useState<PromptVersion | null>(null)
@@ -134,35 +130,6 @@ export default function PromptPage({ params }: PromptPageProps) {
 
 
 
-  const handleRunTest = async () => {
-    if (!promptContent.trim() || !user || !promptId) return
-
-    setIsRunning(true)
-    setTestResult('')
-
-    try {
-      const response = await fetch(`/api/prompts/${promptId}/test`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          content: promptContent,
-          userId: user.id
-        })
-      })
-
-      if (response.ok) {
-        const data = await response.json()
-        setTestResult(data.result.output || data.result.error || 'No output received')
-      } else {
-        setTestResult('Error: Failed to run prompt test. Please try again.')
-      }
-    } catch (error) {
-      console.error('Error running test:', error)
-      setTestResult('Error: Network error occurred. Please try again.')
-    } finally {
-      setIsRunning(false)
-    }
-  }
 
   const handleSavePrompt = async () => {
     if (!user || !promptId) return
@@ -224,7 +191,6 @@ export default function PromptPage({ params }: PromptPageProps) {
     setPromptContent(version.content)
     setOriginalContent(version.content)
     setCurrentVersion(version)
-    setTestResult('') // 清除测试结果
     
     // 重置保存状态
     setHasUnsavedChanges(false)
@@ -246,7 +212,6 @@ export default function PromptPage({ params }: PromptPageProps) {
         setPromptContent(version.content)
         setOriginalContent(version.content)
         setCurrentVersion(version)
-        setTestResult('')
         
         // 刷新版本历史列表
         if (versionTimelineRef.current) {
@@ -374,131 +339,199 @@ export default function PromptPage({ params }: PromptPageProps) {
       </div>
 
       <div className="max-w-7xl mx-auto p-4">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Left Sidebar - Version Timeline */}
-          <div className="lg:col-span-1">
-            <div className="bg-card rounded-lg border border-border p-4">
-              <VersionTimeline
-                ref={versionTimelineRef}
-                promptId={promptId}
-                userId={user.id}
-                currentVersion={currentVersion}
-                hasUnsavedChanges={hasUnsavedChanges}
-                onVersionSelect={handleVersionSelect}
-                onVersionRestore={handleVersionRestore}
-              />
+        {/* Mobile Layout (stacked) */}
+        <div className="lg:hidden space-y-6">
+          {/* 1. Prompt Editor (Mobile First) */}
+          <div className="bg-card rounded-lg border border-border">
+            <div className="p-4 border-b border-border">
+              <div className="flex items-center justify-between">
+                <h3 className="font-semibold text-foreground">{t('promptEditor')}</h3>
+                <div className="flex items-center space-x-1 text-xs text-muted-foreground">
+                  <span>{promptContent.length} characters</span>
+                </div>
+              </div>
             </div>
-
-            {/* Prompt Info */}
-            <div className="mt-6 bg-card rounded-lg border border-border p-4">
-              <h3 className="font-semibold text-foreground mb-3">Prompt Info</h3>
-              <div className="space-y-3 text-sm">
-                <div className="flex items-center justify-between">
-                  <span className="text-muted-foreground">Created</span>
-                  <span className="text-foreground">{prompt?.createdAt ? new Date(prompt.createdAt).toLocaleDateString() : '-'}</span>
+            <div className="p-4">
+              <div className="space-y-4">
+                <div>
+                  <Label htmlFor="promptTitle" className="text-sm font-medium">
+                    {t('promptName')}
+                  </Label>
+                  <Input
+                    id="promptTitle"
+                    value={promptTitle}
+                    onChange={(e) => setPromptTitle(e.target.value)}
+                    className="mt-1"
+                  />
                 </div>
-                <div className="flex items-center justify-between">
-                  <span className="text-muted-foreground">Updated</span>
-                  <span className="text-foreground">{prompt?.updatedAt ? new Date(prompt.updatedAt).toLocaleDateString() : '-'}</span>
-                </div>
-                <div className="flex items-center justify-between">
-                  <span className="text-muted-foreground">Last used</span>
-                  <span className="text-foreground">{prompt?.lastUsed ? new Date(prompt.lastUsed).toLocaleDateString() : 'Never'}</span>
-                </div>
-                <div className="flex items-center justify-between">
-                  <span className="text-muted-foreground">Usage count</span>
-                  <span className="text-foreground">{prompt?.usage || 0}</span>
-                </div>
-                <div className="pt-2 border-t border-border">
-                  <div className="flex flex-wrap gap-1">
-                    {prompt?.tags?.map((tag: string | { name: string }) => {
-                      const tagName = typeof tag === 'string' ? tag : tag?.name || '';
-                      return (
-                        <span
-                          key={tagName}
-                          className="inline-flex items-center px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded-full"
-                        >
-                          {tagName}
-                        </span>
-                      );
-                    })}
-                  </div>
+                <div>
+                  <Label htmlFor="promptContent" className="text-sm font-medium">
+                    {t('promptContent')}
+                  </Label>
+                  <Textarea
+                    id="promptContent"
+                    value={promptContent}
+                    onChange={(e) => setPromptContent(e.target.value)}
+                    className="mt-1 min-h-[300px] font-mono text-sm resize-none"
+                    placeholder="Write your prompt here..."
+                  />
                 </div>
               </div>
             </div>
           </div>
 
-          {/* Main Content */}
-          <div className="lg:col-span-2 space-y-6">
-            {/* Action Bar */}
-            <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-2">
-                <Button
-                  onClick={handleSavePrompt}
-                  disabled={isSaving}
-                  className="flex items-center space-x-2"
-                >
-                  {isSaving ? (
-                    <LoadingSpinner size="sm" className="mr-2" />
-                  ) : (
-                    <Save className="h-4 w-4 mr-2" />
-                  )}
-                  {tCommon('save')}
-                </Button>
-
-                <Button
-                  variant="outline"
-                  onClick={handleRunTest}
-                  disabled={isRunning || !promptContent.trim()}
-                  className="flex items-center space-x-2"
-                >
-                  {isRunning ? (
-                    <LoadingSpinner size="sm" className="mr-2" />
-                  ) : (
-                    <Play className="h-4 w-4 mr-2" />
-                  )}
-                  {t('runTest')}
-                </Button>
-
-                <Button
-                  variant="outline"
-                  onClick={() => copyToClipboard(promptContent)}
-                  className="flex items-center space-x-2"
-                >
-                  <Copy className="h-4 w-4 mr-2" />
-                  Copy
-                </Button>
-              </div>
-
-              <div className="flex items-center space-x-2 text-sm">
-                {hasUnsavedChanges ? (
-                  <>
-                    <div className="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></div>
-                    <span className="text-orange-600 dark:text-orange-400">Unsaved changes</span>
-                  </>
+          {/* Action Bar (Mobile) */}
+          <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4">
+            <div className="flex items-center space-x-2">
+              <Button
+                onClick={handleSavePrompt}
+                disabled={isSaving}
+                className="flex items-center space-x-2 flex-1 sm:flex-none"
+              >
+                {isSaving ? (
+                  <LoadingSpinner size="sm" className="mr-2" />
                 ) : (
-                  <>
-                    <Clock className="h-4 w-4 text-muted-foreground" />
-                    <span className="text-muted-foreground">All changes saved</span>
-                  </>
+                  <Save className="h-4 w-4 mr-2" />
                 )}
-              </div>
+                {tCommon('save')}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={() => copyToClipboard(promptContent)}
+                className="flex items-center space-x-2"
+                size="sm"
+              >
+                <Copy className="h-4 w-4 mr-2" />
+                Copy
+              </Button>
             </div>
 
-            {/* Editor */}
-            <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+            <div className="flex items-center justify-center space-x-2 text-sm">
+              {hasUnsavedChanges ? (
+                <>
+                  <div className="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></div>
+                  <span className="text-orange-600 dark:text-orange-400">Unsaved changes</span>
+                </>
+              ) : (
+                <>
+                  <Clock className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-muted-foreground">All changes saved</span>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* 2. Version History (Mobile Second) */}
+          <div className="bg-card rounded-lg border border-border p-4">
+            <VersionTimeline
+              ref={versionTimelineRef}
+              promptId={promptId}
+              userId={user.id}
+              currentVersion={currentVersion}
+              hasUnsavedChanges={hasUnsavedChanges}
+              onVersionSelect={handleVersionSelect}
+              onVersionRestore={handleVersionRestore}
+            />
+          </div>
+
+          {/* 3. Prompt Info (Mobile Third) */}
+          <div className="bg-card rounded-lg border border-border p-4">
+            <h3 className="font-semibold text-foreground mb-3">Prompt Info</h3>
+            <div className="grid grid-cols-2 gap-3 text-sm">
+              <div className="flex flex-col">
+                <span className="text-muted-foreground text-xs">Created</span>
+                <span className="text-foreground font-medium">{prompt?.createdAt ? new Date(prompt.createdAt).toLocaleDateString() : '-'}</span>
+              </div>
+              <div className="flex flex-col">
+                <span className="text-muted-foreground text-xs">Updated</span>
+                <span className="text-foreground font-medium">{prompt?.updatedAt ? new Date(prompt.updatedAt).toLocaleDateString() : '-'}</span>
+              </div>
+              <div className="flex flex-col">
+                <span className="text-muted-foreground text-xs">Last used</span>
+                <span className="text-foreground font-medium">{prompt?.lastUsed ? new Date(prompt.lastUsed).toLocaleDateString() : 'Never'}</span>
+              </div>
+              <div className="flex flex-col">
+                <span className="text-muted-foreground text-xs">Usage count</span>
+                <span className="text-foreground font-medium">{prompt?.usage || 0}</span>
+              </div>
+            </div>
+            <div className="pt-3 border-t border-border mt-3">
+              <div className="flex flex-wrap gap-1">
+                {prompt?.tags?.map((tag: string | { name: string }) => {
+                  const tagName = typeof tag === 'string' ? tag : tag?.name || '';
+                  return (
+                    <span
+                      key={tagName}
+                      className="inline-flex items-center px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded-full"
+                    >
+                      {tagName}
+                    </span>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Desktop Layout (optimized) */}
+        <div className="hidden lg:block">
+          <div className="grid grid-cols-3 gap-8">
+            {/* Left Column - Prompt Editor (Desktop) */}
+            <div className="col-span-2 space-y-6">
+              {/* Action Bar */}
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <Button
+                    onClick={handleSavePrompt}
+                    disabled={isSaving}
+                    className="flex items-center space-x-2"
+                  >
+                    {isSaving ? (
+                      <LoadingSpinner size="sm" className="mr-2" />
+                    ) : (
+                      <Save className="h-4 w-4 mr-2" />
+                    )}
+                    {tCommon('save')}
+                  </Button>
+
+                  <Button
+                    variant="outline"
+                    onClick={() => copyToClipboard(promptContent)}
+                    className="flex items-center space-x-2"
+                  >
+                    <Copy className="h-4 w-4 mr-2" />
+                    Copy
+                  </Button>
+                </div>
+
+                <div className="flex items-center space-x-2 text-sm">
+                  {hasUnsavedChanges ? (
+                    <>
+                      <div className="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></div>
+                      <span className="text-orange-600 dark:text-orange-400">Unsaved changes</span>
+                    </>
+                  ) : (
+                    <>
+                      <Clock className="h-4 w-4 text-muted-foreground" />
+                      <span className="text-muted-foreground">All changes saved</span>
+                    </>
+                  )}
+                </div>
+              </div>
+
               {/* Prompt Editor */}
               <div className="bg-card rounded-lg border border-border">
-                <div className="p-4 border-b border-border">
+                <div className="p-6 border-b border-border">
                   <div className="flex items-center justify-between">
-                    <h3 className="font-semibold text-foreground">{t('promptEditor')}</h3>
-                    <div className="flex items-center space-x-1 text-xs text-muted-foreground">
+                    <h3 className="text-lg font-semibold text-foreground">{t('promptEditor')}</h3>
+                    <div className="flex items-center space-x-1 text-sm text-muted-foreground">
                       <span>{promptContent.length} characters</span>
                     </div>
                   </div>
                 </div>
-                <div className="p-4">
-                  <div className="space-y-4">
+                <div className="p-6">
+                  <div className="space-y-6">
                     <div>
                       <Label htmlFor="promptTitle" className="text-sm font-medium">
                         {t('promptName')}
@@ -507,7 +540,7 @@ export default function PromptPage({ params }: PromptPageProps) {
                         id="promptTitle"
                         value={promptTitle}
                         onChange={(e) => setPromptTitle(e.target.value)}
-                        className="mt-1"
+                        className="mt-2"
                       />
                     </div>
 
@@ -519,62 +552,64 @@ export default function PromptPage({ params }: PromptPageProps) {
                         id="promptContent"
                         value={promptContent}
                         onChange={(e) => setPromptContent(e.target.value)}
-                        className="mt-1 min-h-[400px] font-mono text-sm resize-none"
+                        className="mt-2 min-h-[500px] font-mono text-sm resize-none"
                         placeholder="Write your prompt here..."
                       />
                     </div>
                   </div>
                 </div>
               </div>
+            </div>
 
-              {/* Test Results */}
-              <div className="bg-card rounded-lg border border-border">
-                <div className="p-4 border-b border-border">
+            {/* Right Column - Version History & Prompt Info */}
+            <div className="col-span-1 space-y-6">
+              {/* Version History */}
+              <div className="bg-card rounded-lg border border-border p-4">
+                <VersionTimeline
+                  ref={versionTimelineRef}
+                  promptId={promptId}
+                  userId={user.id}
+                  currentVersion={currentVersion}
+                  hasUnsavedChanges={hasUnsavedChanges}
+                  onVersionSelect={handleVersionSelect}
+                  onVersionRestore={handleVersionRestore}
+                />
+              </div>
+
+              {/* Prompt Info */}
+              <div className="bg-card rounded-lg border border-border p-4">
+                <h3 className="font-semibold text-foreground mb-4">Prompt Info</h3>
+                <div className="space-y-4 text-sm">
                   <div className="flex items-center justify-between">
-                    <h3 className="font-semibold text-foreground">{t('testResults')}</h3>
-                    {testResult && (
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => copyToClipboard(testResult)}
-                        className="h-7"
-                      >
-                        <Copy className="h-3 w-3 mr-1" />
-                        Copy
-                      </Button>
-                    )}
+                    <span className="text-muted-foreground">Created</span>
+                    <span className="text-foreground font-medium">{prompt?.createdAt ? new Date(prompt.createdAt).toLocaleDateString() : '-'}</span>
                   </div>
-                </div>
-
-                <div className="p-4">
-                  <div className="bg-muted rounded-lg min-h-[400px] p-4">
-                    {isRunning ? (
-                      <div className="flex items-center justify-center h-full">
-                        <div className="text-center">
-                          <LoadingSpinner size="lg" />
-                          <p className="mt-4 text-muted-foreground">Running prompt test...</p>
-                          <p className="text-xs text-muted-foreground mt-2">This may take a few seconds</p>
-                        </div>
-                      </div>
-                    ) : testResult ? (
-                      <div className="space-y-4">
-                        <pre className="text-sm text-foreground whitespace-pre-wrap leading-relaxed">
-                          {testResult}
-                        </pre>
-                      </div>
-                    ) : (
-                      <div className="flex items-center justify-center h-full text-center">
-                        <div>
-                          <Zap className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-                          <p className="text-muted-foreground mb-2">
-                            {t('clickRunTestToSee')}
-                          </p>
-                          <p className="text-xs text-muted-foreground">
-                            Test your prompt with AI models to see the output
-                          </p>
-                        </div>
-                      </div>
-                    )}
+                  <div className="flex items-center justify-between">
+                    <span className="text-muted-foreground">Updated</span>
+                    <span className="text-foreground font-medium">{prompt?.updatedAt ? new Date(prompt.updatedAt).toLocaleDateString() : '-'}</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-muted-foreground">Last used</span>
+                    <span className="text-foreground font-medium">{prompt?.lastUsed ? new Date(prompt.lastUsed).toLocaleDateString() : 'Never'}</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-muted-foreground">Usage count</span>
+                    <span className="text-foreground font-medium">{prompt?.usage || 0}</span>
+                  </div>
+                  <div className="pt-3 border-t border-border">
+                    <div className="flex flex-wrap gap-1">
+                      {prompt?.tags?.map((tag: string | { name: string }) => {
+                        const tagName = typeof tag === 'string' ? tag : tag?.name || '';
+                        return (
+                          <span
+                            key={tagName}
+                            className="inline-flex items-center px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded-full"
+                          >
+                            {tagName}
+                          </span>
+                        );
+                      })}
+                    </div>
                   </div>
                 </div>
               </div>