Foundry UI polish: real org data, project icons, model picker (#233)

* feat: modernize chat UI and rename handoff to task

- Remove agent message bubbles, keep user bubbles (right-aligned)
- Rename "Handoffs" to "Tasks" with ListChecks icon in sidebar
- Move model picker inside composer, add renderFooter to ChatComposer SDK
- Make project sections collapsible with hover-only chevrons
- Remove divider between chat and composer
- Update model picker chevron to flip on open/close
- Replace all user-visible "handoff" strings with "task" across frontend

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: real org mock data, model picker styling, project icons, task minutes indicator

- Replace fake acme/* mock data with real rivet-dev GitHub org repos and PRs
- Fix model picker popover: dark gray surface with backdrop blur instead of pure black
- Add colored letter icons to project section headers (swap to chevron on hover)
- Add "847 min used" indicator in transcript header
- Rename browser tab title from OpenHandoff to Foundry
- Reduce transcript header title font weight to 500

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

factory/packages/frontend/src/components/mock-layout/model-picker.tsx

@@ -1,7 +1,7 @@
 import { memo, useState } from "react";
 import { useStyletron } from "baseui";
 import { StatefulPopover, PLACEMENT } from "baseui/popover";
-import { ChevronDown, Star } from "lucide-react";
+import { ChevronDown, ChevronUp, Star } from "lucide-react";
 
 import { AgentIcon } from "./ui";
 import { MODEL_GROUPS, modelLabel, providerAgent, type ModelId } from "./view-model";
@@ -23,7 +23,7 @@ const ModelPickerContent = memo(function ModelPickerContent({
   const [hoveredId, setHoveredId] = useState<ModelId | null>(null);
 
   return (
-    <div className={css({ minWidth: "200px", padding: "4px 0" })}>
+    <div className={css({ minWidth: "220px", padding: "6px 0" })}>
       {MODEL_GROUPS.map((group) => (
         <div key={group.provider}>
           <div
@@ -62,7 +62,10 @@ const ModelPickerContent = memo(function ModelPickerContent({
                   fontSize: "12px",
                   fontWeight: isActive ? 600 : 400,
                   color: isActive ? theme.colors.contentPrimary : theme.colors.contentSecondary,
-                  ":hover": { backgroundColor: "rgba(255, 255, 255, 0.06)" },
+                  borderRadius: "6px",
+                  marginLeft: "4px",
+                  marginRight: "4px",
+                  ":hover": { backgroundColor: "rgba(255, 255, 255, 0.08)" },
                 })}
               >
                 <AgentIcon agent={agent} size={12} />
@@ -100,22 +103,26 @@ export const ModelPicker = memo(function ModelPicker({
   onSetDefault: (id: ModelId) => void;
 }) {
   const [css, theme] = useStyletron();
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <StatefulPopover
       placement={PLACEMENT.topLeft}
       triggerType="click"
       autoFocus={false}
+      onOpen={() => setIsOpen(true)}
+      onClose={() => setIsOpen(false)}
       overrides={{
         Body: {
           style: {
-            backgroundColor: "#000000",
-            borderTopLeftRadius: "8px",
-            borderTopRightRadius: "8px",
-            borderBottomLeftRadius: "8px",
-            borderBottomRightRadius: "8px",
-            border: `1px solid ${theme.colors.borderOpaque}`,
-            boxShadow: "0 8px 24px rgba(0, 0, 0, 0.6)",
+            backgroundColor: "rgba(32, 32, 32, 0.98)",
+            backdropFilter: "blur(12px)",
+            borderTopLeftRadius: "10px",
+            borderTopRightRadius: "10px",
+            borderBottomLeftRadius: "10px",
+            borderBottomRightRadius: "10px",
+            border: "1px solid rgba(255, 255, 255, 0.10)",
+            boxShadow: "0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04)",
             zIndex: 100,
           },
         },
@@ -141,13 +148,13 @@ export const ModelPicker = memo(function ModelPicker({
             fontSize: "12px",
             fontWeight: 500,
             color: theme.colors.contentSecondary,
-            backgroundColor: theme.colors.backgroundTertiary,
-            border: `1px solid ${theme.colors.borderOpaque}`,
-            ":hover": { color: theme.colors.contentPrimary },
+            backgroundColor: "rgba(255, 255, 255, 0.10)",
+            border: "1px solid rgba(255, 255, 255, 0.14)",
+            ":hover": { color: theme.colors.contentPrimary, backgroundColor: "rgba(255, 255, 255, 0.14)" },
           })}
         >
           {modelLabel(value)}
-          <ChevronDown size={11} />
+          {isOpen ? <ChevronDown size={11} /> : <ChevronUp size={11} />}
         </button>
       </div>
     </StatefulPopover>