Add model comparison view and a keyboard shortcuts cheat-sheet

- Compare page (new /compare route): pick any combination of installed
  Ollama models, downloaded llama.cpp models, and cloud models, send one
  prompt to all of them at once, and watch each response stream in side
  by side with its own token count and cost estimate. Reachable from the
  sidebar and the command palette.
- Keyboard shortcuts dialog (Ctrl/Cmd+/, or the keyboard icon next to
  Settings): lists every existing shortcut in one place (command
  palette, new chat, settings, send/newline, stop generating) - none of
  these were newly added, just made discoverable.

Verified the comparison view end-to-end in a live browser session
(mocked window.api with a fake streaming chat.send): selected two
models, ran a prompt, confirmed both streamed independently and
rendered with correct token/cost info.

Author: voidstackloop

README.md

@@ -36,7 +36,9 @@ Beyond chat, Modelforge includes an **agentic mode** — the model can read/writ
 - **Projects** — group related chats under shared instructions and default model parameters.
 - **Per-session and per-project overrides** — pin a specific prompt, model, temperature, seed, top-K/top-P, repeat penalty, context length, GPU offload, or stop sequences to a single chat or an entire project, falling back to sane defaults. Provider-specific parameters (e.g. seed isn't supported by Claude, top-K isn't supported by ChatGPT) are automatically disabled when they don't apply to the selected model.
 - **Prompt library** — save and reuse system prompts across chats. Prompts can include `{{variables}}` (e.g. `{{topic}}`) that you fill in each time you apply one, and edits keep version history so a bad change can be restored.
-- **Command palette** (`Ctrl/Cmd+K`) — jump between chats, projects, and settings without touching the mouse.
+- **Command palette** (`Ctrl/Cmd+K`) — jump between chats, projects, settings, and Compare without touching the mouse.
+- **Keyboard shortcuts cheat-sheet** (`Ctrl/Cmd+/`, or the keyboard icon next to Settings) — everything you can do without the mouse, in one place.
+- **Compare models** — send one prompt to several models at once (local or cloud) and see every response stream in side by side, with per-model token counts and cost estimates.
 - **Full-text search** — the sidebar search box matches message content across every chat, not just titles.
 - **Tags** — label chats with freeform tags and filter the sidebar by them; lighter-weight than Projects for ad-hoc organization.
 - **Pin messages** — bookmark any message in a chat and jump straight to it from a "Pinned" panel in the toolbar.

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { createHashRouter, RouterProvider } from "react-router-dom";
 import Layout from "./components/layout";
 import Chat from "./pages/Chat";
 import Settings from "./pages/Settings";
+import Compare from "./pages/Compare";
 import { ThemeProvider } from "@/components/theme-provider";
 import { SessionsProvider } from "@/lib/sessions-context";
 import { I18nProvider } from "@/lib/i18n";
@@ -14,6 +15,7 @@ const router = createHashRouter([
       { index: true, element: <Chat /> },
       { path: "chat/:sessionId", element: <Chat /> },
       { path: "settings", element: <Settings /> },
+      { path: "compare", element: <Compare /> },
     ],
   },
 ]);

frontend/src/components/command-palette.tsx

