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/prompt-composer.tsx

@@ -43,25 +43,27 @@ export const PromptComposer = memo(function PromptComposer({
       backgroundColor: "rgba(255, 255, 255, 0.06)",
       border: `1px solid ${theme.colors.borderOpaque}`,
       borderRadius: "16px",
-      minHeight: `${PROMPT_TEXTAREA_MIN_HEIGHT}px`,
+      minHeight: `${PROMPT_TEXTAREA_MIN_HEIGHT + 36}px`,
       transition: "border-color 200ms ease",
       ":focus-within": { borderColor: "rgba(255, 255, 255, 0.3)" },
+      display: "flex",
+      flexDirection: "column",
     }),
     input: css({
       display: "block",
       width: "100%",
-      minHeight: `${PROMPT_TEXTAREA_MIN_HEIGHT}px`,
-      padding: "12px 58px 12px 14px",
+      minHeight: `${PROMPT_TEXTAREA_MIN_HEIGHT + 20}px`,
+      padding: "14px 58px 8px 14px",
       background: "transparent",
       border: "none",
-      borderRadius: "16px",
+      borderRadius: "16px 16px 0 0",
       color: theme.colors.contentPrimary,
       fontSize: "13px",
       fontFamily: "inherit",
       resize: "none",
       outline: "none",
       lineHeight: "1.4",
-      maxHeight: `${PROMPT_TEXTAREA_MAX_HEIGHT}px`,
+      maxHeight: `${PROMPT_TEXTAREA_MAX_HEIGHT + 40}px`,
       boxSizing: "border-box",
       overflowY: "hidden",
       "::placeholder": { color: theme.colors.contentSecondary },
@@ -101,7 +103,7 @@ export const PromptComposer = memo(function PromptComposer({
     <div
       className={css({
         padding: "12px 16px",
-        borderTop: `1px solid ${theme.colors.borderOpaque}`,
+        borderTop: "none",
         flexShrink: 0,
         display: "flex",
         flexDirection: "column",
@@ -151,13 +153,22 @@ export const PromptComposer = memo(function PromptComposer({
         }}
         placeholder={placeholder}
         inputRef={textareaRef}
-        rows={1}
+        rows={2}
         allowEmptySubmit={isRunning}
         submitLabel={isRunning ? "Stop" : "Send"}
         classNames={composerClassNames}
         renderSubmitContent={() => (isRunning ? <Square size={16} /> : <ArrowUpFromLine size={16} />)}
+        renderFooter={() => (
+          <div className={css({ padding: "0 10px 8px" })}>
+            <ModelPicker
+              value={model}
+              defaultModel={defaultModel}
+              onChange={onChangeModel}
+              onSetDefault={onSetDefaultModel}
+            />
+          </div>
+        )}
       />
-      <ModelPicker value={model} defaultModel={defaultModel} onChange={onChangeModel} onSetDefault={onSetDefaultModel} />
     </div>
   );
 });