feat: add job-oriented primary input below recommended jobs

Author: marian2js

apps/desktop/src/features/dashboard/components/DashboardWorkspace.tsx

@@ -11,6 +11,7 @@ import { CompanyUnderstandingHero } from "@/features/dashboard/components/Compan
 import { DashboardAgentRoster } from "@/features/dashboard/components/DashboardAgentRoster";
 import { PlaybookInputForm } from "@/features/dashboard/components/PlaybookInputForm";
 import { RecommendedJobs } from "@/features/dashboard/components/RecommendedJobs";
+import { JobOrientedInput } from "@/features/dashboard/components/JobOrientedInput";
 import { useMeaningfulWork } from "@/features/dashboard/hooks/useMeaningfulWork";
 import { RecentOutputs } from "@/features/dashboard/components/RecentOutputs";
 import { BoardSummary } from "@/features/dashboard/components/BoardSummary";
@@ -180,6 +181,11 @@ function DashboardContent({
         />
       </div>
 
+      {/* 2.5 Job-oriented free input */}
+      <div className="dashboard-section">
+        <JobOrientedInput onSubmit={handleFreeTextSubmit} />
+      </div>
+
       {/* 3. Specialist roster */}
       {!specialistRoster.isLoading && specialistRoster.specialists.length > 0 && (
         <div className="dashboard-section">

apps/desktop/src/features/dashboard/components/JobOrientedInput.tsx

@@ -0,0 +1,64 @@
+import { useRef, useState } from "react";
+import { ArrowRightIcon, PenLineIcon } from "lucide-react";
+
+export interface JobOrientedInputProps {
+  onSubmit: (text: string) => void;
+}
+
+export function JobOrientedInput({ onSubmit }: JobOrientedInputProps) {
+  const [value, setValue] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  function handleSubmit() {
+    const trimmed = value.trim();
+    if (trimmed) {
+      onSubmit(trimmed);
+      setValue("");
+      if (textareaRef.current) {
+        textareaRef.current.style.height = "auto";
+      }
+    }
+  }
+
+  function handleInput(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    setValue(e.target.value);
+    const el = e.target;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
+  }
+
+  return (
+    <div>
+      <div className="mb-3 flex items-center gap-2">
+        <PenLineIcon className="size-3.5 text-primary" />
+        <span className="section-label text-primary">YOUR NEXT MOVE</span>
+      </div>
+      <div className="group/input rounded-xl bg-gradient-to-r from-border/40 via-border/40 to-border/40 p-[1px] transition-all duration-200 hover:from-border/60 hover:via-border/60 hover:to-border/60 focus-within:from-primary/30 focus-within:via-primary/15 focus-within:to-primary/30 focus-within:shadow-md focus-within:shadow-primary/5 dark:from-white/[0.06] dark:via-white/[0.06] dark:to-white/[0.06] dark:hover:from-white/[0.10] dark:hover:via-white/[0.10] dark:hover:to-white/[0.10] dark:focus-within:from-primary/30 dark:focus-within:via-primary/15 dark:focus-within:to-primary/30">
+        <div className="relative rounded-[11px] bg-card shadow-sm dark:bg-[#18181B]">
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={handleInput}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                handleSubmit();
+              }
+            }}
+            placeholder="What do you want to get done?"
+            rows={1}
+            className="w-full resize-none rounded-[11px] border-0 bg-transparent px-5 py-4 pr-14 text-[15px] leading-relaxed text-foreground placeholder:text-muted-foreground/35 focus:outline-none"
+          />
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={!value.trim()}
+            className="absolute right-3 bottom-3.5 flex size-8 items-center justify-center rounded-lg text-muted-foreground/40 transition-all duration-100 enabled:bg-primary enabled:text-primary-foreground enabled:shadow-sm hover:enabled:bg-primary/90 disabled:opacity-20"
+          >
+            <ArrowRightIcon className="size-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

test/ui/dashboard-job-input.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync, existsSync } from "node:fs";
+import { resolve } from "node:path";
+
+const dashDir = resolve(
+  __dirname,
+  "../../apps/desktop/src/features/dashboard",
+);
+const readSrc = (path: string) =>
+  readFileSync(resolve(dashDir, path), "utf-8");
+
+// ═══════════════════════════════════════════════════════
+// 1. JobOrientedInput component
+// ═══════════════════════════════════════════════════════
+
+describe("JobOrientedInput component", () => {
+  const componentPath = resolve(dashDir, "components/JobOrientedInput.tsx");
+
+  it("component file exists", () => {
+    expect(existsSync(componentPath)).toBe(true);
+  });
+
+  it("exports JobOrientedInput", () => {
+    const src = readSrc("components/JobOrientedInput.tsx");
+    expect(src).toContain("export function JobOrientedInput");
+  });
+
+  it("uses job-oriented placeholder framing", () => {
+    const src = readSrc("components/JobOrientedInput.tsx");
+    // Must contain job-oriented language, not CMO branding
+    expect(src).toMatch(/get.*done|want to produce|marketing job/i);
+  });
+
+  it("does NOT use CMO branding", () => {
+    const src = readSrc("components/JobOrientedInput.tsx");
+    expect(src).not.toContain("Ask CMO");
+    expect(src).not.toContain("BrainIcon");
+    expect(src).not.toContain('"CMO"');
+  });
+
+  it("has a textarea for multi-line input", () => {
+    const src = readSrc("components/JobOrientedInput.tsx");
+    expect(src).toContain("<textarea");
+  });
+
+  it("handles Enter key for submission", () => {
+    const src = readSrc("components/JobOrientedInput.tsx");
+    expect(src).toContain("Enter");
+    expect(src).toContain("handleSubmit");
+  });
+
+  it("has a submit button with ArrowRight icon", () => {
+    const src = readSrc("components/JobOrientedInput.tsx");
+    expect(src).toContain("ArrowRightIcon");
+    expect(src).toContain("<button");
+  });
+
+  it("accepts onSubmit prop", () => {
+    const src = readSrc("components/JobOrientedInput.tsx");
+    expect(src).toContain("onSubmit");
+  });
+
+  it("has a job-oriented section label", () => {
+    const src = readSrc("components/JobOrientedInput.tsx");
+    // Should have a section label like "YOUR NEXT MOVE" or similar
+    expect(src).toContain("section-label");
+  });
+});
+
+// ═══════════════════════════════════════════════════════
+// 2. DashboardWorkspace integration
+// ═══════════════════════════════════════════════════════
+
+describe("DashboardWorkspace integrates JobOrientedInput", () => {
+  it("imports JobOrientedInput", () => {
+    const src = readSrc("components/DashboardWorkspace.tsx");
+    expect(src).toContain("JobOrientedInput");
+  });
+
+  it("renders JobOrientedInput after RecommendedJobs", () => {
+    const src = readSrc("components/DashboardWorkspace.tsx");
+    const jobsIdx = src.indexOf("RecommendedJobs");
+    const inputIdx = src.indexOf("JobOrientedInput", jobsIdx);
+    const rosterIdx = src.indexOf("DashboardAgentRoster", inputIdx);
+    // JobOrientedInput appears between RecommendedJobs and DashboardAgentRoster
+    expect(inputIdx).toBeGreaterThan(jobsIdx);
+    expect(rosterIdx).toBeGreaterThan(inputIdx);
+  });
+
+  it("passes handleFreeTextSubmit to JobOrientedInput", () => {
+    const src = readSrc("components/DashboardWorkspace.tsx");
+    expect(src).toMatch(/JobOrientedInput[\s\S]*?handleFreeTextSubmit/);
+  });
+});