Add OrcaBot icons and polish

frontend/public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Orca Bot",
+  "short_name": "Orca Bot",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

frontend/src/app/(app)/dashboards/[id]/page.tsx

@@ -561,79 +561,92 @@ export default function DashboardPage() {
   return (
     <div className="h-screen flex flex-col bg-[var(--background)]">
       {/* Header */}
-      <header className="h-12 border-b border-[var(--border)] bg-[var(--background-elevated)] flex items-center px-4 gap-4">
-        {/* Back button */}
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          onClick={() => router.push("/dashboards")}
-        >
-          <ArrowLeft className="w-4 h-4" />
-        </Button>
-
-        {/* Dashboard name */}
-        <h1 className="text-sm font-medium text-[var(--foreground)] truncate">
-          {dashboard.name}
-        </h1>
-
-        {/* Role badge */}
-        {role !== "owner" && (
-          <span className="text-xs text-[var(--foreground-subtle)] px-2 py-0.5 bg-[var(--background)] rounded">
-            {role}
-          </span>
-        )}
-
-        <div className="flex-1" />
-
-        {/* Presence indicators */}
-        <div className="flex items-center gap-2">
-          <Tooltip
-            content={
-              isCollaborationConnected
-                ? `${presenceUsers.length} online`
-                : "Connecting..."
-            }
-          >
-            <div className="flex items-center gap-1.5 px-2 py-1 bg-[var(--background)] rounded">
-              <Users className="w-3.5 h-3.5 text-[var(--foreground-subtle)]" />
-              <span className="text-xs text-[var(--foreground-muted)]">
-                {presenceUsers.length}
+      <header className="h-12 border-b border-[var(--border)] bg-[var(--background-elevated)] px-4">
+        <div className="grid grid-cols-[1fr_auto_1fr] items-center h-full">
+          <div className="flex items-center gap-2">
+            <img
+              src="/orca.png"
+              alt="Orcabot"
+              className="w-6 h-6 object-contain"
+            />
+            <span className="text-sm font-medium text-[var(--foreground)]">
+              Orca Bot
+            </span>
+          </div>
+
+          <div className="flex items-center gap-2 justify-center min-w-0">
+            <h1 className="text-sm font-medium text-[var(--foreground)] truncate max-w-[40vw] text-center">
+              {dashboard.name}
+            </h1>
+            {role !== "owner" && (
+              <span className="text-xs text-[var(--foreground-subtle)] px-2 py-0.5 bg-[var(--background)] rounded">
+                {role}
               </span>
-              {/* Connection status dot */}
-              <div
-                className={`w-2 h-2 rounded-full ${
+            )}
+          </div>
+
+          <div className="flex items-center gap-3 justify-end">
+            {/* Presence indicators */}
+            <div className="flex items-center gap-2">
+              <Tooltip
+                content={
                   isCollaborationConnected
-                    ? "bg-[var(--status-success)]"
-                    : "bg-[var(--status-warning)] animate-pulse"
-                }`}
-              />
+                    ? `${presenceUsers.length} online`
+                    : "Connecting..."
+                }
+              >
+                <div className="flex items-center gap-1.5 px-2 py-1 bg-[var(--background)] rounded">
+                  <Users className="w-3.5 h-3.5 text-[var(--foreground-subtle)]" />
+                  <span className="text-xs text-[var(--foreground-muted)]">
+                    {presenceUsers.length}
+                  </span>
+                  {/* Connection status dot */}
+                  <div
+                    className={`w-2 h-2 rounded-full ${
+                      isCollaborationConnected
+                        ? "bg-[var(--status-success)]"
+                        : "bg-[var(--status-warning)] animate-pulse"
+                    }`}
+                  />
+                </div>
+              </Tooltip>
+              <PresenceList users={presenceUsers} maxVisible={4} size="sm" />
             </div>
-          </Tooltip>
-          <PresenceList users={presenceUsers} maxVisible={4} size="sm" />
-        </div>
 
-        {/* Actions */}
-        <div className="flex items-center gap-1">
-          <Tooltip content="Share">
-            <Button variant="ghost" size="icon-sm">
-              <Share2 className="w-4 h-4" />
-            </Button>
-          </Tooltip>
-          <Tooltip content="Toggle theme">
-            <ThemeToggle />
-          </Tooltip>
-          <Tooltip content="Settings">
-            <Button variant="ghost" size="icon-sm">
-              <Settings className="w-4 h-4" />
-            </Button>
-          </Tooltip>
+            {/* Actions */}
+            <div className="flex items-center gap-1">
+              <Tooltip content="Share">
+                <Button variant="ghost" size="icon-sm">
+                  <Share2 className="w-4 h-4" />
+                </Button>
+              </Tooltip>
+              <Tooltip content="Toggle theme">
+                <ThemeToggle />
+              </Tooltip>
+              <Tooltip content="Settings">
+                <Button variant="ghost" size="icon-sm">
+                  <Settings className="w-4 h-4" />
+                </Button>
+              </Tooltip>
+            </div>
+          </div>
         </div>
       </header>
 
       {/* Main content area */}
       <div className="flex-1 flex">
         {/* Toolbar */}
         <aside className="w-12 border-r border-[var(--border)] bg-[var(--background-elevated)] flex flex-col items-center py-3 gap-1">
+          <Tooltip content="Back to dashboards" side="right">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={() => router.push("/dashboards")}
+              className="mb-2"
+            >
+              <ArrowLeft className="w-4 h-4" />
+            </Button>
+          </Tooltip>
           {blockTools.map((tool) => (
             <Tooltip key={tool.type} content={tool.label} side="right">
               <Button

frontend/src/app/(app)/dashboards/page.tsx

@@ -114,7 +114,11 @@ export default function DashboardsPage() {
       <header className="border-b border-[var(--border)] bg-[var(--background-elevated)]">
         <div className="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <Terminal className="w-6 h-6 text-[var(--accent-primary)]" />
+            <img
+              src="/orca.png"
+              alt="Orcabot"
+              className="w-7 h-7 object-contain"
+            />
             <span className="text-h4 text-[var(--foreground)]">OrcaBot</span>
           </div>
           <div className="flex items-center gap-4">

frontend/src/app/(auth)/login/page.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { useRouter } from "next/navigation";
-import { Terminal, Zap } from "lucide-react";
+import { Zap } from "lucide-react";
 import { Button, Input, ThemeToggle, Tooltip } from "@/components/ui";
 import { useAuthStore } from "@/stores/auth-store";
 import { DEV_MODE_ENABLED } from "@/config/env";
@@ -69,9 +69,11 @@ export default function LoginPage() {
       <div className="w-full max-w-md">
         {/* Logo and Tagline */}
         <div className="text-center mb-12">
-          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-[var(--accent-primary)]/10 border border-[var(--accent-primary)]/20 mb-6">
-            <Terminal className="w-8 h-8 text-[var(--accent-primary)]" />
-          </div>
+          <img
+            src="/orca.png"
+            alt="Orcabot"
+            className="w-[90px] h-[90px] object-contain mx-auto mb-6"
+          />
           <h1 className="text-display text-[var(--foreground)] mb-2">OrcaBot</h1>
           <p className="text-body text-[var(--foreground-muted)]">
             Agentic AI Coding Agent Orchestration on the Web

frontend/src/app/globals.css

@@ -11,9 +11,9 @@
 
   /* Foreground/text colors */
   --foreground: #111827;
-  --foreground-muted: #4b5563;
-  --foreground-subtle: #6b7280;
-  --foreground-disabled: #9ca3af;
+  --foreground-muted: #374151;
+  --foreground-subtle: #4b5563;
+  --foreground-disabled: #6b7280;
 
   /* Border colors */
   --border: #e5e7eb;

frontend/src/app/layout.tsx

@@ -18,8 +18,14 @@ export const metadata: Metadata = {
   description:
     "A collaborative workspace for Agentic AI coding agent orchestration on the web.",
   icons: {
-    icon: "/favicon.ico",
+    icon: [
+      { url: "/favicon.ico", sizes: "any" },
+      { url: "/favicon.svg", type: "image/svg+xml" },
+      { url: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
+    ],
+    apple: "/apple-touch-icon.png",
   },
+  manifest: "/site.webmanifest",
 };
 
 export default function RootLayout({

frontend/src/components/blocks/TerminalBlock.test.tsx

@@ -115,7 +115,7 @@ describe("TerminalBlock owner controls", () => {
   it("shows control button for the owner", () => {
     renderTerminal("owner-1", "owner-1");
     expect(screen.getByText("Owner: Owner")).toBeTruthy();
-    expect(screen.getByText("Take Control")).toBeTruthy();
+    expect(screen.queryByText("Take Control")).toBeNull();
   });
 
   it("hides control button for non-owners", () => {

frontend/src/components/blocks/TerminalBlock.tsx

@@ -142,6 +142,7 @@ export function TerminalBlock({
   const [session, setSession] = React.useState<Session | null>(
     data.session || null
   );
+  const autoControlRequestedRef = React.useRef(false);
 
   const createdBrowserUrlsRef = React.useRef<Set<string>>(new Set());
   const outputBufferRef = React.useRef("");
@@ -167,6 +168,7 @@ export function TerminalBlock({
     setFileEntries({});
     setFileLoading({});
     setFileError(null);
+    autoControlRequestedRef.current = false;
   }, [session?.id]);
   const [isCreatingSession, setIsCreatingSession] = React.useState(false);
   const [sessionError, setSessionError] = React.useState<string | null>(null);
@@ -541,9 +543,9 @@ export function TerminalBlock({
   const blockX = positionAbsoluteX * zoom + (overlay?.viewport.x ?? 0);
   const blockY = positionAbsoluteY * zoom + (overlay?.viewport.y ?? 0);
 
-  // Selected or dragging terminal gets high z-index, others use tracked order
+  // Terminals always sit above other blocks; order is tracked by z-index map.
   const baseZIndex = overlay?.getZIndex(id) ?? 0;
-  const zIndex = selected || dragging ? 9999 : baseZIndex;
+  const zIndex = baseZIndex + 10000;
 
   // Track z-order so last-selected/dragged stays on top
   const prevSelectedRef = React.useRef(false);
@@ -640,12 +642,25 @@ export function TerminalBlock({
       );
       terminalRef.current?.write("\r\n");
 
-      // NOTE: Do NOT auto-take control here.
-      // Turn-taking requires explicit user action - control must be requested/granted.
-      // The server will broadcast who has control via the control_state message.
+      // Control is requested separately once connected.
     }
   }, [isConnected, session, isReady]);
 
+  React.useEffect(() => {
+    if (!isConnected) {
+      autoControlRequestedRef.current = false;
+      return;
+    }
+    if (!session || !isOwner || isAgentRunning || turnTaking.isController) {
+      return;
+    }
+    if (autoControlRequestedRef.current) {
+      return;
+    }
+    autoControlRequestedRef.current = true;
+    terminalActions.takeControl();
+  }, [isConnected, session, isOwner, isAgentRunning, turnTaking.isController, terminalActions]);
+
   React.useEffect(() => {
     if (!session || !terminalRef.current) {
       return;
@@ -1119,16 +1134,14 @@ export function TerminalBlock({
         )}
 
         {/* Input blocked overlay (when connected but can't type) */}
-        {session && isConnected && !canType && isOwner && (
+        {session && isConnected && !canType && (isAgentRunning || !isOwner) && (
           <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
             <div className="bg-[var(--background-elevated)] px-4 py-2 rounded-lg border border-[var(--border)] flex items-center gap-2">
               <Lock className="w-4 h-4 text-[var(--foreground-muted)]" />
               <span className="text-sm text-[var(--foreground-muted)]">
                 {isAgentRunning
                   ? "Agent is running"
-                  : isOwner
-                    ? "Click below to request control"
-                    : "View-only session"}
+                  : "View-only session"}
               </span>
             </div>
           </div>
@@ -1157,19 +1170,6 @@ export function TerminalBlock({
             </Button>
           )}
 
-          {session && isConnected && !turnTaking.isController && !isAgentRunning && isOwner && (
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={handleRequestControl}
-              disabled={turnTaking.hasPendingRequest}
-              className="text-[10px] h-5 px-2"
-              style={{ pointerEvents: "auto" }}
-            >
-              {turnTaking.hasPendingRequest ? "Pending..." : "Take Control"}
-            </Button>
-          )}
-
           {session && isConnected && turnTaking.isController && (
             <div className="flex items-center gap-1 text-[10px] text-[var(--foreground-subtle)]">
               <div className="w-1.5 h-1.5 rounded-full bg-[var(--status-success)] animate-pulse" />