release: v0.18.8 — multi-terminal tabs + recent agents + systemd fixes

DavidsonGomes · claude · DavidsonGomes · commit d6dc2457f65f · 2026-04-13T11:33:10.000-03:00
Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.18.8] - 2026-04-13
+
+### Added
+
+- **Multi-terminal tabs per agent** — each agent page now supports multiple terminal sessions with a tab bar. Create new terminals with the `+` button, switch between them, and close sessions individually. Backend adds `GET /api/sessions/by-agent/:name` and `POST /api/sessions/create` endpoints
+- **Recent Agents section** — the Agents page shows the last 6 visited agents at the top for quick access, with avatar, name, command, and running indicator. Tracked via localStorage
+
+### Fixed
+
+- **systemd KillMode=none** — nohup background processes (Flask, terminal-server) were being killed when the oneshot ExecStart script finished. `KillMode=none` prevents systemd from sending SIGTERM to child processes
+- **install-service.sh regenerates start-services.sh** — the copied script had hardcoded `/root/` paths from the original installation, causing `Permission denied` errors when running as the `evonexus` user
+
 ## [0.18.7] - 2026-04-12
 
 ### Added
diff --git a/cli/package.json b/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@evoapi/evo-nexus",
-  "version": "0.18.7",
+  "version": "0.18.8",
   "description": "Unofficial open source toolkit for Claude Code — AI-powered business operating system",
   "keywords": [
     "claude-code",
diff --git a/dashboard/frontend/src/components/AgentTerminal.tsx b/dashboard/frontend/src/components/AgentTerminal.tsx
@@ -6,6 +6,7 @@ import '@xterm/xterm/css/xterm.css'
 
 interface AgentTerminalProps {
   agent: string
+  sessionId?: string
   workingDir?: string
   accentColor?: string
 }
@@ -24,7 +25,7 @@ const CC_WEB_WS = isLocal
 
 type Status = 'connecting' | 'ready' | 'starting' | 'running' | 'error' | 'exited'
 
-export default function AgentTerminal({ agent, workingDir, accentColor = '#00FFA7' }: AgentTerminalProps) {
+export default function AgentTerminal({ agent, sessionId: externalSessionId, workingDir, accentColor = '#00FFA7' }: AgentTerminalProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const termRef = useRef<Terminal | null>(null)
   const fitRef = useRef<FitAddon | null>(null)
@@ -140,19 +141,30 @@ export default function AgentTerminal({ agent, workingDir, accentColor = '#00FFA
       setErrorMsg(null)
       term!.clear()
 
-      // 1) Find-or-create session for this agent
+      // 1) Use provided sessionId or find-or-create for this agent
       let sessionId: string
       let alreadyActive = false
       try {
-        const res = await fetch(`${CC_WEB_HTTP}/api/sessions/for-agent`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ agentName: agent, workingDir }),
-        })
-        if (!res.ok) throw new Error(`HTTP ${res.status}`)
-        const data = await res.json()
-        sessionId = data.sessionId
-        alreadyActive = !!data.session?.active
+        if (externalSessionId) {
+          // Use the specific session provided by the parent (multi-tab mode)
+          sessionId = externalSessionId
+          const infoRes = await fetch(`${CC_WEB_HTTP}/api/sessions/${externalSessionId}`)
+          if (infoRes.ok) {
+            const info = await infoRes.json()
+            alreadyActive = !!info.active
+          }
+        } else {
+          // Default: find-or-create session for this agent
+          const res = await fetch(`${CC_WEB_HTTP}/api/sessions/for-agent`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ agentName: agent, workingDir }),
+          })
+          if (!res.ok) throw new Error(`HTTP ${res.status}`)
+          const data = await res.json()
+          sessionId = data.sessionId
+          alreadyActive = !!data.session?.active
+        }
       } catch (e: any) {
         if (cancelled) return
         setStatus('error')
@@ -277,7 +289,7 @@ export default function AgentTerminal({ agent, workingDir, accentColor = '#00FFA
         wsRef.current = null
       }
     }
-  }, [agent, workingDir])
+  }, [agent, externalSessionId, workingDir])
 
   const statusDotColor =
     status === 'running'
diff --git a/dashboard/frontend/src/pages/AgentDetail.tsx b/dashboard/frontend/src/pages/AgentDetail.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import { useParams, Link } from 'react-router-dom'
-import { ArrowLeft, ChevronDown, ChevronRight, PanelLeft, X, Lock } from 'lucide-react'
+import { ArrowLeft, ChevronDown, ChevronRight, PanelLeft, X, Lock, Plus, Terminal as TerminalIcon } from 'lucide-react'
 import { api } from '../lib/api'
 import Markdown from '../components/Markdown'
 import AgentTerminal from '../components/AgentTerminal'
 import { getAgentMeta } from '../lib/agent-meta'
+import { trackAgentVisit } from './Agents'
 import { AgentAvatar } from '../components/AgentAvatar'
 import { useAuth } from '../context/AuthContext'
 
@@ -16,6 +17,18 @@ interface MemoryFile {
 
 type Tab = 'profile' | 'memory'
 
+// Terminal-server URL (same logic as AgentTerminal)
+const isLocal = import.meta.env.DEV || /^(localhost|127\.0\.0\.1)$/i.test(window.location.hostname)
+const TS_HTTP = isLocal
+  ? `http://${window.location.hostname}:32352`
+  : `${window.location.origin}/terminal`
+
+interface TerminalTab {
+  id: string       // sessionId
+  name: string     // display name
+  active: boolean  // is claude running
+}
+
 function formatSize(bytes: number): string {
   if (bytes < 1024) return `${bytes}b`
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}kb`
@@ -40,6 +53,93 @@ export default function AgentDetail() {
   const [tab, setTab] = useState<Tab>('profile')
   const [railOpen, setRailOpen] = useState(false) // mobile drawer
 
+  // Multi-terminal tabs
+  const [termTabs, setTermTabs] = useState<TerminalTab[]>([])
+  const [activeTermTab, setActiveTermTab] = useState<string | null>(null)
+  const [, setTermTabsLoading] = useState(true)
+
+  // Track agent visit for "Recent" section
+  useEffect(() => {
+    if (name) trackAgentVisit(name)
+  }, [name])
+
+  // Load existing terminal sessions for this agent
+  useEffect(() => {
+    if (!name) return
+    setTermTabsLoading(true)
+    fetch(`${TS_HTTP}/api/sessions/by-agent/${name}`)
+      .then(r => r.ok ? r.json() : { sessions: [] })
+      .then(data => {
+        const sessions: TerminalTab[] = (data.sessions || []).map((s: any) => ({
+          id: s.id,
+          name: s.name || name,
+          active: s.active,
+        }))
+        if (sessions.length === 0) {
+          // No existing sessions — will use default find-or-create (no tab needed yet)
+          setTermTabs([])
+          setActiveTermTab(null)
+        } else {
+          setTermTabs(sessions)
+          setActiveTermTab(sessions[0].id)
+        }
+      })
+      .catch(() => {
+        setTermTabs([])
+        setActiveTermTab(null)
+      })
+      .finally(() => setTermTabsLoading(false))
+  }, [name])
+
+  const createNewTerminal = useCallback(async () => {
+    if (!name) return
+    try {
+      const res = await fetch(`${TS_HTTP}/api/sessions/create`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ agentName: name }),
+      })
+      if (!res.ok) return
+      const data = await res.json()
+      const newTab: TerminalTab = {
+        id: data.sessionId,
+        name: data.session?.name || `${name} #${termTabs.length + 1}`,
+        active: false,
+      }
+      // If this is the first extra tab, we also need to load the existing default session
+      if (termTabs.length === 0 && activeTermTab === null) {
+        // Fetch existing sessions first to get the default one
+        const existing = await fetch(`${TS_HTTP}/api/sessions/by-agent/${name}`)
+        if (existing.ok) {
+          const existingData = await existing.json()
+          const allSessions: TerminalTab[] = (existingData.sessions || [])
+            .filter((s: any) => s.id !== data.sessionId)
+            .map((s: any) => ({ id: s.id, name: s.name || name, active: s.active }))
+          setTermTabs([...allSessions, newTab])
+        } else {
+          setTermTabs([newTab])
+        }
+      } else {
+        setTermTabs(prev => [...prev, newTab])
+      }
+      setActiveTermTab(data.sessionId)
+    } catch {}
+  }, [name, termTabs, activeTermTab])
+
+  const closeTerminalTab = useCallback(async (sessionId: string) => {
+    // Stop and delete session
+    try {
+      await fetch(`${TS_HTTP}/api/sessions/${sessionId}`, { method: 'DELETE' })
+    } catch {}
+    setTermTabs(prev => {
+      const next = prev.filter(t => t.id !== sessionId)
+      if (activeTermTab === sessionId) {
+        setActiveTermTab(next.length > 0 ? next[0].id : null)
+      }
+      return next
+    })
+  }, [activeTermTab])
+
   useEffect(() => {
     if (!name) return
     setLoading(true)
@@ -226,7 +326,7 @@ export default function AgentDetail() {
         )}
 
         {/* Terminal stage */}
-        <section className="flex-1 min-w-0 relative bg-[#0C111D] overflow-hidden">
+        <section className="flex-1 min-w-0 relative bg-[#0C111D] overflow-hidden flex flex-col">
           {/* Ambient glow */}
           <div
             className="pointer-events-none absolute top-0 right-0 h-[400px] w-[400px] blur-3xl"
@@ -235,8 +335,70 @@ export default function AgentDetail() {
               opacity: 0.06,
             }}
           />
