Rename Foundry handoffs to tasks (#239)

* Restore foundry onboarding stack

* Consolidate foundry rename

* Create foundry tasks without prompts

* Rename Foundry handoffs to tasks

foundry/packages/frontend/src/components/mock-layout/prompt-composer.tsx

@@ -0,0 +1,179 @@
+import { memo, type Ref } from "react";
+import { useStyletron } from "baseui";
+import { ChatComposer, type ChatComposerClassNames } from "@sandbox-agent/react";
+import { FileCode, SendHorizonal, Square, X } from "lucide-react";
+
+import { ModelPicker } from "./model-picker";
+import { PROMPT_TEXTAREA_MAX_HEIGHT, PROMPT_TEXTAREA_MIN_HEIGHT } from "./ui";
+import { fileName, type LineAttachment, type ModelId } from "./view-model";
+
+export const PromptComposer = memo(function PromptComposer({
+  draft,
+  textareaRef,
+  placeholder,
+  attachments,
+  defaultModel,
+  model,
+  isRunning,
+  onDraftChange,
+  onSend,
+  onStop,
+  onRemoveAttachment,
+  onChangeModel,
+  onSetDefaultModel,
+}: {
+  draft: string;
+  textareaRef: Ref<HTMLTextAreaElement>;
+  placeholder: string;
+  attachments: LineAttachment[];
+  defaultModel: ModelId;
+  model: ModelId;
+  isRunning: boolean;
+  onDraftChange: (value: string) => void;
+  onSend: () => void;
+  onStop: () => void;
+  onRemoveAttachment: (id: string) => void;
+  onChangeModel: (model: ModelId) => void;
+  onSetDefaultModel: (model: ModelId) => void;
+}) {
+  const [css, theme] = useStyletron();
+  const composerClassNames: Partial<ChatComposerClassNames> = {
+    form: css({
+      position: "relative",
+      backgroundColor: "rgba(255, 255, 255, 0.06)",
+      border: `1px solid ${theme.colors.borderOpaque}`,
+      borderRadius: "16px",
+      minHeight: `${PROMPT_TEXTAREA_MIN_HEIGHT + 36}px`,
+      transition: "border-color 200ms ease",
+      ":focus-within": { borderColor: "rgba(255, 255, 255, 0.15)" },
+      display: "flex",
+      flexDirection: "column",
+    }),
+    input: css({
+      display: "block",
+      width: "100%",
+      minHeight: `${PROMPT_TEXTAREA_MIN_HEIGHT + 20}px`,
+      padding: "14px 58px 8px 14px",
+      background: "transparent",
+      border: "none",
+      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 + 40}px`,
+      boxSizing: "border-box",
+      overflowY: "hidden",
+      "::placeholder": { color: theme.colors.contentSecondary },
+    }),
+    submit: css({
+      appearance: "none",
+      WebkitAppearance: "none",
+      boxSizing: "border-box",
+      width: "32px",
+      height: "32px",
+      padding: "0",
+      margin: "0",
+      border: "none",
+      borderRadius: "6px",
+      cursor: "pointer",
+      position: "absolute",
+      right: "12px",
+      bottom: "12px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      lineHeight: 0,
+      fontSize: 0,
+      color: theme.colors.contentPrimary,
+      transition: "background 200ms ease",
+      backgroundColor: isRunning ? "rgba(255, 255, 255, 0.06)" : "rgba(255, 255, 255, 0.12)",
+      ":hover": {
+        backgroundColor: isRunning ? "rgba(255, 255, 255, 0.12)" : "rgba(255, 255, 255, 0.20)",
+      },
+      ":disabled": {
+        cursor: "not-allowed",
+        opacity: 0.45,
+      },
+    }),
+    submitContent: css({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      height: "100%",
+      lineHeight: 0,
+      color: isRunning ? theme.colors.contentPrimary : "#ffffff",
+    }),
+  };
+
+  return (
+    <div
+      className={css({
+        padding: "12px 16px",
+        borderTop: "none",
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+      })}
+    >
+      {attachments.length > 0 ? (
+        <div className={css({ display: "flex", flexWrap: "wrap", gap: "4px" })}>
+          {attachments.map((attachment) => (
+            <div
+              key={attachment.id}
+              className={css({
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "4px",
+                padding: "2px 8px",
+                borderRadius: "4px",
+                backgroundColor: "rgba(255, 255, 255, 0.06)",
+                border: "1px solid rgba(255, 255, 255, 0.14)",
+                fontSize: "11px",
+                fontFamily: '"IBM Plex Mono", monospace',
+                color: theme.colors.contentSecondary,
+              })}
+            >
+              <FileCode size={11} />
+              <span>
+                {fileName(attachment.filePath)}:{attachment.lineNumber}
+              </span>
+              <X size={10} className={css({ cursor: "pointer", opacity: 0.6, ":hover": { opacity: 1 } })} onClick={() => onRemoveAttachment(attachment.id)} />
+            </div>
+          ))}
+        </div>
+      ) : null}
+      <ChatComposer
+        message={draft}
+        onMessageChange={onDraftChange}
+        onSubmit={isRunning ? onStop : onSend}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            if (isRunning) {
+              onStop();
+            } else {
+              onSend();
+            }
+          }
+        }}
+        placeholder={placeholder}
+        inputRef={textareaRef}
+        rows={2}
+        allowEmptySubmit={isRunning}
+        submitLabel={isRunning ? "Stop" : "Send"}
+        classNames={composerClassNames}
+        renderSubmitContent={() => (isRunning ? <Square size={16} style={{ display: "block" }} /> : <SendHorizonal size={16} style={{ display: "block" }} />)}
+        renderFooter={() => (
+          <div className={css({ padding: "0 10px 8px" })}>
+            <ModelPicker value={model} defaultModel={defaultModel} onChange={onChangeModel} onSetDefault={onSetDefaultModel} />
+          </div>
+        )}
+      />
+    </div>
+  );
+});