Implement workflow-driven UX with improved Playground layout

- Redesign Home page with clear 3-path workflow (Templates/Create/Chat)
- Expand Playground settings panel from 320px to 384px (w-96)
- Make system prompt always visible and prominent (no collapsible)
- Add creation mode detection (?mode=create) with visual indicators
- Style system prompt area like ChatGPT with better UX
- Combine assistant builder functionality into unified Playground
- Improve user guidance with contextual tips and better labeling

frontend/src/App.tsx

@@ -2,8 +2,6 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { Layout } from './components/Layout'
 import { Home } from './pages/Home'
 import { Playground } from './pages/Playground'
-import { ChatInterface } from './pages/ChatInterface'
-import { AssistantBuilder } from './pages/AssistantBuilder'
 import { Models } from './pages/Models'
 import { Assistants } from './pages/Assistants'
 import { Community } from './pages/Community'
@@ -16,8 +14,6 @@ function App() {
         <Route path="/" element={<Layout />}>
           <Route index element={<Home />} />
           <Route path="playground" element={<Playground />} />
-          <Route path="chat" element={<ChatInterface />} />
-          <Route path="assistant-builder" element={<AssistantBuilder />} />
           <Route path="models" element={<Models />} />
           <Route path="assistants" element={<Assistants />} />
           <Route path="community" element={<Community />} />

frontend/src/components/Sidebar.tsx

@@ -7,8 +7,7 @@ import {
   Settings,
   Brain,
   Bot,
-  Users,
-  Wrench
+  Users
 } from 'lucide-react'
 
 const navigation = [
@@ -19,34 +18,28 @@ const navigation = [
     description: 'Overview and getting started'
   },
   {
-    name: 'Chat',
-    href: '/chat',
+    name: 'Chat Playground',
+    href: '/playground',
     icon: MessageSquare,
-    description: 'Chat with your AI assistants'
+    description: 'AI chatbot with conversation history'
   },
   {
-    name: 'Assistant Builder',
-    href: '/assistant-builder',
-    icon: Wrench,
-    description: 'Create and customize AI assistants'
+    name: 'Model Catalog',
+    href: '/models',
+    icon: BookOpen,
+    description: 'Browse and manage AI models'
   },
   {
     name: 'My Assistants',
     href: '/assistants',
     icon: Bot,
-    description: 'Manage your saved assistants'
+    description: 'Manage your custom AI assistants'
   },
   {
     name: 'Community',
     href: '/community',
     icon: Users,
-    description: 'Discover community templates'
-  },
-  {
-    name: 'Models',
-    href: '/models',
-    icon: BookOpen,
-    description: 'Manage AI models'
+    description: 'Discover and share assistant templates'
   },
   {
     name: 'Settings',

frontend/src/pages/AssistantBuilder.tsx

@@ -1,476 +0,0 @@
-import { useState, useEffect } from 'react'
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Slider } from '@/components/ui/slider'
-import { Label } from '@/components/ui/label'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { 
-  Bot, 
-  Save,
-  MessageSquare,
-  Settings,
-  Brain,
-  Zap,
-  ArrowLeft,
-  Copy,
-  Sparkles,
-  User,
-  Info
-} from 'lucide-react'
-
-interface ModelInfo {
-  model_name: string
-  name: string
-  supports_thinking: boolean
-  description: string
-  size_gb: string
-  is_loaded: boolean
-  type: 'local' | 'api'
-}
-
-interface ModelsResponse {
-  models: ModelInfo[]
-  current_model: string
-}
-
-interface AssistantConfig {
-  id?: string
-  name: string
-  description: string
-  instructions: string
-  model: string
-  temperature: number
-  maxTokens: number
-  capabilities: string[]
-  createdAt?: string
-}
-
-export function AssistantBuilder() {
-  const [models, setModels] = useState<ModelInfo[]>([])
-  const [loading, setLoading] = useState(true)
-  
-  // Assistant configuration
-  const [config, setConfig] = useState<AssistantConfig>({
-    name: '',
-    description: '',
-    instructions: '',
-    model: '',
-    temperature: 0.7,
-    maxTokens: 1024,
-    capabilities: []
-  })
-
-  // UI state
-  const [saving, setSaving] = useState(false)
-  const [isEditing, setIsEditing] = useState(false)
-
-  useEffect(() => {
-    fetchModels()
-    // Check if we're editing an existing assistant
-    checkForExistingAssistant()
-  }, [])
-
-  const fetchModels = async () => {
-    try {
-      const baseUrl = `${window.location.protocol}//${window.location.host}`
-      const res = await fetch(`${baseUrl}/models`)
-      
-      if (!res.ok) {
-        throw new Error(`Failed to fetch models: ${res.status}`)
-      }
-      
-      const data: ModelsResponse = await res.json()
-      setModels(data.models)
-      
-      // Set default model if none selected
-      if (!config.model && data.models.length > 0) {
-        const apiModels = data.models.filter(m => m.type === 'api')
-        const defaultModel = apiModels.length > 0 ? apiModels[0].model_name : data.models[0].model_name
-        setConfig(prev => ({ ...prev, model: defaultModel }))
-      }
-    } catch (error) {
-      console.error('Error fetching models:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const checkForExistingAssistant = () => {
-    const editConfig = localStorage.getItem('editAssistantConfig')
-    if (editConfig) {
-      try {
-        const existingConfig = JSON.parse(editConfig)
-        setConfig(existingConfig)
-        setIsEditing(true)
-        localStorage.removeItem('editAssistantConfig')
-      } catch (error) {
-        console.error('Failed to load existing assistant config:', error)
-      }
-    }
-  }
-
-  const saveAssistant = async () => {
-    if (!config.name.trim() || !config.instructions.trim()) {
-      alert('Please provide a name and instructions for your assistant.')
-      return
-    }
-
-    setSaving(true)
-    
-    try {
-      const assistant = {
-        ...config,
-        id: config.id || Date.now().toString(),
-        createdAt: config.createdAt || new Date().toISOString(),
-        updatedAt: new Date().toISOString()
-      }
-      
-      // Save to localStorage
-      const savedAssistants = JSON.parse(localStorage.getItem('savedAssistants') || '[]')
-      
-      if (isEditing && config.id) {
-        const index = savedAssistants.findIndex((a: any) => a.id === config.id)
-        if (index !== -1) {
-          savedAssistants[index] = assistant
-        }
-      } else {
-        savedAssistants.push(assistant)
-      }
-      
-      localStorage.setItem('savedAssistants', JSON.stringify(savedAssistants))
-      
-      alert(`Assistant "${config.name}" saved successfully!`)
-      
-      // Reset form or navigate to assistants page
-      setConfig({
-        name: '',
-        description: '',
-        instructions: '',
-        model: models.length > 0 ? models[0].model_name : '',
-        temperature: 0.7,
-        maxTokens: 1024,
-        capabilities: []
-      })
-      setIsEditing(false)
-      
-    } catch (error) {
-      console.error('Error saving assistant:', error)
-      alert('Failed to save assistant. Please try again.')
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const testAssistant = () => {
-    if (!config.name.trim() || !config.instructions.trim()) {
-      alert('Please provide a name and instructions before testing.')
-      return
-    }
-
-    // Store current config for playground to use
-    localStorage.setItem('testAssistantConfig', JSON.stringify({
-      ...config,
-      systemPrompt: config.instructions
-    }))
-    
-    // Navigate to playground
-    window.location.href = '/playground'
-  }
-
-  const systemPromptExamples = [
-    {
-      title: "Code Review Expert",
-      description: "Analyzes code for quality, security, and best practices",
-      prompt: "You are a senior software engineer specializing in code review. Analyze the provided code for:\n\n1. **Code Quality**: Structure, readability, maintainability\n2. **Best Practices**: Following language conventions and patterns\n3. **Performance**: Potential optimizations and bottlenecks\n4. **Security**: Common vulnerabilities and security issues\n5. **Testing**: Testability and edge cases\n\nProvide constructive feedback with specific examples and actionable suggestions."
-    },
-    {
-      title: "Writing Assistant",
-      description: "Helps improve academic and professional writing",
-      prompt: "You are an experienced writing tutor. Help users improve their writing by:\n\n1. **Structure & Organization**: Clear thesis, logical flow, proper transitions\n2. **Clarity & Precision**: Eliminate ambiguity, improve word choice\n3. **Style**: Appropriate tone, engaging voice\n4. **Grammar & Mechanics**: Correct errors, improve sentence variety\n\nProvide specific feedback with examples and rewrite suggestions where helpful."
-    },
-    {
-      title: "Creative Brainstorming Partner",
-      description: "Generates creative ideas and helps develop concepts",
-      prompt: "You are a creative brainstorming partner with expertise in idea generation. Help users by:\n\n1. **Idea Generation**: Provide diverse, creative, and original ideas\n2. **Concept Development**: Help refine and expand on initial concepts\n3. **Problem Solving**: Approach challenges from multiple angles\n4. **Innovation**: Suggest unconventional solutions and approaches\n\nBe enthusiastic, encouraging, and think outside the box."
-    }
-  ]
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <div className="text-center">
-          <Brain className="h-8 w-8 animate-pulse mx-auto mb-4 text-blue-600" />
-          <p>Loading models...</p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="min-h-screen bg-background">
-      {/* Header */}
-      <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="max-w-6xl mx-auto p-6">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <Button 
-                variant="ghost" 
-                size="sm"
-                onClick={() => window.location.href = '/assistants'}
-                className="flex items-center gap-2"
-              >
-                <ArrowLeft className="h-4 w-4" />
-                Back
-              </Button>
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center">
-                  <Bot className="h-5 w-5 text-white" />
-                </div>
-                <div>
-                  <h1 className="text-2xl font-bold">
-                    {isEditing ? 'Edit Assistant' : 'Create Assistant'}
-                  </h1>
-                  <p className="text-sm text-muted-foreground">
-                    Design a custom AI assistant with specialized capabilities
-                  </p>
-                </div>
-              </div>
-            </div>
-            
-            <div className="flex items-center gap-3">
-              <Button 
-                variant="outline" 
-                onClick={testAssistant}
-                disabled={!config.name.trim() || !config.instructions.trim()}
-              >
-                <MessageSquare className="h-4 w-4 mr-2" />
-                Test Chat
-              </Button>
-              <Button 
-                onClick={saveAssistant} 
-                disabled={saving || !config.name.trim() || !config.instructions.trim()}
-              >
-                {saving ? (
-                  <>
-                    <Zap className="h-4 w-4 mr-2 animate-spin" />
-                    Saving...
-                  </>
-                ) : (
-                  <>
-                    <Save className="h-4 w-4 mr-2" />
-                    Save Assistant
-                  </>
-                )}
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="max-w-6xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
-        
-        {/* Configuration Panel */}
-        <div className="space-y-6">
-          
-          {/* Basic Information */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <User className="h-5 w-5" />
-                Basic Information
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <Label htmlFor="name">Assistant Name</Label>
-                <Input
-                  id="name"
-                  value={config.name}
-                  onChange={(e) => setConfig(prev => ({ ...prev, name: e.target.value }))}
-                  placeholder="e.g., Code Review Expert, Writing Assistant"
-                  className="mt-1"
-                />
-              </div>
-              
-              <div>
-                <Label htmlFor="description">Description</Label>
-                <Input
-                  id="description"
-                  value={config.description}
-                  onChange={(e) => setConfig(prev => ({ ...prev, description: e.target.value }))}
-                  placeholder="Brief description of what this assistant does"
-                  className="mt-1"
-                />
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Model Configuration */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Brain className="h-5 w-5" />
-                Model & Parameters
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <Label htmlFor="model">AI Model</Label>
-                <Select 
-                  value={config.model} 
-                  onValueChange={(value) => setConfig(prev => ({ ...prev, model: value }))}
-                >
-                  <SelectTrigger className="mt-1">
-                    <SelectValue placeholder="Choose a model" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {models.map((model) => (
-                      <SelectItem key={model.model_name} value={model.model_name}>
-                        <div className="flex items-center gap-2">
-                          <Badge variant={model.type === 'api' ? 'default' : 'secondary'} className="text-xs">
-                            {model.type === 'api' ? 'API' : 'Local'}
-                          </Badge>
-                          {model.name}
-                        </div>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              
-              <div>
-                <Label htmlFor="temperature">
-                  Temperature: {config.temperature}
-                </Label>
-                <Slider
-                  id="temperature"
-                  min={0}
-                  max={1}
-                  step={0.1}
-                  value={[config.temperature]}
-                  onValueChange={([value]) => setConfig(prev => ({ ...prev, temperature: value }))}
-                  className="mt-2"
-                />
-                <p className="text-xs text-muted-foreground mt-1">
-                  Lower = more focused, Higher = more creative
-                </p>
-              </div>
-              
-              <div>
-                <Label htmlFor="maxTokens">
-                  Max Tokens: {config.maxTokens}
-                </Label>
-                <Slider
-                  id="maxTokens"
-                  min={128}
-                  max={4096}
-                  step={128}
-                  value={[config.maxTokens]}
-                  onValueChange={([value]) => setConfig(prev => ({ ...prev, maxTokens: value }))}
-                  className="mt-2"
-                />
-                <p className="text-xs text-muted-foreground mt-1">
-                  Maximum length of the response
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Instructions Panel */}
-        <div className="space-y-6">
-          
-          {/* System Instructions */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Settings className="h-5 w-5" />
-                Instructions
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div>
-                <Label htmlFor="instructions">
-                  System Instructions
-                </Label>
-                <Textarea
-                  id="instructions"
-                  value={config.instructions}
-                  onChange={(e) => setConfig(prev => ({ ...prev, instructions: e.target.value }))}
-                  placeholder="Define how your assistant should behave, its role, and capabilities..."
-                  className="mt-1 min-h-[300px] text-sm"
-                />
-                <p className="text-xs text-muted-foreground mt-2">
-                  These instructions define your assistant's behavior, expertise, and response style.
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Examples */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Sparkles className="h-5 w-5" />
-                Example Templates
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-3">
-                {systemPromptExamples.map((example) => (
-                  <div 
-                    key={example.title}
-                    className="p-3 border rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"
-                    onClick={() => setConfig(prev => ({ 
-                      ...prev, 
-                      instructions: example.prompt,
-                      name: prev.name || example.title,
-                      description: prev.description || example.description
-                    }))}
-                  >
-                    <div className="flex items-start justify-between">
-                      <div>
-                        <h4 className="font-medium text-sm">{example.title}</h4>
-                        <p className="text-xs text-muted-foreground mt-1">
-                          {example.description}
-                        </p>
-                      </div>
-                      <Copy className="h-4 w-4 text-muted-foreground" />
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Info */}
-          <Card className="bg-blue-50 border-blue-200">
-            <CardContent className="pt-6">
-              <div className="flex items-start gap-3">
-                <Info className="h-5 w-5 text-blue-600 mt-0.5" />
-                <div>
-                  <h3 className="font-medium text-blue-900">Tips for Great Instructions</h3>
-                  <ul className="text-sm text-blue-700 mt-2 space-y-1">
-                    <li>• Be specific about the assistant's role and expertise</li>
-                    <li>• Include examples of desired behavior</li>
-                    <li>• Define the tone and style of responses</li>
-                    <li>• Specify any constraints or guidelines</li>
-                  </ul>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </div>
-  )
-}

frontend/src/pages/ChatInterface.tsx

@@ -1,334 +0,0 @@
-import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-
-import { Chat } from '@/components/ui/chat'
-import { useChat } from '@/hooks/useChat'
-import { 
-  MessageSquare, 
-  Settings,
-  Bot,
-  Plus,
-  Trash2,
-  History,
-  PanelLeftOpen,
-  PanelLeftClose
-} from 'lucide-react'
-
-interface AssistantConfig {
-  id: string
-  name: string
-  description: string
-  instructions: string
-  model: string
-  temperature: number
-  maxTokens: number
-  capabilities: string[]
-  createdAt: string
-}
-
-export function ChatInterface() {
-  const [savedAssistants, setSavedAssistants] = useState<AssistantConfig[]>([])
-  const [selectedAssistant, setSelectedAssistant] = useState<AssistantConfig | null>(null)
-  const [showSessions, setShowSessions] = useState(false)
-
-  // Chat functionality with restricted access
-  const {
-    sessions,
-    currentSessionId,
-    createNewSession,
-    selectSession,
-    deleteSession,
-    messages,
-    input,
-    setInput,
-    sendMessage,
-    stopGeneration,
-    isLoading,
-    // Remove direct access to these - they should be controlled by assistant
-    setSelectedModel,
-    setSystemPrompt,
-    setTemperature,
-    setMaxTokens
-  } = useChat()
-
-  useEffect(() => {
-    loadSavedAssistants()
-    
-    // Check if we're loading a specific assistant
-    checkForAssistantToLoad()
-  }, [])
-
-  const loadSavedAssistants = () => {
-    try {
-      const assistants = JSON.parse(localStorage.getItem('savedAssistants') || '[]')
-      setSavedAssistants(assistants)
-      
-      // If no assistant selected and we have assistants, select the first one
-      if (!selectedAssistant && assistants.length > 0) {
-        loadAssistant(assistants[0])
-      }
-    } catch (error) {
-      console.error('Failed to load assistants:', error)
-    }
-  }
-
-  const checkForAssistantToLoad = () => {
-    const testConfig = localStorage.getItem('testAssistantConfig')
-    const loadConfig = localStorage.getItem('loadAssistantConfig')
-    
-    if (testConfig) {
-      try {
-        const config = JSON.parse(testConfig)
-        setSelectedAssistant(config)
-        applyAssistantConfig(config)
-        localStorage.removeItem('testAssistantConfig')
-      } catch (error) {
-        console.error('Failed to load test assistant config:', error)
-      }
-    } else if (loadConfig) {
-      try {
-        const config = JSON.parse(loadConfig)
-        setSelectedAssistant(config)
-        applyAssistantConfig(config)
-        localStorage.removeItem('loadAssistantConfig')
-      } catch (error) {
-        console.error('Failed to load assistant config:', error)
-      }
-    }
-  }
-
-  const loadAssistant = (assistant: AssistantConfig) => {
-    setSelectedAssistant(assistant)
-    applyAssistantConfig(assistant)
-    
-    // Create a new session for this assistant
-    createNewSession()
-  }
-
-  const applyAssistantConfig = (config: AssistantConfig) => {
-    setSelectedModel(config.model)
-    setSystemPrompt(config.instructions)
-    setTemperature(config.temperature)
-    setMaxTokens(config.maxTokens)
-  }
-
-  const editCurrentAssistant = () => {
-    if (!selectedAssistant) return
-    
-    localStorage.setItem('editAssistantConfig', JSON.stringify(selectedAssistant))
-    window.location.href = '/assistant-builder'
-  }
-
-  return (
-    <div className="flex h-screen bg-background">
-      
-      {/* Sidebar - Assistant Selection */}
-      <div className={`${showSessions ? 'w-80' : 'w-0'} transition-all duration-200 overflow-hidden border-r bg-background/95`}>
-        <div className="p-4 border-b">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-semibold">My Assistants</h2>
-            <Button 
-              size="sm" 
-              onClick={() => window.location.href = '/assistant-builder'}
-            >
-              <Plus className="h-4 w-4" />
-            </Button>
-          </div>
-          
-          {/* Assistant List */}
-          <div className="space-y-2">
-            {savedAssistants.map((assistant) => (
-              <Card 
-                key={assistant.id}
-                className={`cursor-pointer hover:bg-accent transition-colors ${
-                  selectedAssistant?.id === assistant.id ? 'ring-2 ring-blue-500' : ''
-                }`}
-                onClick={() => loadAssistant(assistant)}
-              >
-                <CardContent className="p-3">
-                  <div className="flex items-start gap-2">
-                    <Bot className="h-4 w-4 mt-1 text-purple-600" />
-                    <div className="flex-1 min-w-0">
-                      <h3 className="font-medium text-sm truncate">{assistant.name}</h3>
-                      <p className="text-xs text-muted-foreground truncate">
-                        {assistant.description || 'No description'}
-                      </p>
-                      <Badge variant="secondary" className="text-xs mt-1">
-                        {assistant.model}
-                      </Badge>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-            
-            {savedAssistants.length === 0 && (
-              <div className="text-center py-8">
-                <Bot className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
-                <p className="text-sm text-muted-foreground">No assistants yet</p>
-                <Button 
-                  size="sm" 
-                  variant="outline" 
-                  className="mt-2"
-                  onClick={() => window.location.href = '/assistant-builder'}
-                >
-                  Create One
-                </Button>
-              </div>
-            )}
-          </div>
-        </div>
-        
-        {/* Chat Sessions */}
-        <div className="p-4">
-          <div className="flex items-center justify-between mb-3">
-            <h3 className="text-sm font-medium">Sessions</h3>
-            <Button size="sm" variant="ghost" onClick={createNewSession}>
-              <Plus className="h-3 w-3" />
-            </Button>
-          </div>
-          
-          <div className="space-y-1">
-            {sessions.map((session) => (
-              <div
-                key={session.id}
-                className={`flex items-center justify-between p-2 rounded-md cursor-pointer hover:bg-accent ${
-                  currentSessionId === session.id ? 'bg-accent' : ''
-                }`}
-              >
-                <div className="flex-1 min-w-0" onClick={() => selectSession(session.id)}>
-                  <p className="text-xs truncate">{session.title}</p>
-                  <p className="text-xs text-muted-foreground">
-                    {session.messages.length} messages
-                  </p>
-                </div>
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  onClick={() => deleteSession(session.id)}
-                  className="h-6 w-6 p-0"
-                >
-                  <Trash2 className="h-3 w-3" />
-                </Button>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Main Chat Area */}
-      <div className="flex-1 flex flex-col">
-        
-        {/* Header */}
-        <div className="border-b p-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setShowSessions(!showSessions)}
-              >
-                {showSessions ? (
-                  <PanelLeftClose className="h-4 w-4" />
-                ) : (
-                  <PanelLeftOpen className="h-4 w-4" />
-                )}
-              </Button>
-              
-              {selectedAssistant ? (
-                <div className="flex items-center gap-3">
-                  <div className="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center">
-                    <Bot className="h-4 w-4 text-white" />
-                  </div>
-                  <div>
-                    <h1 className="font-semibold">{selectedAssistant.name}</h1>
-                    <p className="text-sm text-muted-foreground">
-                      {selectedAssistant.description}
-                    </p>
-                  </div>
-                </div>
-              ) : (
-                <div>
-                  <h1 className="font-semibold">Select an Assistant</h1>
-                  <p className="text-sm text-muted-foreground">
-                    Choose an assistant to start chatting
-                  </p>
-                </div>
-              )}
-            </div>
-            
-            <div className="flex items-center gap-2">
-              {!selectedAssistant && savedAssistants.length === 0 && (
-                <Button onClick={() => window.location.href = '/assistant-builder'}>
-                  <Plus className="h-4 w-4 mr-2" />
-                  Create Assistant
-                </Button>
-              )}
-              
-              {selectedAssistant && (
-                <>
-                  <Button variant="outline" size="sm" onClick={editCurrentAssistant}>
-                    <Settings className="h-4 w-4" />
-                  </Button>
-                  
-                  <div className="flex items-center gap-2">
-                    <Badge variant="secondary" className="text-xs">
-                      {selectedAssistant.model}
-                    </Badge>
-                    <Badge variant="outline" className="text-xs">
-                      T: {selectedAssistant.temperature}
-                    </Badge>
-                    <Badge variant="outline" className="text-xs">
-                      Max: {selectedAssistant.maxTokens}
-                    </Badge>
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Chat Interface */}
-        <div className="flex-1 overflow-hidden">
-          {selectedAssistant ? (
-            <Chat
-              messages={messages}
-              input={input}
-              handleInputChange={(e) => setInput(e.target.value)}
-              handleSubmit={(e) => {
-                e.preventDefault()
-                sendMessage()
-              }}
-              isGenerating={isLoading}
-              stop={stopGeneration}
-            />
-          ) : (
-            <div className="flex items-center justify-center h-full">
-              <div className="text-center max-w-md">
-                <MessageSquare className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
-                <h2 className="text-xl font-semibold mb-2">Welcome to Chat Interface</h2>
-                <p className="text-muted-foreground mb-6">
-                  Select an assistant from the sidebar to start a conversation, or create a new one.
-                </p>
-                <div className="flex items-center justify-center gap-3">
-                  {savedAssistants.length > 0 ? (
-                    <Button onClick={() => setShowSessions(true)}>
-                      <History className="h-4 w-4 mr-2" />
-                      Choose Assistant
-                    </Button>
-                  ) : null}
-                  <Button onClick={() => window.location.href = '/assistant-builder'}>
-                    <Plus className="h-4 w-4 mr-2" />
-                    Create Assistant
-                  </Button>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

frontend/src/pages/Home.tsx

@@ -11,8 +11,7 @@ import {
   Zap,
   Shield,
   Cpu,
-  Brain,
-  Sparkles
+  Brain
 } from 'lucide-react'
 
 export function Home() {
@@ -54,56 +53,38 @@ export function Home() {
     }
   }
 
-  const workflows = [
+  const quickActions = [
     {
-      title: 'Quick Start',
-      subtitle: 'New to AI assistants?',
-      description: 'Start with pre-built templates from our community',
+      title: 'Start Chatting',
+      description: 'Begin conversations with AI models',
       icon: MessageSquare,
-      href: '/community',
+      href: '/playground',
       color: 'bg-blue-600',
-      primary: true,
-      badge: 'Recommended',
-      steps: ['Browse templates', 'Select one that fits', 'Start chatting immediately']
-    },
-    {
-      title: 'Custom Assistant',
-      subtitle: 'Need something specific?',
-      description: 'Create your own AI assistant with custom instructions',
-      icon: Bot,
-      href: '/assistant-builder',
-      color: 'bg-purple-600',
-      primary: true,
-      badge: 'Advanced',
-      steps: ['Define your assistant', 'Set parameters', 'Test and refine']
+      primary: true
     },
     {
-      title: 'Quick Chat',
-      subtitle: 'Already have assistants?',
-      description: 'Jump directly into conversations with your saved assistants',
-      icon: Zap,
-      href: '/chat',
-      color: 'bg-green-600',
-      primary: true,
-      badge: 'Fast',
-      steps: ['Select assistant', 'Start conversation', 'Get instant results']
-    }
-  ]
-
-  const supportActions = [
-    {
-      title: 'Manage Models',
-      description: 'Configure AI models and settings',
+      title: 'Browse Models',
+      description: 'Manage and load AI models',
       icon: BookOpen,
       href: '/models',
-      color: 'bg-gray-600'
+      color: 'bg-green-600',
+      primary: false
     },
     {
       title: 'My Assistants',
-      description: 'View and organize your saved assistants',
-      icon: Users,
+      description: 'Custom AI assistant configurations',
+      icon: Bot,
       href: '/assistants',
-      color: 'bg-orange-600'
+      color: 'bg-purple-600',
+      primary: false
+    },
+    {
+      title: 'Community',
+      description: 'Discover and share templates',
+      icon: Users,
+      href: '/community',
+      color: 'bg-orange-600',
+      primary: false
     }
   ]
 
@@ -152,99 +133,99 @@ export function Home() {
               Professional AI platform for local and cloud language models. 
               Complete privacy, advanced features, industrial-grade performance.
             </p>
-            
-                         <div className="flex items-center justify-center gap-4 pt-4">
-               <Button size="lg" onClick={() => window.location.href = '/community'} className="flex items-center gap-2">
-                 <MessageSquare className="h-5 w-5" />
-                 Get Started
-                 <ArrowRight className="h-4 w-4" />
-               </Button>
-               
-               <Button size="lg" variant="outline" onClick={() => window.location.href = '/assistant-builder'}>
-                 <Bot className="h-5 w-5 mr-2" />
-                 Create Assistant
-               </Button>
-             </div>
           </div>
         </div>
       </div>
 
-      <div className="max-w-6xl mx-auto px-6 py-12 space-y-12">
-        
-                 {/* Workflow Selection */}
+             <div className="max-w-6xl mx-auto px-6 py-12 space-y-12">
+         
+         {/* Workflow Guide */}
          <section>
            <div className="text-center mb-8">
-             <h2 className="text-2xl font-semibold mb-3">Choose Your Path</h2>
+             <h2 className="text-2xl font-semibold mb-3">Choose Your Starting Point</h2>
              <p className="text-gray-600 max-w-2xl mx-auto">
-               Select the workflow that best matches your experience level and needs
+               Select the path that matches your experience level and goals
              </p>
            </div>
            
-           {/* Primary Workflows */}
-           <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
-             {workflows.map((workflow) => (
-               <Card 
-                 key={workflow.title}
-                 className="hover:shadow-xl transition-all duration-300 cursor-pointer hover:-translate-y-2 border-2 border-transparent hover:border-blue-200 relative overflow-hidden"
-                 onClick={() => window.location.href = workflow.href}
-               >
-                 <div className="absolute top-4 right-4">
-                   <Badge className="bg-white text-gray-700 border border-gray-200 shadow-sm">
-                     {workflow.badge}
-                   </Badge>
+           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+             {/* New Users */}
+             <Card className="hover:shadow-xl transition-all duration-300 cursor-pointer hover:-translate-y-2 border-2 border-green-200 bg-green-50">
+               <CardContent className="p-8 text-center space-y-6">
+                 <div className="w-16 h-16 bg-green-600 rounded-2xl flex items-center justify-center mx-auto">
+                   <Users className="h-8 w-8 text-white" />
                  </div>
-                 
-                 <CardContent className="p-8 text-center space-y-6">
-                   <div className={`w-16 h-16 ${workflow.color} rounded-2xl flex items-center justify-center mx-auto`}>
-                     <workflow.icon className="h-8 w-8 text-white" />
-                   </div>
-                   
-                   <div>
-                     <h3 className="font-bold text-xl mb-1">{workflow.title}</h3>
-                     <p className="text-sm text-blue-600 font-medium mb-3">{workflow.subtitle}</p>
-                     <p className="text-gray-600 text-sm leading-relaxed mb-4">{workflow.description}</p>
+                 <div>
+                   <div className="inline-flex items-center gap-1 bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-medium mb-3">
+                     <span>👋</span> New to AI Assistants
                    </div>
-                   
-                   <div className="space-y-2 text-left">
-                     {workflow.steps.map((step, index) => (
-                       <div key={index} className="flex items-center gap-2 text-sm text-gray-600">
-                         <div className="w-5 h-5 bg-gray-100 rounded-full flex items-center justify-center text-xs font-medium">
-                           {index + 1}
-                         </div>
-                         <span>{step}</span>
-                       </div>
-                     ))}
-                   </div>
-                   
-                   <Button className="w-full" size="lg">
-                     Get Started
-                     <ArrowRight className="h-4 w-4 ml-2" />
-                   </Button>
-                 </CardContent>
-               </Card>
-             ))}
-           </div>
-           
-           {/* Support Actions */}
-           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-             {supportActions.map((action) => (
-               <Card 
-                 key={action.title}
-                 className="hover:shadow-md transition-all duration-200 cursor-pointer hover:-translate-y-1"
-                 onClick={() => window.location.href = action.href}
-               >
-                 <CardContent className="p-4 flex items-center gap-4">
-                   <div className={`w-12 h-12 ${action.color} rounded-lg flex items-center justify-center`}>
-                     <action.icon className="h-6 w-6 text-white" />
+                   <h3 className="font-bold text-xl mb-2">Start with Templates</h3>
+                   <p className="text-gray-600 text-sm leading-relaxed">
+                     Explore pre-built AI assistants from our community. Perfect for learning and getting immediate results.
+                   </p>
+                 </div>
+                 <Button 
+                   className="w-full bg-green-600 hover:bg-green-700" 
+                   size="lg"
+                   onClick={() => window.location.href = '/community'}
+                 >
+                   Browse Templates
+                   <ArrowRight className="h-4 w-4 ml-2" />
+                 </Button>
+               </CardContent>
+             </Card>
+
+             {/* Experienced Users */}
+             <Card className="hover:shadow-xl transition-all duration-300 cursor-pointer hover:-translate-y-2 border-2 border-blue-200 bg-blue-50">
+               <CardContent className="p-8 text-center space-y-6">
+                 <div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto">
+                   <Bot className="h-8 w-8 text-white" />
+                 </div>
+                 <div>
+                   <div className="inline-flex items-center gap-1 bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-xs font-medium mb-3">
+                     <span>🎯</span> Ready to Create
                    </div>
-                   <div className="flex-1">
-                     <h3 className="font-semibold text-base">{action.title}</h3>
-                     <p className="text-sm text-gray-600">{action.description}</p>
+                   <h3 className="font-bold text-xl mb-2">Build Custom Assistant</h3>
+                   <p className="text-gray-600 text-sm leading-relaxed">
+                     Create your own AI assistant with custom prompts, parameters, and specialized behaviors.
+                   </p>
+                 </div>
+                 <Button 
+                   className="w-full" 
+                   size="lg"
+                   onClick={() => window.location.href = '/playground?mode=create'}
+                 >
+                   Create Assistant
+                   <ArrowRight className="h-4 w-4 ml-2" />
+                 </Button>
+               </CardContent>
+             </Card>
+
+             {/* Quick Chat */}
+             <Card className="hover:shadow-xl transition-all duration-300 cursor-pointer hover:-translate-y-2 border-2 border-purple-200 bg-purple-50">
+               <CardContent className="p-8 text-center space-y-6">
+                 <div className="w-16 h-16 bg-purple-600 rounded-2xl flex items-center justify-center mx-auto">
+                   <MessageSquare className="h-8 w-8 text-white" />
+                 </div>
+                 <div>
+                   <div className="inline-flex items-center gap-1 bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-xs font-medium mb-3">
+                     <span>💬</span> Just Want to Chat
                    </div>
-                   <ArrowRight className="h-5 w-5 text-gray-400" />
-                 </CardContent>
-               </Card>
-             ))}
+                   <h3 className="font-bold text-xl mb-2">Quick Conversation</h3>
+                   <p className="text-gray-600 text-sm leading-relaxed">
+                     Jump straight into chatting with AI models. No setup required, start talking immediately.
+                   </p>
+                 </div>
+                 <Button 
+                   className="w-full bg-purple-600 hover:bg-purple-700" 
+                   size="lg"
+                   onClick={() => window.location.href = '/playground'}
+                 >
+                   Start Chatting
+                   <ArrowRight className="h-4 w-4 ml-2" />
+                 </Button>
+               </CardContent>
+             </Card>
            </div>
          </section>
 
@@ -292,29 +273,23 @@ export function Home() {
           </div>
         </section>
 
-                 {/* Recommendation */}
-         <section className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-2xl p-8 border border-blue-200">
-           <div className="text-center">
-             <div className="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center mx-auto mb-4">
-               <Sparkles className="h-6 w-6 text-white" />
-             </div>
-             <h2 className="text-2xl font-semibold mb-4">New to AI Assistants?</h2>
-             <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
-               We recommend starting with our <strong>Community Templates</strong> to see what's possible, 
-               then try creating your own custom assistant when you're ready.
-             </p>
-             <div className="flex items-center justify-center gap-4">
-               <Button size="lg" onClick={() => window.location.href = '/community'}>
-                 <Users className="h-4 w-4 mr-2" />
-                 Browse Templates
-               </Button>
-               <Button size="lg" variant="outline" onClick={() => window.location.href = '/assistant-builder'}>
-                 <Bot className="h-4 w-4 mr-2" />
-                 Create Assistant
-               </Button>
-             </div>
-           </div>
-         </section>
+        {/* Get Started */}
+        <section className="text-center bg-gray-50 rounded-2xl p-8">
+          <h2 className="text-2xl font-semibold mb-4">Ready to Get Started?</h2>
+          <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
+            Choose your preferred way to begin. Load models for local processing or start chatting with cloud APIs immediately.
+          </p>
+          <div className="flex items-center justify-center gap-4">
+            <Button onClick={() => window.location.href = '/playground'}>
+              <MessageSquare className="h-4 w-4 mr-2" />
+              Open Playground
+            </Button>
+            <Button variant="outline" onClick={() => window.location.href = '/assistants'}>
+              <Bot className="h-4 w-4 mr-2" />
+              Create Assistant
+            </Button>
+          </div>
+        </section>
       </div>
     </div>
   )

frontend/src/pages/Playground.tsx

@@ -108,6 +108,7 @@ export function Playground() {
   const [showSaveAssistant, setShowSaveAssistant] = useState(false)
   const [assistantName, setAssistantName] = useState('')
   const [assistantDescription, setAssistantDescription] = useState('')
+  const [isCreateMode, setIsCreateMode] = useState(false)
   
   // Model management state
   const [models, setModels] = useState<ModelInfo[]>([])
@@ -197,6 +198,12 @@ export function Playground() {
     fetchModels()
     // Check if we need to load an assistant configuration
     loadAssistantIfNeeded()
+    
+    // Check if we're in create mode from URL
+    const urlParams = new URLSearchParams(window.location.search)
+    if (urlParams.get('mode') === 'create') {
+      setIsCreateMode(true)
+    }
   }, [])
 
   const loadAssistantIfNeeded = () => {
@@ -461,9 +468,16 @@ export function Playground() {
               >
                 {showSessions ? <PanelLeftClose className="h-4 w-4" /> : <PanelLeftOpen className="h-4 w-4" />}
               </Button>
-              <MessageSquare className="h-5 w-5" />
-              <h1 className="text-lg font-semibold">Chat Playground</h1>
-              {currentSession && (
+              {isCreateMode ? <Bot className="h-5 w-5 text-blue-600" /> : <MessageSquare className="h-5 w-5" />}
+              <h1 className="text-lg font-semibold">
+                {isCreateMode ? 'Create AI Assistant' : 'Chat Playground'}
+              </h1>
+              {isCreateMode && (
+                <Badge variant="default" className="text-xs bg-blue-600">
+                  Creation Mode
+                </Badge>
+              )}
+              {currentSession && !isCreateMode && (
                 <Badge variant="outline" className="text-xs">
                   {currentSession.title.slice(0, 20)}...
                 </Badge>
@@ -559,8 +573,8 @@ export function Playground() {
             />
           </div>
 
-          {/* Settings Panel */}
-          <div className="w-80 border-l bg-muted/30 overflow-y-auto">
+          {/* Settings Panel - Expanded for better UX */}
+          <div className="w-96 border-l bg-muted/30 overflow-y-auto">
             <div className="p-4 space-y-6">
               <div className="flex items-center gap-2">
                 <Settings className="h-4 w-4" />
@@ -701,79 +715,67 @@ export function Playground() {
                 </CardContent>
               </Card>
 
-              {/* System Prompt */}
-              <Card>
-                <Collapsible 
-                  open={isSystemPromptOpen} 
-                  onOpenChange={setIsSystemPromptOpen}
-                >
-                  <CardHeader>
-                    <CollapsibleTrigger asChild>
-                      <Button variant="ghost" className="w-full justify-between p-0" disabled={isLoading}>
-                        <div className="flex items-center gap-2">
-                          <MessageSquare className="h-4 w-4" />
-                          <span className="text-sm font-medium">System Prompt</span>
-                          {systemPrompt && <Badge variant="secondary" className="text-xs">Custom</Badge>}
-                        </div>
-                        <ChevronDown className={`h-4 w-4 transition-transform ${isSystemPromptOpen ? 'transform rotate-180' : ''}`} />
-                      </Button>
-                    </CollapsibleTrigger>
-                  </CardHeader>
-                  <CollapsibleContent>
-                    <CardContent className="space-y-3">
-                      {/* Preset System Prompts */}
-                      <div>
-                        <Label className="text-xs font-medium text-muted-foreground">Quick Presets</Label>
-                        <div className="grid grid-cols-1 gap-1 mt-1">
-                          {systemPromptPresets.map((preset) => (
-                            <Button
-                              key={preset.name}
-                              variant="outline"
-                              size="sm"
-                              className="h-auto p-2 text-xs justify-start"
-                              onClick={() => setSystemPrompt(preset.prompt)}
-                              disabled={isLoading}
-                            >
-                              {preset.name}
-                            </Button>
-                          ))}
-                        </div>
-                      </div>
-
-                      {/* Custom System Prompt */}
-                      <div>
-                        <div className="flex items-center justify-between mb-2">
-                          <Label htmlFor="system-prompt" className="text-xs font-medium">
-                            Custom System Prompt
-                          </Label>
-                          {systemPrompt && (
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => setSystemPrompt('')}
-                              className="h-6 px-2 text-xs"
-                              disabled={isLoading}
-                            >
-                              <RotateCcw className="h-3 w-3 mr-1" />
-                              Clear
-                            </Button>
-                          )}
-                        </div>
-                        <textarea
-                          id="system-prompt"
-                          value={systemPrompt}
-                          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setSystemPrompt(e.target.value)}
-                          placeholder="Enter custom system prompt to define how the model should behave..."
-                          className="w-full min-h-[80px] text-xs p-2 border rounded-md bg-background"
+              {/* Assistant Configuration - Always Visible like ChatGPT */}
+              <Card className="border-2 border-blue-200 bg-blue-50/50">
+                <CardHeader>
+                  <CardTitle className="text-sm flex items-center gap-2">
+                    <Bot className="h-4 w-4 text-blue-600" />
+                    Assistant Configuration
+                    {systemPrompt && <Badge variant="default" className="text-xs bg-blue-600">Custom</Badge>}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {/* Quick Presets */}
+                  <div>
+                    <Label className="text-xs font-medium text-muted-foreground mb-2 block">Quick Presets</Label>
+                    <div className="grid grid-cols-2 gap-2">
+                      {systemPromptPresets.slice(0, 6).map((preset) => (
+                        <Button
+                          key={preset.name}
+                          variant="outline"
+                          size="sm"
+                          className="h-auto p-2 text-xs justify-start bg-white hover:bg-blue-50"
+                          onClick={() => setSystemPrompt(preset.prompt)}
                           disabled={isLoading}
-                        />
-                        <p className="text-xs text-muted-foreground mt-1">
-                          System prompts define the model's role and behavior.
-                        </p>
-                      </div>
-                    </CardContent>
-                  </CollapsibleContent>
-                </Collapsible>
+                        >
+                          {preset.name}
+                        </Button>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* System Prompt - Larger and More Prominent */}
+                  <div>
+                    <div className="flex items-center justify-between mb-3">
+                      <Label htmlFor="system-prompt" className="text-sm font-semibold">
+                        System Instructions
+                      </Label>
+                      {systemPrompt && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setSystemPrompt('')}
+                          className="h-7 px-2 text-xs"
+                          disabled={isLoading}
+                        >
+                          <RotateCcw className="h-3 w-3 mr-1" />
+                          Clear
+                        </Button>
+                      )}
+                    </div>
+                    <textarea
+                      id="system-prompt"
+                      value={systemPrompt}
+                      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setSystemPrompt(e.target.value)}
+                      placeholder="Define your AI assistant's role, personality, and behavior. For example: 'You are a helpful coding assistant that explains concepts clearly and provides practical examples...'"
+                      className="w-full min-h-[120px] text-sm p-3 border-2 border-blue-200 rounded-lg bg-white focus:border-blue-400 focus:ring-2 focus:ring-blue-100 resize-y"
+                      disabled={isLoading}
+                    />
+                    <p className="text-xs text-blue-600 mt-2 bg-blue-50 p-2 rounded">
+                      💡 <strong>Tip:</strong> Be specific about the assistant's role, tone, and how it should respond to help users.
+                    </p>
+                  </div>
+                </CardContent>
               </Card>
             </div>
           </div>