Allow manual context management (#376)

src/components/ChatInputControls.tsx

@@ -1,10 +1,16 @@
+import { ContextFilesPicker } from "./ContextFilesPicker";
 import { ModelPicker } from "./ModelPicker";
 import { ProModeSelector } from "./ProModeSelector";
 
-export function ChatInputControls() {
+export function ChatInputControls({
+  showContextFilesPicker = false,
+}: {
+  showContextFilesPicker?: boolean;
+}) {
   return (
     <div className="pb-2 flex gap-2">
       <ModelPicker />
+      {showContextFilesPicker && <ContextFilesPicker />}
       <ProModeSelector />
     </div>
   );

src/components/ContextFilesPicker.tsx

@@ -0,0 +1,281 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+import { FileCode, InfoIcon, Trash2 } from "lucide-react";
+import { useState } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./ui/tooltip";
+import { useSettings } from "@/hooks/useSettings";
+import { useContextPaths } from "@/hooks/useContextPaths";
+
+export function ContextFilesPicker() {
+  const { settings } = useSettings();
+  const {
+    contextPaths,
+    smartContextAutoIncludes,
+    updateContextPaths,
+    updateSmartContextAutoIncludes,
+  } = useContextPaths();
+  const [isOpen, setIsOpen] = useState(false);
+  const [newPath, setNewPath] = useState("");
+  const [newAutoIncludePath, setNewAutoIncludePath] = useState("");
+
+  const addPath = () => {
+    if (
+      newPath.trim() === "" ||
+      contextPaths.find((p) => p.globPath === newPath)
+    ) {
+      setNewPath("");
+      return;
+    }
+    const newPaths = [
+      ...contextPaths.map(({ globPath }) => ({ globPath })),
+      {
+        globPath: newPath,
+      },
+    ];
+    updateContextPaths(newPaths);
+    setNewPath("");
+  };
+
+  const removePath = (pathToRemove: string) => {
+    const newPaths = contextPaths
+      .filter((p) => p.globPath !== pathToRemove)
+      .map(({ globPath }) => ({ globPath }));
+    updateContextPaths(newPaths);
+  };
+
+  const addAutoIncludePath = () => {
+    if (
+      newAutoIncludePath.trim() === "" ||
+      smartContextAutoIncludes.find((p) => p.globPath === newAutoIncludePath)
+    ) {
+      setNewAutoIncludePath("");
+      return;
+    }
+    const newPaths = [
+      ...smartContextAutoIncludes.map(({ globPath }) => ({ globPath })),
+      {
+        globPath: newAutoIncludePath,
+      },
+    ];
+    updateSmartContextAutoIncludes(newPaths);
+    setNewAutoIncludePath("");
+  };
+
+  const removeAutoIncludePath = (pathToRemove: string) => {
+    const newPaths = smartContextAutoIncludes
+      .filter((p) => p.globPath !== pathToRemove)
+      .map(({ globPath }) => ({ globPath }));
+    updateSmartContextAutoIncludes(newPaths);
+  };
+
+  const isSmartContextEnabled =
+    settings?.enableDyadPro && settings?.enableProSmartFilesContextMode;
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" className="gap-2">
+          <FileCode className="size-4" />
+          <span>Context</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-96" align="start">
+        <div className="relative space-y-4">
+          <div>
+            <h3 className="font-medium">Codebase Context</h3>
+            <p className="text-sm text-muted-foreground">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="flex items-center gap-1 cursor-help">
+                      Select the files to use as context.{" "}
+                      <InfoIcon className="size-4" />
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent className="max-w-[300px]">
+                    {isSmartContextEnabled ? (
+                      <p>
+                        With Smart Context, Dyad uses the most relevant files as
+                        context.
+                      </p>
+                    ) : (
+                      <p>By default, Dyad uses your whole codebase.</p>
+                    )}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </p>
+          </div>
+
+          <div className="flex w-full max-w-sm items-center space-x-2">
+            <Input
+              data-testid="manual-context-files-input"
+              type="text"
+              placeholder="src/**/*.tsx"
+              value={newPath}
+              onChange={(e) => setNewPath(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  addPath();
+                }
+              }}
+            />
+            <Button
+              type="submit"
+              onClick={addPath}
+              data-testid="manual-context-files-add-button"
+            >
+              Add
+            </Button>
+          </div>
+
+          <TooltipProvider>
+            {contextPaths.length > 0 ? (
+              <div className="space-y-2">
+                {contextPaths.map((p) => (
+                  <div
+                    key={p.globPath}
+                    className="flex items-center justify-between gap-2 rounded-md border p-2"
+                  >
+                    <div className="flex flex-1 flex-col overflow-hidden">
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <span className="truncate font-mono text-sm">
+                            {p.globPath}
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>{p.globPath}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                      <span className="text-xs text-muted-foreground">
+                        {p.files} files, ~{p.tokens} tokens
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => removePath(p.globPath)}
+                        data-testid="manual-context-files-remove-button"
+                      >
+                        <Trash2 className="size-4" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="rounded-md border border-dashed p-4 text-center">
+                <p className="text-sm text-muted-foreground">
+                  {isSmartContextEnabled
+                    ? "Dyad will use Smart Context to automatically find the most relevant files to use as context."
+                    : "Dyad will use the entire codebase as context."}
+                </p>
+              </div>
+            )}
+          </TooltipProvider>
+
+          {isSmartContextEnabled && (
+            <div className="pt-2">
+              <div>
+                <h3 className="font-medium">Smart Context Auto-includes</h3>
+                <p className="text-sm text-muted-foreground">
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span className="flex items-center gap-1 cursor-help">
+                          These files will always be included in the context.{" "}
+                          <InfoIcon className="ml-2 size-4" />
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-[300px]">
+                        <p>
+                          Auto-include files are always included in the context
+                          in addition to the files selected as relevant by Smart
+                          Context.
+                        </p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </p>
+              </div>
+
+              <div className="flex w-full max-w-sm items-center space-x-2 mt-4">
+                <Input
+                  data-testid="auto-include-context-files-input"
+                  type="text"
+                  placeholder="src/**/*.config.ts"
+                  value={newAutoIncludePath}
+                  onChange={(e) => setNewAutoIncludePath(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      addAutoIncludePath();
+                    }
+                  }}
+                />
+                <Button
+                  type="submit"
+                  onClick={addAutoIncludePath}
+                  data-testid="auto-include-context-files-add-button"
+                >
+                  Add
+                </Button>
+              </div>
+
+              <TooltipProvider>
+                {smartContextAutoIncludes.length > 0 && (
+                  <div className="space-y-2 mt-4">
+                    {smartContextAutoIncludes.map((p) => (
+                      <div
+                        key={p.globPath}
+                        className="flex items-center justify-between gap-2 rounded-md border p-2"
+                      >
+                        <div className="flex flex-1 flex-col overflow-hidden">
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <span className="truncate font-mono text-sm">
+                                {p.globPath}
+                              </span>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>{p.globPath}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                          <span className="text-xs text-muted-foreground">
+                            {p.files} files, ~{p.tokens} tokens
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => removeAutoIncludePath(p.globPath)}
+                            data-testid="auto-include-context-files-remove-button"
+                          >
+                            <Trash2 className="size-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </TooltipProvider>
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

src/components/chat/ChatInput.tsx

@@ -341,7 +341,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
             )}
           </div>
           <div className="pl-2 pr-1 flex items-center justify-between">
-            <ChatInputControls />
+            <ChatInputControls showContextFilesPicker={true} />
             <button
               onClick={() => setShowTokenBar(!showTokenBar)}
               className="flex items-center px-2 py-1 text-xs text-muted-foreground hover:bg-muted rounded"

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };