Add responsive view toggle for editor/preview

packages/web/public/locales/translation/en.yaml

@@ -40,6 +40,7 @@ agent_builder:
   description_placeholder: Describe what your agent does...
   description_too_long: Description must be 500 characters or less
   edit_agent: Edit Agent
+  editor: Editor
   enable_code_execution: Enabling code execution
   enter_agent_name: Enter the agent name
   enter_system_prompt: Enter a system prompt that defines the agent behavior
@@ -78,6 +79,7 @@ agent_builder:
   no_mcp_servers_match_filter: No MCP servers match your current filter.
   no_mcp_servers_selected: No MCP servers selected. Your agent will have basic functionality only.
   no_public_agents_available: No public agents available
+  preview: Preview
   public: Public Agents
   public_sharing_description: >-
     Make this agent available on public agent directories and be discovered and

packages/web/public/locales/translation/ja.yaml

@@ -41,6 +41,7 @@ agent_builder:
   description_placeholder: エージェントの機能を説明してください...
   description_too_long: 説明は500文字以下である必要があります
   edit_agent: エージェントを編集
+  editor: エディター
   enable_code_execution: コード実行を有効にする
   enter_agent_name: エージェント名を入力
   enter_system_prompt: エージェントの動作を定義するシステムプロンプトを入力
@@ -76,6 +77,7 @@ agent_builder:
   no_mcp_servers_match_filter: 現在のフィルターに一致するMCPサーバーがありません。
   no_mcp_servers_selected: MCPサーバーが選択されていません。エージェントは基本機能のみ利用できます。
   no_public_agents_available: 利用可能な公開エージェントがありません
+  preview: プレビュー
   public: 公開エージェント
   public_sharing_description: >-
     このエージェントを公開し、他のユーザーが発見して利用できるようにします。エージェントはすべてのユーザーに表示されますが、オリジナルを変更することはできません。

packages/web/src/pages/agentBuilder/AgentBuilderEditPage.tsx

@@ -8,7 +8,12 @@ import AgentForm, {
 import AgentTester from '../../components/agentBuilder/AgentTester';
 import { useAgentBuilder } from '../../hooks/agentBuilder/useAgentBuilder';
 import useAgentBuilderList from '../../hooks/agentBuilder/useAgentBuilderList';
-import { PiRobot as RobotIcon, PiArrowLeft as BackIcon } from 'react-icons/pi';
+import {
+  PiRobot as RobotIcon,
+  PiArrowLeft as BackIcon,
+  PiPencilSimple,
+  PiEye,
+} from 'react-icons/pi';
 
 const AgentBuilderEditPage: React.FC = () => {
   const { t } = useTranslation();
@@ -26,6 +31,9 @@ const AgentBuilderEditPage: React.FC = () => {
     null
   );
 
+  // View toggle state for responsive layout
+  const [activeView, setActiveView] = useState<'editor' | 'preview'>('editor');
+
   const handleSave = useCallback(
     async (formData: AgentFormData) => {
       if (agentId && isEditMode) {
@@ -118,24 +126,55 @@ const AgentBuilderEditPage: React.FC = () => {
   }
 
   return (
-    <div className="container mx-auto max-w-6xl px-4 py-8">
+    <div className="w-full px-8 py-8">
       {/* Header */}
       <div className="mb-6 flex items-center justify-between">
         <div className="flex items-center gap-4">
           <Button outlined onClick={handleCancel}>
-            <BackIcon className="mr-2 h-4 w-4" />
-            {t('common.back')}
+            <BackIcon className="h-4 w-4 sm:mr-2" />
+            <span className="hidden sm:inline">{t('common.back')}</span>
           </Button>
           <div>
             <h1 className="text-2xl font-bold text-gray-900">{title}</h1>
           </div>
         </div>
+
+        {/* View Toggle for small screens - aligned with title on right */}
+        <div className="lg:hidden">
+          <div className="flex rounded border text-xs font-bold">
+            <div
+              className={`my-1 ml-1 flex cursor-pointer items-center rounded px-2 py-1 ${
+                activeView === 'editor'
+                  ? 'bg-gray-600 text-white'
+                  : 'text-gray-600'
+              }`}
+              onClick={() => setActiveView('editor')}>
+              <PiPencilSimple className="text-base sm:mr-1" />
+              <span className="hidden sm:inline">
+                {t('agent_builder.editor')}
+              </span>
+            </div>
+            <div
+              className={`my-1 mr-1 flex cursor-pointer items-center rounded px-2 py-1 ${
+                activeView === 'preview'
+                  ? 'bg-gray-600 text-white'
+                  : 'text-gray-600'
+              }`}
+              onClick={() => setActiveView('preview')}>
+              <PiEye className="text-base sm:mr-1" />
+              <span className="hidden sm:inline">
+                {t('agent_builder.preview')}
+              </span>
+            </div>
+          </div>
+        </div>
       </div>
 
-      {/* Content */}
+      {/* Content - Large screens: side-by-side, Small screens: toggle view */}
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-        {/* Agent Configuration */}
-        <div className="space-y-6">
+        {/* Agent Configuration - Always visible on large screens, toggle on small */}
+        <div
+          className={`space-y-6 ${activeView !== 'editor' ? 'hidden lg:block' : ''}`}>
           <AgentForm
             initialData={agent || undefined}
             onSave={handleSave}
@@ -147,9 +186,10 @@ const AgentBuilderEditPage: React.FC = () => {
           />
         </div>
 
-        {/* Agent Testing */}
+        {/* Agent Testing - Always visible on large screens, toggle on small */}
         {(currentFormData || agent) && (
-          <div className="space-y-6">
+          <div
+            className={`space-y-6 ${activeView !== 'preview' ? 'hidden lg:block' : ''}`}>
             <AgentTester
               agent={{
                 // Use current form data if available, otherwise use existing agent data