-          <div className="relative z-10 h-full">
-            <AgentTerminal agent={name} accentColor={agentColor} />
+
+          {/* Terminal tabs bar — only show when there are multiple tabs */}
+          {termTabs.length > 1 && (
+            <div className="relative z-10 flex items-center flex-shrink-0 h-9 border-b border-[#21262d] bg-[#0d1117] overflow-x-auto">
+              {termTabs.map((tt) => (
+                <div
+                  key={tt.id}
+                  className={`group flex items-center gap-2 px-3 h-full text-[11px] cursor-pointer border-r border-[#21262d] transition-colors ${
+                    activeTermTab === tt.id
+                      ? 'bg-[#0C111D] text-[#e6edf3]'
+                      : 'text-[#8b949e] hover:text-[#e6edf3] hover:bg-[#161b22]'
+                  }`}
+                  onClick={() => setActiveTermTab(tt.id)}
+                >
+                  <TerminalIcon size={11} style={{ color: activeTermTab === tt.id ? agentColor : undefined }} />
+                  <span className="truncate max-w-[120px]">{tt.name}</span>
+                  {tt.active && (
+                    <span
+                      className="inline-block h-1.5 w-1.5 rounded-full flex-shrink-0"
+                      style={{ backgroundColor: agentColor, boxShadow: `0 0 4px ${agentColor}88` }}
+                    />
+                  )}
+                  {termTabs.length > 1 && (
+                    <button
+                      onClick={(e) => { e.stopPropagation(); closeTerminalTab(tt.id) }}
+                      className="opacity-0 group-hover:opacity-100 text-[#667085] hover:text-[#ef4444] transition-opacity"
+                    >
+                      <X size={11} />
+                    </button>
+                  )}
+                </div>
+              ))}
+              {/* New tab button */}
+              <button
+                onClick={createNewTerminal}
+                className="flex items-center justify-center h-full px-2.5 text-[#667085] hover:text-[#e6edf3] hover:bg-[#161b22] transition-colors"
+                title="New terminal"
+              >
+                <Plus size={13} />
+              </button>
+            </div>
+          )}
+
+          {/* Single "+" button when only one tab (or none) — show as floating button */}
+          {termTabs.length <= 1 && (
+            <button
+              onClick={createNewTerminal}
+              className="absolute top-1.5 right-3 z-20 flex items-center gap-1 px-2 py-1 rounded text-[10px] text-[#667085] hover:text-[#e6edf3] bg-[#0d1117]/80 hover:bg-[#161b22] border border-[#21262d] transition-colors"
+              title="New terminal"
+            >
+              <Plus size={11} />
+              <span className="hidden sm:inline">New</span>
+            </button>
+          )}
+
+          {/* Terminal content */}
+          <div className="relative z-10 flex-1 min-h-0">
+            {termTabs.length === 0 || activeTermTab === null ? (
+              // Default mode — single terminal, no explicit sessionId
+              <AgentTerminal key={`default-${name}`} agent={name} accentColor={agentColor} />
+            ) : (
+              // Multi-tab mode — render the active session
+              <AgentTerminal key={activeTermTab} agent={name} sessionId={activeTermTab} accentColor={agentColor} />
+            )}
           </div>
         </section>
       </div>
