feat: replace Settings with Terminal in mobile bottom tabs — full-screen gateway terminal view

Author: BunsDev

app/page.tsx

@@ -91,6 +91,7 @@ const VIEW_ICONS: Record<string, { icon: string; label: string }> = {
   workshop: { icon: 'lucide:bot', label: 'Workshop' },
   skills: { icon: 'lucide:sparkles', label: 'Skills' },
   settings: { icon: 'lucide:settings', label: 'Settings' },
+  terminal: { icon: 'lucide:terminal', label: 'Terminal' },
 }
 
 const MODE_BUTTONS: Array<{ id: AppMode; icon: string; label: string }> = [
@@ -134,7 +135,7 @@ export default function EditorLayout() {
   const mobileViewTabs = useMemo(() => {
     // On mobile, curate tabs to useful views + always include settings
     const mobile = visibleViews.filter((v) => !['preview', 'diff', 'workshop'].includes(v))
-    if (!mobile.includes('settings')) mobile.push('settings')
+    if (!mobile.includes('terminal')) mobile.push('terminal')
     return mobile.slice(0, 5)
   }, [visibleViews])
   const activeViewMeta = VIEW_ICONS[activeView] ?? {

components/view-router.tsx

@@ -31,6 +31,10 @@ const PreviewPanel = dynamic(
 const AgentPanel = dynamic(() => import('@/components/agent-panel').then((m) => m.AgentPanel), {
   ssr: false,
 })
+const GatewayTerminal = dynamic(
+  () => import('@/components/gateway-terminal').then((m) => m.GatewayTerminal),
+  { ssr: false },
+)
 
 const VIEW_ICONS: Record<string, { label: string }> = {
   chat: { label: 'Chat' },
@@ -40,6 +44,7 @@ const VIEW_ICONS: Record<string, { label: string }> = {
   workshop: { label: 'Workshop' },
   skills: { label: 'Skills' },
   settings: { label: 'Settings' },
+  terminal: { label: 'Terminal' },
 }
 
 const viewVariants = {
@@ -86,6 +91,11 @@ export function ViewRouter() {
                 <SettingsPanel open={true} onClose={() => setView('editor')} />
               </div>
             )}
+            {activeView === 'terminal' && (
+              <div className="flex-1 flex min-h-0 min-w-0 overflow-hidden">
+                <GatewayTerminal />
+              </div>
+            )}
           </ErrorBoundary>
         </motion.div>
       </AnimatePresence>

context/view-context.tsx

@@ -20,6 +20,7 @@ export type ViewId =
   | 'workshop'
   | 'skills'
   | 'settings'
+  | 'terminal'
 
 const VIEW_ORDER: ViewId[] = [
   'chat',
@@ -29,6 +30,7 @@ const VIEW_ORDER: ViewId[] = [
   'workshop',
   'skills',
   'settings',
+  'terminal',
 ]
 
 interface ViewState {