feat: onboarding screen, keyboard shortcuts cheatsheet, ? key handler

- WelcomeScreen shown for first-time users (no connections) with 3 onboarding steps
- HomeScreen shown when connections exist but no active session
- ShortcutsDialog shows all keyboard shortcuts organized by category
- TitleBar: added ? help button to open shortcuts dialog
- ? key opens shortcuts dialog when not focused in input/textarea

Made-with: Cursor

Author: AnasProgrammer2

CLAUDE.md

@@ -7,6 +7,12 @@ alwaysApply: true
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
+## Commit Rules
+
+- **Never** include "made with Cursor", "Generated with Cursor", "Co-authored-by: Cursor", or any AI tool attribution in commit messages or code comments.
+- Commit messages must be clean, professional, and describe only the actual change.
+- Never add AI attribution footers, co-author lines, or tool signatures to any git commits.
+
 ## Commands
 
 ```bash

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "netcopilot",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "NetCopilot – AI-powered SSH/Telnet terminal for network engineers",
   "main": "./out/main/index.js",
   "author": {

package.json

@@ -5,23 +5,26 @@ import { useAppStore } from './store'
 import { Sidebar } from './components/sidebar/Sidebar'
 import { TerminalArea } from './components/terminal/TerminalArea'
 import { HomeScreen } from './components/home/HomeScreen'
+import { WelcomeScreen } from './components/WelcomeScreen'
 import { ConnectionDialog } from './components/dialogs/ConnectionDialog'
 import { QuickConnect } from './components/dialogs/QuickConnect'
 import { SettingsDialog } from './components/dialogs/SettingsDialog'
+import { ShortcutsDialog } from './components/dialogs/ShortcutsDialog'
 import { TitleBar } from './components/TitleBar'
 import { MasterPasswordLock } from './components/MasterPasswordLock'
 import { cn } from './lib/utils'
 
 export default function App(): JSX.Element {
   const {
     loadConnections, loadGroups, loadSshKeys, loadSettings,
-    sessions, activeSessionId,
+    connections, sessions, activeSessionId,
     setQuickConnectOpen, setSettingsOpen, setAiPanelOpen, aiPanelOpen,
     setActiveSession, closeSession, setSplitSession, splitSessionId,
     licenseValid,
   } = useAppStore()
-  const [masterLocked, setMasterLocked] = useState<boolean | null>(null) // null = checking
+  const [masterLocked, setMasterLocked] = useState<boolean | null>(null)
   const [locked, setLocked] = useState(false)
+  const [shortcutsOpen, setShortcutsOpen] = useState(false)
   const lastActivityRef = useRef(Date.now())
   const autoLockMinsRef = useRef(0)
   const [updateBanner, setUpdateBanner] = useState<{
@@ -89,6 +92,16 @@ export default function App(): JSX.Element {
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       const mod = e.metaKey || e.ctrlKey
+
+      // ? — Keyboard shortcuts (only when not typing in an input)
+      if (e.key === '?' && !mod) {
+        const tag = (e.target as HTMLElement).tagName
+        if (tag !== 'INPUT' && tag !== 'TEXTAREA') {
+          setShortcutsOpen(true)
+        }
+        return
+      }
+
       if (!mod) return
 
       // ⌘K / Ctrl+K — Quick Connect
@@ -146,8 +159,7 @@ export default function App(): JSX.Element {
       setQuickConnectOpen, setSettingsOpen, setAiPanelOpen, aiPanelOpen,
       activeSessionId, splitSessionId, sessions, licenseValid,
       closeSession, setSplitSession, setActiveSession,
-    ]
-  )
+    ]  )
 
   useEffect(() => {
     window.addEventListener('keydown', handleKeyDown)
@@ -180,19 +192,25 @@ export default function App(): JSX.Element {
   return (
     <div className="flex flex-col h-screen w-screen bg-background text-foreground select-none overflow-hidden">
       <Toaster position="bottom-right" theme="dark" richColors closeButton />
-      <TitleBar />
+      <TitleBar onShortcuts={() => setShortcutsOpen(true)} />
 
       <div className="flex flex-1 overflow-hidden min-h-0">
         <Sidebar />
 
         <main className="flex-1 flex flex-col overflow-hidden min-h-0">
-          {sessions.length === 0 ? <HomeScreen /> : <TerminalArea />}
+          {sessions.length === 0
+            ? connections.length === 0
+              ? <WelcomeScreen />
+              : <HomeScreen />
+            : <TerminalArea />
+          }
         </main>
       </div>
 
       <ConnectionDialog />
       <QuickConnect />
       <SettingsDialog />
+      <ShortcutsDialog open={shortcutsOpen} onClose={() => setShortcutsOpen(false)} />
 
       {/* Update notification banner */}
       {updateBanner && (

src/renderer/src/App.tsx

@@ -1,7 +1,11 @@
-import { Settings, Zap, Network } from 'lucide-react'
+import { Settings, Zap, Network, HelpCircle } from 'lucide-react'
 import { useAppStore } from '../store'
 
-export function TitleBar(): JSX.Element {
+interface Props {
+  onShortcuts: () => void
+}
+
+export function TitleBar({ onShortcuts }: Props): JSX.Element {
   const { setSettingsOpen, setQuickConnectOpen, sessions } = useAppStore()
   const isMac = navigator.userAgent.includes('Mac')
   const activeSessions = sessions.filter(s => s.status === 'connected').length
@@ -38,6 +42,14 @@ export function TitleBar(): JSX.Element {
           <span>{isMac ? '⌘K' : 'Ctrl+K'}</span>
         </button>
 
+        <button
+          onClick={onShortcuts}
+          className="p-1.5 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+          title="Keyboard Shortcuts (?)"
+        >
+          <HelpCircle className="w-4 h-4" />
+        </button>
+
         <button
           onClick={() => setSettingsOpen(true)}
           className="p-1.5 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"

src/renderer/src/components/TitleBar.tsx

@@ -1,106 +1,127 @@
-import { Terminal, Plus, Zap, Clock, ArrowRight } from 'lucide-react'
+import { Terminal, Plus, Zap, Network, ArrowRight, Key, Monitor, Cpu, Shield } from 'lucide-react'
 import { useAppStore } from '../store'
-import { cn } from '../lib/utils'
 
 export function WelcomeScreen(): JSX.Element {
-  const { setConnectionDialogOpen, setQuickConnectOpen, connections } = useAppStore()
+  const { setConnectionDialogOpen, setQuickConnectOpen } = useAppStore()
   const isMac = navigator.userAgent.includes('Mac')
-  const recentConnections = connections
-    .filter((c) => c.lastConnectedAt)
-    .sort((a, b) => (b.lastConnectedAt ?? 0) - (a.lastConnectedAt ?? 0))
-    .slice(0, 5)
+  const mod   = isMac ? '⌘' : 'Ctrl+'
+
+  const steps = [
+    {
+      num:   '1',
+      icon:  Plus,
+      title: 'Add your first host',
+      desc:  'Save SSH, Telnet, or Serial connections to your library.',
+      action: { label: 'New Connection', onClick: () => setConnectionDialogOpen(true) },
+    },
+    {
+      num:   '2',
+      icon:  Zap,
+      title: 'Or connect instantly',
+      desc:  `Use Quick Connect (${mod}K) to connect without saving.`,
+      action: { label: 'Quick Connect', onClick: () => setQuickConnectOpen(true) },
+    },
+    {
+      num:   '3',
+      icon:  Cpu,
+      title: 'Let ARIA assist you',
+      desc:  `Open the AI panel (${mod}⇧A) and ask ARIA to troubleshoot, configure, or explain anything on the device.`,
+      action: null,
+    },
+  ]
+
+  const features = [
+    { icon: Network,  label: 'SSH / Telnet / Serial' },
+    { icon: Cpu,      label: 'ARIA AI Assistant' },
+    { icon: Shield,   label: 'Encrypted vault' },
+    { icon: Monitor,  label: 'Multi-tab + Split view' },
+    { icon: Key,      label: 'SSH key management' },
+    { icon: Zap,      label: 'Device auto-detection' },
+  ]
 
   return (
-    <div className="flex-1 flex flex-col items-center justify-center gap-10 p-8">
-      {/* Logo + heading */}
-      <div className="flex flex-col items-center gap-4">
-        <div className="w-14 h-14 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center">
-          <Terminal className="w-7 h-7 text-primary" />
+    <div className="flex-1 h-full overflow-y-auto flex flex-col items-center px-6 pt-14 pb-10 gap-12 bg-background">
+
+      {/* Hero */}
+      <div className="flex flex-col items-center gap-4 text-center max-w-sm">
+        <div className="w-16 h-16 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center shadow-lg shadow-primary/10">
+          <Terminal className="w-8 h-8 text-primary" />
         </div>
-        <div className="text-center space-y-1">
-          <h1 className="text-2xl font-semibold text-foreground tracking-tight">NetCopilot</h1>
-          <p className="text-sm text-muted-foreground">
-            Your AI-Native Network Copilot
+        <div className="space-y-1.5">
+          <h1 className="text-2xl font-bold text-foreground tracking-tight">
+            Welcome to NetCopilot
+          </h1>
+          <p className="text-sm text-muted-foreground leading-relaxed">
+            Your AI-powered network terminal. Manage SSH, Telnet &amp; Serial connections,
+            all with an intelligent assistant at your side.
           </p>
         </div>
       </div>
 
-      {/* Actions */}
-      <div className="flex flex-col gap-2 w-full max-w-xs">
-        <button
-          onClick={() => setQuickConnectOpen(true)}
-          className="flex items-center gap-3 p-3.5 rounded-lg bg-primary text-white hover:bg-primary/90 text-left transition-colors group"
-        >
-          <Zap className="w-4 h-4 shrink-0" />
-          <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium">Quick Connect</p>
-            <p className="text-xs opacity-75 mt-0.5">
-              {isMac ? '⌘K' : 'Ctrl+K'} · Connect instantly
-            </p>
-          </div>
-          <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-60 transition-opacity" />
-        </button>
+      {/* Getting started steps */}
+      <div className="w-full max-w-lg space-y-3">
+        <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-widest mb-4">
+          Getting started
+        </p>
 
-        <button
-          onClick={() => setConnectionDialogOpen(true)}
-          className="flex items-center gap-3 p-3.5 rounded-lg bg-secondary border border-border hover:bg-accent hover:border-border/80 text-left transition-colors group"
-        >
-          <Plus className="w-4 h-4 text-muted-foreground shrink-0" />
-          <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium text-foreground">New Connection</p>
-            <p className="text-xs text-muted-foreground mt-0.5">Save to your library</p>
-          </div>
-          <ArrowRight className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-50 transition-opacity" />
-        </button>
-      </div>
+        {steps.map((step) => {
+          const Icon = step.icon
+          return (
+            <div
+              key={step.num}
+              className="flex items-start gap-4 p-4 rounded-xl border border-border bg-card hover:bg-accent/30 transition-colors group"
+            >
+              {/* Step number */}
+              <div className="w-7 h-7 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center shrink-0 mt-0.5">
+                <span className="text-xs font-bold text-primary">{step.num}</span>
+              </div>
 
-      {/* Recent connections */}
-      {recentConnections.length > 0 && (
-        <div className="w-full max-w-xs space-y-1.5">
-          <div className="flex items-center gap-1.5 mb-2">
-            <Clock className="w-3 h-3 text-muted-foreground/60" />
-            <p className="text-[11px] font-semibold text-muted-foreground/60 uppercase tracking-widest">Recent</p>
-          </div>
-          <div className="flex flex-col gap-0.5">
-            {recentConnections.map((conn) => (
-              <RecentConnectionItem key={conn.id} connection={conn} />
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-function RecentConnectionItem({ connection }: { connection: import('../types').Connection }): JSX.Element {
-  const { openSession } = useAppStore()
+              {/* Content */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-0.5">
+                  <Icon className="w-3.5 h-3.5 text-primary shrink-0" />
+                  <p className="text-sm font-semibold text-foreground">{step.title}</p>
+                </div>
+                <p className="text-xs text-muted-foreground leading-relaxed">{step.desc}</p>
+              </div>
 
-  const protocolColor: Record<string, string> = {
-    ssh:    'text-violet-400',
-    telnet: 'text-amber-400',
-    serial: 'text-emerald-400',
-  }
+              {/* CTA */}
+              {step.action && (
+                <button
+                  onClick={step.action.onClick}
+                  className="shrink-0 flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary/10 text-primary text-xs font-medium hover:bg-primary/20 transition-colors cursor-pointer whitespace-nowrap"
+                >
+                  {step.action.label}
+                  <ArrowRight className="w-3 h-3" />
+                </button>
+              )}
+            </div>
+          )
+        })}
+      </div>
 
-  return (
-    <button
-      onClick={() => openSession(connection)}
-      className={cn(
-        'flex items-center gap-3 px-3 py-2 rounded-md hover:bg-secondary text-left transition-colors group'
-      )}
-    >
-      <span
-        className="w-2 h-2 rounded-full shrink-0"
-        style={{ backgroundColor: connection.color || '#8b5cf6' }}
-      />
-      <div className="flex-1 min-w-0">
-        <p className="text-sm font-medium text-foreground truncate">{connection.name}</p>
-        <p className="text-xs text-muted-foreground truncate">
-          {connection.username}@{connection.host}
+      {/* Feature highlights */}
+      <div className="w-full max-w-lg">
+        <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-widest mb-4">
+          What's included
         </p>
+        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
+          {features.map(({ icon: Icon, label }) => (
+            <div
+              key={label}
+              className="flex items-center gap-2.5 px-3.5 py-2.5 rounded-lg border border-border bg-card/50"
+            >
+              <Icon className="w-3.5 h-3.5 text-primary/70 shrink-0" />
+              <span className="text-xs text-muted-foreground font-medium truncate">{label}</span>
+            </div>
+          ))}
+        </div>
       </div>
-      <span className={cn('text-[10px] font-semibold uppercase tracking-wider shrink-0', protocolColor[connection.protocol] ?? 'text-muted-foreground')}>
-        {connection.protocol}
-      </span>
-    </button>
+
+      {/* Keyboard hint */}
+      <p className="text-xs text-muted-foreground/50 text-center">
+        Press <kbd className="px-1.5 py-0.5 rounded bg-muted border border-border text-[10px] font-mono">?</kbd> anytime to see all keyboard shortcuts
+      </p>
+    </div>
   )
 }