@@ -1,4 +1,4 @@
-import { FolderOpen, MessageSquare, Plus, Settings as SettingsIcon } from "lucide-react";
+import { FolderOpen, MessageSquare, Plus, Settings as SettingsIcon, Scale } from "lucide-react";
 import {
     CommandDialog,
     CommandEmpty,
@@ -17,6 +17,7 @@ export function CommandPalette({
     onNewChat,
     onOpenSession,
     onNavigateSettings,
+    onNavigateCompare,
 }: {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -25,6 +26,7 @@ export function CommandPalette({
     onNewChat: (projectId?: string) => void;
     onOpenSession: (id: string) => void;
     onNavigateSettings: () => void;
+    onNavigateCompare: () => void;
 }) {
     function run(action: () => void) {
         action();
@@ -43,6 +45,9 @@ export function CommandPalette({
                     <CommandItem onSelect={() => run(onNavigateSettings)}>
                         <SettingsIcon /> Settings
                     </CommandItem>
+                    <CommandItem onSelect={() => run(onNavigateCompare)}>
+                        <Scale /> Compare models
+                    </CommandItem>
                 </CommandGroup>
 
                 {projects.length > 0 && (

frontend/src/components/keyboard-shortcuts-dialog.tsx

@@ -0,0 +1,53 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { useI18n } from "@/lib/i18n";
+
+const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+const mod = isMac ? "⌘" : "Ctrl";
+
+function Shortcut({ label, keys }: { label: string; keys: string[] }) {
+    return (
+        <div className="flex items-center justify-between gap-4 py-1.5">
+            <span className="text-sm text-muted-foreground">{label}</span>
+            <div className="flex gap-1">
+                {keys.map((k, i) => (
+                    <kbd
+                        key={i}
+                        className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground"
+                    >
+                        {k}
+                    </kbd>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export function KeyboardShortcutsDialog({
+    open,
+    onOpenChange,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}) {
+    const { t } = useI18n();
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{t.keyboardShortcuts}</DialogTitle>
+                    <DialogDescription>{t.keyboardShortcutsHelp}</DialogDescription>
+                </DialogHeader>
+                <div className="flex flex-col divide-y divide-border">
+                    <Shortcut label={t.shortcutCommandPalette} keys={[mod, "K"]} />
+                    <Shortcut label={t.shortcutNewChat} keys={[mod, "N"]} />
+                    <Shortcut label={t.shortcutSettings} keys={[mod, ","]} />
+                    <Shortcut label={t.shortcutShowShortcuts} keys={[mod, "/"]} />
+                    <Shortcut label={t.shortcutSend} keys={["Enter"]} />
+                    <Shortcut label={t.shortcutNewline} keys={["Shift", "Enter"]} />
+                    <Shortcut label={t.shortcutStopGenerating} keys={["Esc"]} />
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}

frontend/src/components/layout.tsx

@@ -15,6 +15,8 @@ import {
     Tag,
     Trash2,
     X,
+    Keyboard,
+    Scale,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -23,6 +25,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { CommandPalette } from "@/components/command-palette";
+import { KeyboardShortcutsDialog } from "@/components/keyboard-shortcuts-dialog";
 import { useSessions } from "@/lib/sessions-context";
 import { useI18n } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
@@ -509,6 +512,7 @@ export default function Layout() {
     const [creatingProject, setCreatingProject] = useState(false);
     const [newProjectName, setNewProjectName] = useState("");
     const [paletteOpen, setPaletteOpen] = useState(false);
+    const [shortcutsOpen, setShortcutsOpen] = useState(false);
 
     const query = search.trim().toLowerCase();
     const matchesSearch = (s: ChatSession) =>
@@ -570,12 +574,16 @@ export default function Layout() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasApi]);
 
-    // Ctrl/Cmd+K opens the command palette from anywhere in the app.
+    // Ctrl/Cmd+K opens the command palette, Ctrl/Cmd+/ shows the shortcuts
+    // cheat-sheet, both from anywhere in the app.
     useEffect(() => {
         function onKeyDown(e: KeyboardEvent) {
             if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
                 e.preventDefault();
                 setPaletteOpen((o) => !o);
+            } else if ((e.ctrlKey || e.metaKey) && e.key === "/") {
+                e.preventDefault();
+                setShortcutsOpen((o) => !o);
             }
         }
         window.addEventListener("keydown", onKeyDown);
@@ -633,6 +641,16 @@ export default function Layout() {
                             </Button>
                         </div>
                     )}
+                    <Button
+                        onClick={() => navigate("/compare")}
+                        size="sm"
+                        variant="ghost"
+                        className="w-full justify-start gap-2 text-muted-foreground"
+                        disabled={!hasApi}
+                    >
+                        <Scale className="size-4" />
+                        {t.compareModels}
+                    </Button>
                 </div>
 
                 <div className="relative px-3 pb-2">
@@ -698,16 +716,26 @@ export default function Layout() {
                     </div>
                 </ScrollArea>
 
-                <div className="border-t border-border p-2">
+                <div className="flex border-t border-border p-2">
                     <Button
                         variant="ghost"
                         size="sm"
-                        className="w-full justify-start gap-2"
+                        className="flex-1 justify-start gap-2"
                         onClick={() => navigate("/settings")}
                     >
                         <SettingsIcon className="size-4" />
                         {t.settings}
                     </Button>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="shrink-0"
+                        onClick={() => setShortcutsOpen(true)}
+                        aria-label={t.keyboardShortcuts}
+                        title={t.keyboardShortcuts}
+                    >
+                        <Keyboard className="size-4" />
+                    </Button>
                 </div>
             </aside>
 
@@ -723,7 +751,9 @@ export default function Layout() {
                 onNewChat={(projectId) => handleNewChat(projectId)}
                 onOpenSession={(id) => navigate(`/chat/${id}`)}
                 onNavigateSettings={() => navigate("/settings")}
+                onNavigateCompare={() => navigate("/compare")}
             />
+            <KeyboardShortcutsDialog open={shortcutsOpen} onOpenChange={setShortcutsOpen} />
         </div>
     );
 }

frontend/src/lib/translations.ts

@@ -168,6 +168,20 @@ export interface Dictionary {
     settingsTabChat: string;
     settingsTabVoice: string;
     settingsTabData: string;
+    keyboardShortcuts: string;
+    keyboardShortcutsHelp: string;
+    shortcutCommandPalette: string;
+    shortcutNewChat: string;
+    shortcutSettings: string;
+    shortcutShowShortcuts: string;
+    shortcutSend: string;
+    shortcutNewline: string;
+    shortcutStopGenerating: string;
+    compareModels: string;
+    compareSamePrompt: string;
+    compareRun: string;
+    compareRunToSee: string;
+    noModelsAvailable: string;
     resetToDefault: string;
     usingCustomPrompt: string;
     dataManagement: string;
@@ -374,6 +388,20 @@ export const en: Dictionary = {
     settingsTabChat: "Chat & Prompts",
     settingsTabVoice: "Voice",
     settingsTabData: "Data",
+    keyboardShortcuts: "Keyboard shortcuts",
+    keyboardShortcutsHelp: "Everything you can do without touching the mouse.",
+    shortcutCommandPalette: "Command palette",
+    shortcutNewChat: "New chat",
+    shortcutSettings: "Open settings",
+    shortcutShowShortcuts: "Show this dialog",
+    shortcutSend: "Send message",
+    shortcutNewline: "New line",
+    shortcutStopGenerating: "Stop generating",
+    compareModels: "Compare models",
+    compareSamePrompt: "Type a prompt to send to every selected model at once...",
+    compareRun: "Run",
+    compareRunToSee: "Run the comparison to see this model's response.",
+    noModelsAvailable: "No models available yet — install one in Settings first.",
     resetToDefault: "Reset to default",
     usingCustomPrompt: "Custom prompt for this chat",
     dataManagement: "Data management",
@@ -588,6 +616,20 @@ export const tr: Dictionary = {
     settingsTabChat: "Sohbet ve Promptlar",
     settingsTabVoice: "Ses",
     settingsTabData: "Veri",
+    keyboardShortcuts: "Klavye kısayolları",
+    keyboardShortcutsHelp: "Fareye dokunmadan yapabileceğiniz her şey.",
+    shortcutCommandPalette: "Komut paleti",
+    shortcutNewChat: "Yeni sohbet",
+    shortcutSettings: "Ayarları aç",
+    shortcutShowShortcuts: "Bu pencereyi göster",
+    shortcutSend: "Mesaj gönder",
+    shortcutNewline: "Yeni satır",
+    shortcutStopGenerating: "Üretimi durdur",
+    compareModels: "Modelleri karşılaştır",
+    compareSamePrompt: "Seçili tüm modellere aynı anda gönderilecek bir prompt yazın...",
+    compareRun: "Çalıştır",
+    compareRunToSee: "Bu modelin yanıtını görmek için karşılaştırmayı çalıştırın.",
+    noModelsAvailable: "Henüz kullanılabilir model yok — önce Ayarlar'dan bir tane kurun.",
     resetToDefault: "Varsayılana dön",
     usingCustomPrompt: "Bu sohbet için özel istem",
     dataManagement: "Veri yönetimi",