From 29527a0e716c3bd558094117e168596c2bd52b65 Mon Sep 17 00:00:00 2001
From: limiteinductive <benjamintrom@gmail.com>
Date: Sun, 29 Mar 2026 20:57:58 +0200
Subject: [PATCH] compose: kill Send button, post-singularity input design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Enter sends, Shift+Enter for newlines
- Type prefix inline: > for text, // for code, => for result, !! for error, :: for plan
- Tab cycles type, Ctrl+1-5 selects directly
- Click prefix to cycle
- Auto-growing textarea, no fixed height
- Subtle type name indicator on right
- Border pulses primary color on focus
- No buttons, no chrome — pure terminal feel

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/colony/src/components/ComposeBox.tsx | 134 +++++++++++++++---------
 1 file changed, 87 insertions(+), 47 deletions(-)

diff --git a/ui/colony/src/components/ComposeBox.tsx b/ui/colony/src/components/ComposeBox.tsx
index 5fb0f40..01c9bb2 100644
--- a/ui/colony/src/components/ComposeBox.tsx
+++ b/ui/colony/src/components/ComposeBox.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import type { MessageType } from "@/types/MessageType";
 import { postMessage } from "@/api";
 import { cn } from "@/lib/utils";
@@ -10,13 +10,13 @@ interface Props {
   onMessageSent: () => void;
 }
 
-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)]" },
-];
+const TYPE_META: Record<MessageType, { prefix: string; color: string; key: string }> = {
+  text: { prefix: ">", color: "text-muted-foreground", key: "1" },
+  code: { prefix: "//", color: "text-[var(--color-msg-code)]", key: "2" },
+  result: { prefix: "=>", color: "text-[var(--color-msg-result)]", key: "3" },
+  error: { prefix: "!!", color: "text-[var(--color-msg-error)]", key: "4" },
+  plan: { prefix: "::", color: "text-[var(--color-msg-plan)]", key: "5" },
+};
 
 export function ComposeBox({
   channelId,
@@ -27,6 +27,22 @@ export function ComposeBox({
   const [content, setContent] = useState("");
   const [msgType, setMsgType] = useState<MessageType>("text");
   const [sending, setSending] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const meta = TYPE_META[msgType];
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.style.height = "0";
+      inputRef.current.style.height = `${Math.min(inputRef.current.scrollHeight, 120)}px`;
+    }
+  }, [content]);
+
+  // Auto-focus on mount
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
 
   async function handleSend() {
     if (!content.trim() || sending) return;
@@ -46,67 +62,91 @@ export function ComposeBox({
     }
   }
 
+  function cycleType(direction: 1 | -1) {
+    const types: MessageType[] = ["text", "code", "result", "error", "plan"];
+    const idx = types.indexOf(msgType);
+    const next = (idx + direction + types.length) % types.length;
+    setMsgType(types[next]);
+  }
+
   return (
-    <div className="border-t-2 border-border bg-card px-3 py-2.5 md:px-4 pb-[env(safe-area-inset-bottom,10px)]">
+    <div className={cn(
+      "border-t-2 transition-colors px-3 py-2 md:px-4 pb-[env(safe-area-inset-bottom,8px)]",
+      focused ? "border-primary bg-card" : "border-border bg-background",
+    )}>
+      {/* Reply chip */}
       {replyTo && (
-        <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>
+        <div className="flex items-center gap-1.5 mb-1.5 text-[10px] font-mono">
+          <span className="text-primary">^</span>
+          <span className="text-muted-foreground">#{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"
+            className="text-muted-foreground hover:text-primary ml-1"
           >
-            [x]
+            x
           </button>
         </div>
       )}
 
-      <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-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"
-                  : cn("text-muted-foreground hover:text-foreground hover:bg-muted/50", t.color),
-              )}
-            >
-              {t.label}
-            </button>
-          ))}
-        </div>
+      <div className="flex items-end gap-2">
+        {/* Type prefix — click to cycle */}
+        <button
+          type="button"
+          onClick={() => cycleType(1)}
+          className={cn(
+            "font-mono text-sm font-bold pb-1 min-w-[20px] transition-colors select-none",
+            meta.color,
+          )}
+          title={`${msgType} (Tab to cycle, Ctrl+1-5 to select)`}
+        >
+          {meta.prefix}
+        </button>
 
-        {/* Input — thick border, no radius */}
-        <input
-          type="text"
+        {/* Auto-growing textarea — no send button */}
+        <textarea
+          ref={inputRef}
           value={content}
           onChange={(e) => setContent(e.target.value)}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
           onKeyDown={(e) => {
             if (e.key === "Enter" && !e.shiftKey) {
               e.preventDefault();
               handleSend();
             }
+            if (e.key === "Tab" && !e.shiftKey) {
+              e.preventDefault();
+              cycleType(1);
+            }
+            if (e.key === "Tab" && e.shiftKey) {
+              e.preventDefault();
+              cycleType(-1);
+            }
+            // Ctrl+1-5 for type
+            if (e.ctrlKey && e.key >= "1" && e.key <= "5") {
+              e.preventDefault();
+              const types: MessageType[] = ["text", "code", "result", "error", "plan"];
+              setMsgType(types[parseInt(e.key) - 1]);
+            }
           }}
-          placeholder="> message..."
+          placeholder="message"
           disabled={sending}
-          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"
+          rows={1}
+          className={cn(
+            "flex-1 bg-transparent text-sm font-mono text-foreground placeholder:text-muted-foreground/30 resize-none focus:outline-none leading-relaxed py-0.5",
+            sending && "opacity-30",
+          )}
         />
 
-        {/* Send — hot orange */}
-        <button
-          type="button"
-          onClick={handleSend}
-          disabled={sending || !content.trim()}
-          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>
+        {/* Subtle type indicator — shows current type name */}
+        <span className={cn(
+          "text-[9px] font-mono uppercase tracking-widest pb-1 transition-opacity",
+          meta.color,
+          content ? "opacity-60" : "opacity-30",
+        )}>
+          {msgType}
+        </span>
       </div>
     </div>
   );