thursday-agent 0.1.2 → 0.3.0

package/components/ui/input-group.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  },
+);
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset";
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+};

package/components/ui/json-view.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { memo, useMemo, useState } from "react";
+import { cn } from "@/lib/utils";
+
+export type JsonValue =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | JsonValue[]
+  | { [key: string]: JsonValue };
+
+export type JsonViewProps = {
+  data: unknown;
+  name?: string;
+  initialExpandDepth?: number;
+};
+
+function tryParseJson(str: string): { success: boolean; data: JsonValue } {
+  const trimmed = str.trim();
+  if (
+    !(trimmed.startsWith("{") && trimmed.endsWith("}")) &&
+    !(trimmed.startsWith("[") && trimmed.endsWith("]"))
+  ) {
+    return { success: false, data: str };
+  }
+  try {
+    return { success: true, data: JSON.parse(str) };
+  } catch {
+    return { success: false, data: str };
+  }
+}
+
+const JsonView = memo(
+  ({ data, name, initialExpandDepth = 2 }: JsonViewProps) => {
+    // Parse a JSON string once, not on every render.
+    const normalizedData = useMemo(
+      () => (typeof data === "string" ? tryParseJson(data).data : data),
+      [data],
+    );
+
+    return (
+      <div className=" text-sm transition-all duration-300">
+        <JsonNode
+          data={normalizedData as JsonValue}
+          name={name}
+          depth={0}
+          initialExpandDepth={initialExpandDepth}
+        />
+      </div>
+    );
+  },
+);
+
+JsonView.displayName = "JsonView";
+
+interface JsonNodeProps {
+  data: JsonValue;
+  name?: string;
+  depth: number;
+  initialExpandDepth: number;
+}
+
+const JsonNode = memo(
+  ({ data, name, depth = 0, initialExpandDepth }: JsonNodeProps) => {
+    const getDataType = (value: JsonValue): string => {
+      if (value === undefined) return "undefined";
+      if (Array.isArray(value)) return "array";
+      if (value === null) return "null";
+      return typeof value;
+    };
+
+    const dataType = getDataType(data);
+    const [isExpanded, setIsExpanded] = useState(
+      dataType === "string" ? false : depth < initialExpandDepth,
+    );
+
+    const typeStyleMap: Record<string, string> = {
+      number: "text-blue-500",
+      boolean: "text-amber-500",
+      null: "text-purple-500",
+      undefined: "text-gray-500",
+      string: "text-foreground break-all whitespace-pre-wrap",
+      default: "text-muted-foreground",
+    };
+
+    const renderCollapsible = (isArray: boolean) => {
+      const items = isArray
+        ? (data as JsonValue[])
+        : Object.entries(data as Record<string, JsonValue>);
+      const itemCount = items.length;
+      const isEmpty = itemCount === 0;
+
+      const symbolMap = {
+        open: isArray ? "[" : "{",
+        close: isArray ? "]" : "}",
+        collapsed: isArray ? "[ ... ]" : "{ ... }",
+        empty: isArray ? "[]" : "{}",
+      };
+
+      if (isEmpty) {
+        return (
+          <div className="flex items-center">
+            {name && (
+              <span className="mr-1 text-muted-foreground">{name}:</span>
+            )}
+            <span className="text-muted-foreground">{symbolMap.empty}</span>
+          </div>
+        );
+      }
+
+      return (
+        <div className="flex flex-col">
+          <div
+            className="flex items-center mr-1 rounded cursor-pointer group hover:bg-input/30"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            {name && (
+              <span className="mr-1 text-muted-foreground  hover:text-foreground">
+                {name}:
+              </span>
+            )}
+            {isExpanded ? (
+              <span className="text-muted-foreground  group-hover:text-foreground">
+                {symbolMap.open}
+              </span>
+            ) : (
+              <>
+                <span className="text-muted-foreground  group-hover:text-foreground">
+                  {symbolMap.collapsed}
+                </span>
+                <span className="ml-1 text-muted-foreground  group-hover:text-foreground">
+                  {itemCount} {itemCount === 1 ? "item" : "items"}
+                </span>
+              </>
+            )}
+          </div>
+          {isExpanded && (
+            <>
+              <div className="pl-2 ml-4 border-l border-border">
+                {isArray
+                  ? (items as JsonValue[]).map((item, index) => (
+                      <div key={index} className="my-1">
+                        <JsonNode
+                          data={item}
+                          name={`${index}`}
+                          depth={depth + 1}
+                          initialExpandDepth={initialExpandDepth}
+                        />
+                      </div>
+                    ))
+                  : (items as [string, JsonValue][]).map(([key, value]) => (
+                      <div key={key} className="my-1">
+                        <JsonNode
+                          data={value}
+                          name={key}
+                          depth={depth + 1}
+                          initialExpandDepth={initialExpandDepth}
+                        />
+                      </div>
+                    ))}
+              </div>
+              <div className="text-muted-foreground">{symbolMap.close}</div>
+            </>
+          )}
+        </div>
+      );
+    };
+
+    const renderString = (value: string) => {
+      const maxLength = 100;
+      const isTooLong = value.length > maxLength;
+
+      if (!isTooLong) {
+        return (
+          <div className="flex mr-1 rounded hover:bg-input/30">
+            {name && (
+              <span className="mr-1 text-muted-foreground">{name}:</span>
+            )}
+            <pre className={typeStyleMap.string}>&quot;{value}&quot;</pre>
+          </div>
+        );
+      }
+
+      return (
+        <div className="flex mr-1 rounded group hover:bg-input/30">
+          {name && (
+            <span className="mr-1 text-muted-foreground  hover:text-foreground">
+              {name}:
+            </span>
+          )}
+          <pre
+            className={cn(
+              typeStyleMap.string,
+              "cursor-pointer group-hover:text-foreground",
+            )}
+            onClick={() => setIsExpanded(!isExpanded)}
+            title={isExpanded ? "Click to collapse" : "Click to expand"}
+          >
+            {isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`}
+          </pre>
+        </div>
+      );
+    };
+
+    switch (dataType) {
+      case "object":
+      case "array":
+        return renderCollapsible(dataType === "array");
+      case "string":
+        return renderString(data as string);
+      case "undefined":
+        return (
+          <div className="flex items-center mr-1 rounded hover:bg-input/30">
+            {name && (
+              <span className="mr-1 text-muted-foreground">{name}:</span>
+            )}
+            <span className={typeStyleMap.undefined}>undefined</span>
+          </div>
+        );
+      default:
+        return (
+          <div className="flex items-center mr-1 rounded hover:bg-input/30">
+            {name && (
+              <span className="mr-1 text-muted-foreground">{name}:</span>
+            )}
+            <span className={typeStyleMap[dataType] || typeStyleMap.default}>
+              {data === null ? "null" : String(data)}
+            </span>
+          </div>
+        );
+    }
+  },
+);
+
+JsonNode.displayName = "JsonNode";
+
+export default JsonView;

package/components/ui/shiny-text.tsx

@@ -0,0 +1,55 @@
+import type { CSSProperties } from "react";
+import { cn, WAITING_INK } from "@/lib/utils";
+
+/**
+ * The resting ink and the band that crosses it. On a light page the band moves
+ * toward the ink: a lighter band on light ground reads as the words fading out.
+ */
+const TONES = {
+  muted: { rest: "text-muted-foreground", band: "via-foreground" },
+  waiting: { rest: WAITING_INK, band: "via-amber-950 dark:via-amber-100" },
+} as const;
+
+export type ShinyTone = keyof typeof TONES;
+
+/**
+ * Words for something still moving. They are drawn once as plain text, so they
+ * cut short, wrap and select like any other; the sweep is a copy laid over them
+ * that carries only the band. A gradient clipped to the glyphs cannot draw the
+ * "…" a box truncates to, so the ellipsis belongs to the plain layer.
+ *
+ * Truncate on this component, not on a parent: it is an inline-block, and a
+ * parent cannot put an ellipsis inside one.
+ */
+export function ShinyText({
+  text,
+  tone = "muted",
+  speed = 2.4,
+  className,
+}: {
+  text: string;
+  tone?: ShinyTone;
+  /** Seconds for the band to cross once. */
+  speed?: number;
+  className?: string;
+}) {
+  const { rest, band } = TONES[tone];
+  return (
+    <span
+      data-slot="shiny-text"
+      className={cn("relative inline-block max-w-full", rest, className)}
+    >
+      {text}
+      <span
+        aria-hidden
+        style={{ animationDuration: `${speed}s` } as CSSProperties}
+        className={cn(
+          "pointer-events-none absolute inset-0 animate-shine overflow-hidden bg-linear-120 from-transparent from-35% via-50% to-transparent to-65% bg-size-[200%_auto] bg-clip-text text-transparent p-[inherit] select-none [text-overflow:inherit] motion-reduce:hidden",
+          band,
+        )}
+      >
+        {text}
+      </span>
+    </span>
+  );
+}

package/components/ui/text-type.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { gsap } from "gsap";
+import {
+  createElement,
+  type ElementType,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+interface TextTypeProps {
+  className?: string;
+  showCursor?: boolean;
+  hideCursorWhileTyping?: boolean;
+  cursorCharacter?: string | React.ReactNode;
+  cursorBlinkDuration?: number;
+  cursorClassName?: string;
+  text: string | string[];
+  as?: ElementType;
+  typingSpeed?: number;
+  initialDelay?: number;
+  pauseDuration?: number;
+  deletingSpeed?: number;
+  loop?: boolean;
+  textColors?: string[];
+  variableSpeed?: { min: number; max: number };
+  onSentenceComplete?: (sentence: string, index: number) => void;
+  startOnVisible?: boolean;
+  reverseMode?: boolean;
+}
+
+const TextType = ({
+  text,
+  as: Component = "div",
+  typingSpeed = 50,
+  initialDelay = 0,
+  pauseDuration = 2000,
+  deletingSpeed = 30,
+  loop = true,
+  className = "",
+  showCursor = true,
+  hideCursorWhileTyping = false,
+  cursorCharacter = "|",
+  cursorClassName = "",
+  cursorBlinkDuration = 0.5,
+  textColors = [],
+  variableSpeed,
+  onSentenceComplete,
+  startOnVisible = false,
+  reverseMode = false,
+  ...props
+}: TextTypeProps & React.HTMLAttributes<HTMLElement>) => {
+  const [displayedText, setDisplayedText] = useState("");
+  const [currentCharIndex, setCurrentCharIndex] = useState(0);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [currentTextIndex, setCurrentTextIndex] = useState(0);
+  const [isVisible, setIsVisible] = useState(!startOnVisible);
+  const cursorRef = useRef<HTMLSpanElement>(null);
+  const containerRef = useRef<HTMLElement>(null);
+
+  const textArray = useMemo(
+    () => (Array.isArray(text) ? text : [text]),
+    [text],
+  );
+
+  const getRandomSpeed = useCallback(() => {
+    if (!variableSpeed) return typingSpeed;
+    const { min, max } = variableSpeed;
+    return Math.random() * (max - min) + min;
+  }, [variableSpeed, typingSpeed]);
+
+  const getCurrentTextColor = () => {
+    if (textColors.length === 0) return "inherit";
+    return textColors[currentTextIndex % textColors.length];
+  };
+
+  useEffect(() => {
+    if (!startOnVisible || !containerRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+          }
+        });
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [startOnVisible]);
+
+  useEffect(() => {
+    if (showCursor && cursorRef.current) {
+      gsap.set(cursorRef.current, { opacity: 1 });
+      gsap.to(cursorRef.current, {
+        opacity: 0,
+        duration: cursorBlinkDuration,
+        repeat: -1,
+        yoyo: true,
+        ease: "power2.inOut",
+      });
+    }
+  }, [showCursor, cursorBlinkDuration]);
+
+  useEffect(() => {
+    if (!isVisible) return;
+
+    let timeout: ReturnType<typeof setTimeout>;
+
+    const currentText = textArray[currentTextIndex];
+    const processedText = reverseMode
+      ? currentText.split("").reverse().join("")
+      : currentText;
+
+    const executeTypingAnimation = () => {
+      if (isDeleting) {
+        if (displayedText === "") {
+          setIsDeleting(false);
+          if (currentTextIndex === textArray.length - 1 && !loop) {
+            return;
+          }
+
+          if (onSentenceComplete) {
+            onSentenceComplete(textArray[currentTextIndex], currentTextIndex);
+          }
+
+          setCurrentTextIndex((prev) => (prev + 1) % textArray.length);
+          setCurrentCharIndex(0);
+          timeout = setTimeout(() => {}, pauseDuration);
+        } else {
+          timeout = setTimeout(() => {
+            setDisplayedText((prev) => prev.slice(0, -1));
+          }, deletingSpeed);
+        }
+      } else {
+        if (currentCharIndex < processedText.length) {
+          timeout = setTimeout(
+            () => {
+              setDisplayedText(
+                (prev) => prev + processedText[currentCharIndex],
+              );
+              setCurrentCharIndex((prev) => prev + 1);
+            },
+            variableSpeed ? getRandomSpeed() : typingSpeed,
+          );
+        } else if (textArray.length >= 1) {
+          if (!loop && currentTextIndex === textArray.length - 1) return;
+          timeout = setTimeout(() => {
+            setIsDeleting(true);
+          }, pauseDuration);
+        }
+      }
+    };
+
+    if (currentCharIndex === 0 && !isDeleting && displayedText === "") {
+      timeout = setTimeout(executeTypingAnimation, initialDelay);
+    } else {
+      executeTypingAnimation();
+    }
+
+    return () => clearTimeout(timeout);
+  }, [
+    currentCharIndex,
+    displayedText,
+    isDeleting,
+    typingSpeed,
+    deletingSpeed,
+    pauseDuration,
+    textArray,
+    currentTextIndex,
+    loop,
+    initialDelay,
+    isVisible,
+    reverseMode,
+    variableSpeed,
+    onSentenceComplete,
+  ]);
+
+  const shouldHideCursor =
+    hideCursorWhileTyping &&
+    (currentCharIndex < textArray[currentTextIndex].length || isDeleting);
+
+  return createElement(
+    Component,
+    {
+      ref: containerRef,
+      className: `inline-block whitespace-pre-wrap tracking-tight ${className}`,
+      ...props,
+    },
+    <span
+      className="inline"
+      style={{ color: getCurrentTextColor() || "inherit" }}
+    >
+      {displayedText}
+    </span>,
+    showCursor && (
+      <span
+        ref={cursorRef}
+        className={`ml-1 inline-block opacity-100 ${shouldHideCursor ? "hidden" : ""} ${cursorClassName}`}
+      >
+        {cursorCharacter}
+      </span>
+    ),
+  );
+};
+
+export default TextType;

package/components/ui/theme-sync.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { useFollowSystemTheme } from "@/hooks/use-theme";
+
+/** Renders nothing; mounts the system-theme subscription for the server layout. */
+export function ThemeSync() {
+  useFollowSystemTheme();
+  return null;
+}