diff --git a/dashboard/frontend/src/pages/Agents.tsx b/dashboard/frontend/src/pages/Agents.tsx
@@ -610,12 +610,37 @@ function SubSectionHeader({ label, count }: { label: string; count: number }) {
   )
 }
 
+// Recent agents — persisted in localStorage
+const RECENT_KEY = 'evo:recent-agents'
+const MAX_RECENT = 6
+
+function getRecentAgents(): string[] {
+  try {
+    const raw = localStorage.getItem(RECENT_KEY)
+    if (!raw) return []
+    const data = JSON.parse(raw) as { name: string; ts: number }[]
+    return data.sort((a, b) => b.ts - a.ts).map(d => d.name).slice(0, MAX_RECENT)
+  } catch { return [] }
+}
+
+export function trackAgentVisit(agentName: string) {
+  try {
+    const raw = localStorage.getItem(RECENT_KEY)
+    let data: { name: string; ts: number }[] = raw ? JSON.parse(raw) : []
+    data = data.filter(d => d.name !== agentName)
+    data.unshift({ name: agentName, ts: Date.now() })
+    data = data.slice(0, MAX_RECENT)
+    localStorage.setItem(RECENT_KEY, JSON.stringify(data))
+  } catch {}
+}
+
 export default function Agents() {
   const [agents, setAgents] = useState<Agent[]>([])
   const [loading, setLoading] = useState(true)
   const [runningAgents, setRunningAgents] = useState<string[]>([])
   const [filter, setFilter] = useState<FilterValue>('all')
   const [query, setQuery] = useState('')
+  const [recentNames] = useState(getRecentAgents)
 
   useEffect(() => {
     api.get('/agents')
@@ -750,6 +775,49 @@ export default function Agents() {
         )}
       </div>
 
+      {/* Recent agents */}
+      {!loading && recentNames.length > 0 && filter === 'all' && !query && (
+        <div className="mb-6">
+          <div className="flex items-center gap-2 mb-3">
+            <History size={13} className="text-[#667085]" />
+            <h2 className="text-[11px] font-medium uppercase tracking-wider text-[#667085]">Recent</h2>
+          </div>
+          <div className="flex gap-2 overflow-x-auto pb-1">
+            {recentNames
+              .filter(n => agents.some(a => a.name === n))
+              .map(name => {
+                const meta = AGENT_META[name] || DEFAULT_META
+                const running = isRunning(name)
+                return (
+                  <Link
+                    key={name}
+                    to={`/agents/${name}`}
+                    className="flex items-center gap-2.5 px-3 py-2 rounded-lg border border-[#21262d] bg-[#161b22] hover:border-[#30363d] hover:bg-[#1c2333] transition-all flex-shrink-0 group"
+                  >
+                    <div className="relative flex-shrink-0">
+                      <AgentAvatar name={name} size={28} />
+                      {running && (
+                        <span
+                          className="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2 border-[#161b22]"
+                          style={{ backgroundColor: '#22C55E', boxShadow: '0 0 6px rgba(34,197,94,0.5)' }}
+                        />
+                      )}
+                    </div>
+                    <div className="flex flex-col min-w-0">
+                      <span className="text-[12px] font-medium text-[#e6edf3] group-hover:text-white truncate">
+                        {name.split('-').map(w => w[0].toUpperCase() + w.slice(1)).join(' ')}
+                      </span>
+                      <span className="text-[10px] font-mono" style={{ color: meta.color }}>
+                        {meta.command}
+                      </span>
+                    </div>
+                  </Link>
+                )
+              })}
+          </div>
+        </div>
+      )}
+
       {/* Filter + Search bar */}
       {!loading && agents.length > 0 && (
         <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
diff --git a/dashboard/terminal-server/src/server.js b/dashboard/terminal-server/src/server.js
diff --git a/pyproject.toml b/pyproject.toml

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@evoapi/evo-nexus",`
`3`		`- "version": "0.18.7",`
	`3`	`+ "version": "0.18.8",`
`4`	`4`	`"description": "Unofficial open source toolkit for Claude Code — AI-powered business operating system",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"claude-code",`