fix: domain picker overflow, triage skip-for-today, important/urgent at creation

frontend/src/app/(app)/layout.tsx

@@ -381,6 +381,11 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
         <TriageReminderBanner
           onStart={() => { setShowTriageBanner(false); router.push("/triage"); }}
           onDismiss={() => setShowTriageBanner(false)}
+          onSkipForToday={() => {
+            markTriageDone();
+            setTriagePending(false);
+            setShowTriageBanner(false);
+          }}
           isFirstTime={user ? !user.has_triaged_before : false}
         />
       )}

frontend/src/components/domain-picker.tsx

@@ -99,7 +99,7 @@ export function DomainPicker({ taskId, currentDomain, domains, onMutate }: Domai
         )}
       </button>
       {isOpen && (
-        <div className="absolute top-full left-1/2 -translate-x-1/2 mt-1 z-10 flex items-center gap-1 bg-bg-card border border-border rounded-lg px-1.5 py-1.5 shadow-lg">
+        <div className="absolute top-full left-0 mt-1 z-10 flex flex-wrap items-center gap-1 bg-bg-card border border-border rounded-lg px-1.5 py-1.5 shadow-lg max-w-[calc(100vw-2rem)]">
           {domains.map((d) => (
             <button
               key={d.id}

frontend/src/components/task-input.tsx

@@ -21,6 +21,8 @@ export const TaskInput = forwardRef<TaskInputHandle, TaskInputProps>(function Ta
   const [phase, setPhase] = useState<Phase>("typing");
   // Index into [undefined, ...domains] where undefined = "None"
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [important, setImportant] = useState(false);
+  const [urgent, setUrgent] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const chipContainerRef = useRef<HTMLDivElement>(null);
 
@@ -37,6 +39,8 @@ export const TaskInput = forwardRef<TaskInputHandle, TaskInputProps>(function Ta
   const resetToTyping = useCallback(() => {
     setText("");
     setSelectedIndex(0);
+    setImportant(false);
+    setUrgent(false);
     setPhase("typing");
     setShouldRefocus(true);
   }, []);
@@ -45,13 +49,19 @@ export const TaskInput = forwardRef<TaskInputHandle, TaskInputProps>(function Ta
     setPhase("submitting");
     const domainId = domainIndex > 0 ? domains[domainIndex - 1]?.id : undefined;
     try {
-      await createTask({ text: taskText, bucket, domain_id: domainId });
+      await createTask({
+        text: taskText,
+        bucket,
+        domain_id: domainId,
+        important: important || undefined,
+        urgent: urgent || undefined,
+      });
       onCreated();
     } catch (err) {
       console.error("Failed to create task:", err);
     }
     resetToTyping();
-  }, [bucket, domains, onCreated, resetToTyping]);
+  }, [bucket, domains, important, urgent, onCreated, resetToTyping]);
 
   function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
     if (e.key !== "Enter") return;
@@ -128,6 +138,44 @@ export const TaskInput = forwardRef<TaskInputHandle, TaskInputProps>(function Ta
           disabled={isDisabled || phase === "selecting"}
           className="flex-1 bg-transparent text-sm text-text-primary placeholder:text-text-muted outline-none disabled:opacity-50"
         />
+        <button
+          type="button"
+          onClick={() => setImportant((v) => !v)}
+          disabled={isDisabled}
+          aria-label={important ? "Remove important" : "Mark as important"}
+          aria-pressed={important}
+          title={important ? "Remove important" : "Mark as important"}
+          className="shrink-0 h-11 w-11 inline-flex items-center justify-center disabled:opacity-50"
+        >
+          <span
+            className={`font-mono text-[10px] px-1.5 py-0.5 rounded border transition-all duration-150 ${
+              important
+                ? "border-red-500/35 bg-red-500/8 text-red-300"
+                : "border-neutral-800 text-neutral-500 hover:text-neutral-400"
+            }`}
+          >
+            !
+          </span>
+        </button>
+        <button
+          type="button"
+          onClick={() => setUrgent((v) => !v)}
+          disabled={isDisabled}
+          aria-label={urgent ? "Remove urgent" : "Mark as urgent"}
+          aria-pressed={urgent}
+          title={urgent ? "Remove urgent" : "Mark as urgent"}
+          className="shrink-0 h-11 w-11 inline-flex items-center justify-center disabled:opacity-50"
+        >
+          <span
+            className={`text-[10px] px-1.5 py-0.5 rounded border transition-all duration-150 ${
+              urgent
+                ? "border-amber-500/35 bg-amber-500/8 text-amber-300"
+                : "border-neutral-800 text-neutral-500 hover:text-neutral-400"
+            }`}
+          >
+            ⚡
+          </span>
+        </button>
         {phase === "typing" && text.length > 0 && (
           <span className="text-xs text-text-muted shrink-0">{text.length}/500</span>
         )}

frontend/src/components/triage-reminder-banner.tsx

@@ -3,10 +3,16 @@
 interface TriageReminderBannerProps {
   onStart: () => void;
   onDismiss: () => void;
+  onSkipForToday: () => void;
   isFirstTime?: boolean;
 }
 
-export function TriageReminderBanner({ onStart, onDismiss, isFirstTime }: TriageReminderBannerProps) {
+export function TriageReminderBanner({
+  onStart,
+  onDismiss,
+  onSkipForToday,
+  isFirstTime,
+}: TriageReminderBannerProps) {
   const message = isFirstTime
     ? "Ready for your first triage? It only takes a few minutes."
     : "Time to triage — you haven't sorted today's tasks yet.";
@@ -23,19 +29,27 @@ export function TriageReminderBanner({ onStart, onDismiss, isFirstTime }: Triage
           <p className="text-sm font-medium text-text-primary">Triage reminder</p>
           <p className="text-sm text-text-secondary leading-snug">{message}</p>
         </div>
-        <div className="flex gap-2">
+        <div className="space-y-2">
           <button
             onClick={onStart}
-            className="flex-1 bg-accent-blue text-white rounded-xl px-4 py-2.5 text-sm font-medium hover:bg-accent-blue/90 transition-colors min-h-[44px]"
+            className="w-full bg-accent-blue text-white rounded-xl px-4 py-2.5 text-sm font-medium hover:bg-accent-blue/90 transition-colors min-h-[44px]"
           >
             Start triage
           </button>
-          <button
-            onClick={onDismiss}
-            className="flex-1 rounded-xl border border-border px-4 py-2.5 text-sm text-text-secondary hover:bg-bg-hover transition-colors min-h-[44px]"
-          >
-            Maybe later
-          </button>
+          <div className="flex gap-2">
+            <button
+              onClick={onSkipForToday}
+              className="flex-1 rounded-xl border border-border px-4 py-2.5 text-sm text-text-secondary hover:bg-bg-hover transition-colors min-h-[44px]"
+            >
+              Skip for today
+            </button>
+            <button
+              onClick={onDismiss}
+              className="flex-1 rounded-xl px-4 py-2.5 text-xs text-text-muted hover:text-text-secondary hover:bg-bg-hover transition-colors min-h-[44px]"
+            >
+              Maybe later
+            </button>
+          </div>
         </div>
       </div>
     </div>

frontend/src/lib/api.ts

@@ -67,6 +67,8 @@ export async function createTask(body: {
   domain_id?: string;
   parent_id?: string;
   skip_triage_stamp?: boolean;
+  important?: boolean;
+  urgent?: boolean;
 }): Promise<Task> {
   return request<Task>("tasks", { method: "POST", body: JSON.stringify(body) });
 }