redesign: Concrete Brutalism — warm concrete palette, Inconsolata + Instrument Sans

Kill the AI slop. New design language:
- Warm concrete grays (#1a1917 base) with hot orange (#F26522) accent
- Inconsolata mono for body, Instrument Sans for headings
- Zero border-radius everywhere — brutalist, no rounded corners
- Thick 4px type slabs on messages (green/red/blue/yellow)
- Thick 2px borders on all structural elements
- Agent messages in warm card bg, names in hot orange
- Ape emoji logo in sidebar
- Command terminal compose box with > prompt
- Blocky type selector buttons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/colony/src/components/ComposeBox.tsx

@@ -1,8 +1,6 @@
 import { useState } from "react";
 import type { MessageType } from "@/types/MessageType";
 import { postMessage } from "@/api";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 
 interface Props {
@@ -12,12 +10,12 @@ interface Props {
   onMessageSent: () => void;
 }
 
-const MSG_TYPES: { value: MessageType; label: string }[] = [
-  { value: "text", label: "T" },
-  { value: "code", label: "C" },
-  { value: "result", label: "R" },
-  { value: "error", label: "E" },
-  { value: "plan", label: "P" },
+const MSG_TYPES: { value: MessageType; label: string; color: string }[] = [
+  { value: "text", label: "TXT", color: "" },
+  { value: "code", label: "COD", color: "text-[var(--color-msg-code)]" },
+  { value: "result", label: "RES", color: "text-[var(--color-msg-result)]" },
+  { value: "error", label: "ERR", color: "text-[var(--color-msg-error)]" },
+  { value: "plan", label: "PLN", color: "text-[var(--color-msg-plan)]" },
 ];
 
 export function ComposeBox({
@@ -49,29 +47,34 @@ export function ComposeBox({
   }
 
   return (
-    <div className="border-t border-border bg-card px-3 py-2 md:px-4 md:py-3 pb-[env(safe-area-inset-bottom,8px)]">
+    <div className="border-t-2 border-border bg-card px-3 py-2.5 md:px-4 pb-[env(safe-area-inset-bottom,10px)]">
       {replyTo && (
-        <div className="flex items-center gap-2 mb-1.5 text-xs text-muted-foreground">
-          <span>^ #{replyTo.slice(0, 8)}</span>
-          <Button variant="ghost" size="sm" onClick={onClearReply} className="h-6 px-1 text-xs">
+        <div className="flex items-center gap-2 mb-2 text-[11px] font-mono text-muted-foreground">
+          <span className="text-primary font-bold">^</span>
+          <span>replying to #{replyTo.slice(0, 8)}</span>
+          <button
+            type="button"
+            onClick={onClearReply}
+            className="text-muted-foreground hover:text-primary font-bold min-w-[32px] min-h-[32px] md:min-w-0 md:min-h-0 flex items-center"
+          >
             [x]
-          </Button>
+          </button>
         </div>
       )}
 
-      <div className="flex items-center gap-1.5 md:gap-2">
-        {/* Type selector */}
-        <div className="flex gap-0.5 rounded-md border border-border p-0.5">
+      <div className="flex items-center gap-2">
+        {/* Type selector — blocky, no-radius buttons */}
+        <div className="flex border-2 border-border">
           {MSG_TYPES.map((t) => (
             <button
               type="button"
               key={t.value}
               onClick={() => setMsgType(t.value)}
               className={cn(
-                "h-7 w-7 md:h-6 md:w-6 rounded-sm text-xs font-bold transition-colors",
+                "h-8 w-8 md:h-7 md:w-7 text-[9px] font-mono font-bold uppercase transition-colors border-r border-border last:border-r-0",
                 msgType === t.value
                   ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:text-foreground"
+                  : cn("text-muted-foreground hover:text-foreground hover:bg-muted/50", t.color),
               )}
             >
               {t.label}
@@ -79,7 +82,9 @@ export function ComposeBox({
           ))}
         </div>
 
-        <Input
+        {/* Input — thick border, no radius */}
+        <input
+          type="text"
           value={content}
           onChange={(e) => setContent(e.target.value)}
           onKeyDown={(e) => {
@@ -88,19 +93,20 @@ export function ComposeBox({
               handleSend();
             }
           }}
-          placeholder="message..."
+          placeholder="> message..."
           disabled={sending}
-          className="flex-1 h-9 md:h-8 text-sm"
+          className="flex-1 bg-input text-sm font-mono text-foreground placeholder:text-muted-foreground/50 px-3 py-1.5 h-9 md:h-8 border-2 border-border focus:outline-none focus:border-primary"
         />
 
-        <Button
+        {/* Send — hot orange */}
+        <button
+          type="button"
           onClick={handleSend}
           disabled={sending || !content.trim()}
-          size="sm"
-          className="h-9 md:h-8 px-3 text-xs font-bold"
+          className="h-9 md:h-8 px-4 font-sans text-xs font-bold uppercase tracking-wider bg-primary text-primary-foreground border-2 border-primary hover:bg-primary/80 disabled:opacity-20 transition-opacity"
         >
-          {sending ? "..." : "SEND"}
-        </Button>
+          {sending ? "..." : "Send"}
+        </button>
       </div>
     </div>
   );