@cryptiklemur/lattice 1.3.0 → 1.5.0

package/client/src/components/analytics/charts/SessionBubbleChart.tsx

@@ -0,0 +1,122 @@
+import {
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  ZAxis,
+} from "recharts";
+
+var TICK_STYLE = {
+  fontSize: 10,
+  fontFamily: "var(--font-mono)",
+  fill: "oklch(0.9 0.02 280 / 0.3)",
+};
+
+var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+
+var PROJECT_PALETTE = [
+  "oklch(55% 0.25 280)",
+  "#a855f7",
+  "#22c55e",
+  "#f59e0b",
+  "oklch(65% 0.2 240)",
+  "oklch(65% 0.25 25)",
+  "oklch(65% 0.25 150)",
+  "oklch(70% 0.2 60)",
+];
+
+interface SessionBubbleDatum {
+  id: string;
+  title: string;
+  cost: number;
+  tokens: number;
+  timestamp: number;
+  project: string;
+}
+
+interface SessionBubbleChartProps {
+  data: SessionBubbleDatum[];
+}
+
+function formatDate(ts: number): string {
+  var d = new Date(ts);
+  return (d.getMonth() + 1) + "/" + d.getDate();
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: SessionBubbleDatum }> }) {
+  if (!active || !payload || payload.length === 0) return null;
+  var d = payload[0].payload;
+  return (
+    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg max-w-[180px]">
+      <p className="text-[10px] font-mono text-base-content/50 mb-1 truncate">{d.title || d.id}</p>
+      <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
+        <p><span className="text-base-content/40">cost </span>${d.cost.toFixed(4)}</p>
+        <p><span className="text-base-content/40">tokens </span>{d.tokens.toLocaleString()}</p>
+        <p><span className="text-base-content/40">project </span>{d.project}</p>
+      </div>
+    </div>
+  );
+}
+
+export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
+  var projects = Array.from(new Set(data.map(function (d) { return d.project; })));
+
+  function getColor(project: string): string {
+    var idx = projects.indexOf(project);
+    return PROJECT_PALETTE[idx % PROJECT_PALETTE.length];
+  }
+
+  var byProject = projects.map(function (project) {
+    return {
+      project,
+      color: getColor(project),
+      points: data
+        .filter(function (d) { return d.project === project; })
+        .map(function (d) { return { ...d, x: d.timestamp, y: d.tokens, z: Math.max(d.cost * 1000, 20) }; }),
+    };
+  });
+
+  var minTs = Math.min(...data.map(function (d) { return d.timestamp; }));
+  var maxTs = Math.max(...data.map(function (d) { return d.timestamp; }));
+
+  return (
+    <ResponsiveContainer width="100%" height={200}>
+      <ScatterChart margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} />
+        <XAxis
+          dataKey="x"
+          type="number"
+          domain={[minTs, maxTs]}
+          tick={TICK_STYLE}
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={function (v) { return formatDate(v); }}
+        />
+        <YAxis
+          dataKey="y"
+          type="number"
+          tick={TICK_STYLE}
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={function (v) { return v >= 1000 ? (v / 1000).toFixed(0) + "k" : String(v); }}
+        />
+        <ZAxis dataKey="z" range={[20, 300]} />
+        <Tooltip content={<CustomTooltip />} cursor={{ strokeDasharray: "3 3", stroke: GRID_COLOR }} />
+        {byProject.map(function (group) {
+          return (
+            <Scatter
+              key={group.project}
+              name={group.project}
+              data={group.points}
+              fill={group.color}
+              fillOpacity={0.7}
+            />
+          );
+        })}
+      </ScatterChart>
+    </ResponsiveContainer>
+  );
+}

package/client/src/components/chat/AttachmentChips.tsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { X, RotateCcw, Eye, EyeOff } from "lucide-react";
+import type { ClientAttachment } from "../../hooks/useAttachments";
+
+interface AttachmentChipsProps {
+  attachments: ClientAttachment[];
+  onRemove: (id: string) => void;
+  onRetry: (id: string) => void;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + "B";
+  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + "KB";
+  return (bytes / (1024 * 1024)).toFixed(1) + "MB";
+}
+
+function getExtBadge(name: string, type: string): string {
+  if (type === "paste") return "TXT";
+  var ext = name.split(".").pop()?.toUpperCase() || "";
+  return ext.slice(0, 4) || "FILE";
+}
+
+export function AttachmentChips(props: AttachmentChipsProps) {
+  var [expandedPaste, setExpandedPaste] = useState<string | null>(null);
+
+  if (props.attachments.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-1.5 px-3 py-2 border-b border-base-content/8" role="list" aria-label="Attachments">
+      {props.attachments.map(function (att) {
+        var isFailed = att.status === "failed";
+        var isUploading = att.status === "uploading";
+
+        return (
+          <div key={att.id} role="listitem" className="relative">
+            <div
+              className={
+                "relative flex items-center gap-1.5 rounded-lg px-2 py-1 text-[12px] overflow-hidden transition-colors " +
+                (isFailed
+                  ? "bg-error/10 border border-error/30 text-error/80"
+                  : "bg-base-content/5 border border-base-content/10 text-base-content/70")
+              }
+            >
+              {isUploading && (
+                <div
+                  className="absolute left-0 top-0 bottom-0 bg-primary/10 transition-all duration-300"
+                  style={{ width: att.progress + "%" }}
+                />
+              )}
+
+              {att.type === "image" && att.previewUrl ? (
+                <img
+                  src={att.previewUrl}
+                  alt=""
+                  className="relative w-7 h-7 rounded object-cover flex-shrink-0"
+                />
+              ) : (
+                <span className="relative font-mono text-[10px] text-primary/60 flex-shrink-0">
+                  {getExtBadge(att.name, att.type)}
+                </span>
+              )}
+
+              <span className="relative truncate max-w-[120px]">{att.name}</span>
+
+              {att.type === "paste" && att.lineCount ? (
+                <span className="relative text-[10px] text-base-content/30">{att.lineCount} lines</span>
+              ) : isUploading ? (
+                <span className="relative text-[10px] text-primary/50">{att.progress}%</span>
+              ) : (
+                <span className="relative text-[10px] text-base-content/30">{formatSize(att.size)}</span>
+              )}
+
+              {att.type === "paste" && att.content && (
+                <button
+                  onClick={function () {
+                    setExpandedPaste(expandedPaste === att.id ? null : att.id);
+                  }}
+                  className="relative text-[10px] text-primary/50 hover:text-primary/80 underline"
+                  aria-label={expandedPaste === att.id ? "Hide preview" : "Show preview"}
+                >
+                  {expandedPaste === att.id ? <EyeOff size={10} /> : <Eye size={10} />}
+                </button>
+              )}
+
+              {isFailed && (
+                <button
+                  onClick={function () { props.onRetry(att.id); }}
+                  className="relative text-error/60 hover:text-error/90"
+                  aria-label={"Retry " + att.name}
+                  title={att.error}
+                >
+                  <RotateCcw size={10} />
+                </button>
+              )}
+
+              <button
+                onClick={function () { props.onRemove(att.id); }}
+                className="relative text-base-content/30 hover:text-base-content/60"
+                aria-label={"Remove " + att.name}
+              >
+                <X size={12} />
+              </button>
+            </div>
+
+            {expandedPaste === att.id && att.content && (
+              <div className="absolute left-0 bottom-full mb-1 w-[400px] max-h-[200px] overflow-auto rounded-lg border border-base-content/10 bg-base-300 shadow-lg z-50 p-2 font-mono text-[11px] text-base-content/50 whitespace-pre">
+                {att.content.slice(0, 2000)}
+                {att.content.length > 2000 && "\n... (" + (att.content.length - 2000) + " more characters)"}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/client/src/components/chat/ChatInput.tsx

@@ -1,11 +1,21 @@
 import { useRef, useState, useEffect, useMemo } from "react";
-import { SendHorizontal, Settings } from "lucide-react";
+import { SendHorizontal, Settings, Paperclip } from "lucide-react";
 import { useSkills } from "../../hooks/useSkills";
+import { CommandPalette, getFilteredItems } from "./CommandPalette";
+import { useAttachments } from "../../hooks/useAttachments";
+import { useVoiceRecorder } from "../../hooks/useVoiceRecorder";
+import { AttachmentChips } from "./AttachmentChips";
+import { VoiceRecorder } from "./VoiceRecorder";
 
 interface ChatInputProps {
-  onSend: (text: string) => void;
+  onSend: (text: string, attachmentIds: string[]) => void;
   disabled: boolean;
+  disabledPlaceholder?: string;
   toolbarContent?: React.ReactNode;
+  failedInput?: string | null;
+  onFailedInputConsumed?: () => void;
+  prefillText?: string | null;
+  onPrefillConsumed?: () => void;
 }
 
 function getModKey(): string {
@@ -26,15 +36,19 @@ export function ChatInput(props: ChatInputProps) {
   var [showMobileSettings, setShowMobileSettings] = useState(false);
   var modKey = useMemo(getModKey, []);
 
-  var filtered = useMemo(function () {
-    if (slashQuery === null) return [];
-    var q = slashQuery.toLowerCase();
-    return skills.filter(function (s) {
-      return s.name.toLowerCase().includes(q) || s.description.toLowerCase().includes(q);
-    });
+  var attachmentsHook = useAttachments();
+  var voice = useVoiceRecorder();
+  var [isDragging, setIsDragging] = useState(false);
+  var dragCounter = useRef(0);
+  var fileInputRef = useRef<HTMLInputElement>(null);
+  var savedTextRef = useRef("");
+
+  var itemCount = useMemo(function () {
+    if (slashQuery === null) return 0;
+    return getFilteredItems(slashQuery, skills).length;
   }, [slashQuery, skills]);
 
-  var isOpen = slashQuery !== null && filtered.length > 0;
+  var isOpen = slashQuery !== null && itemCount > 0;
 
   useEffect(function () {
     setSelectedIndex(0);
@@ -60,6 +74,34 @@ export function ChatInput(props: ChatInputProps) {
     return function () { document.removeEventListener("mousedown", handleClick); };
   }, [showMobileSettings]);
 
+  useEffect(function () {
+    if (props.failedInput && textareaRef.current) {
+      var el = textareaRef.current;
+      el.value = props.failedInput;
+      el.style.height = "auto";
+      el.style.height = Math.min(el.scrollHeight, 160) + "px";
+      el.focus();
+      checkSlash();
+      if (props.onFailedInputConsumed) {
+        props.onFailedInputConsumed();
+      }
+    }
+  }, [props.failedInput]);
+
+  useEffect(function () {
+    if (props.prefillText && textareaRef.current) {
+      var el = textareaRef.current;
+      el.value = props.prefillText;
+      el.style.height = "auto";
+      el.style.height = Math.min(el.scrollHeight, 160) + "px";
+      el.focus();
+      checkSlash();
+      if (props.onPrefillConsumed) {
+        props.onPrefillConsumed();
+      }
+    }
+  }, [props.prefillText]);
+
   function checkSlash() {
     var el = textareaRef.current;
     if (!el) return;
@@ -71,30 +113,42 @@ export function ChatInput(props: ChatInputProps) {
     }
   }
 
-  function selectSkill(name: string) {
+  function selectItem(item: { name: string; args?: string; category: string; handler: string }) {
     var el = textareaRef.current;
     if (!el) return;
-    el.value = "/" + name + " ";
-    el.focus();
-    setSlashQuery(null);
+
+    var hasArgs = !!item.args;
+    var isSkill = item.category === "skill";
+
+    if (hasArgs || isSkill) {
+      el.value = "/" + item.name + " ";
+      el.focus();
+      setSlashQuery(null);
+    } else {
+      props.onSend("/" + item.name, []);
+      el.value = "";
+      el.style.height = "auto";
+      setSlashQuery(null);
+    }
   }
 
   function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
     if (isOpen) {
       if (e.key === "ArrowUp") {
         e.preventDefault();
-        setSelectedIndex(function (i) { return i > 0 ? i - 1 : filtered.length - 1; });
+        setSelectedIndex(function (i) { return i > 0 ? i - 1 : itemCount - 1; });
         return;
       }
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setSelectedIndex(function (i) { return i < filtered.length - 1 ? i + 1 : 0; });
+        setSelectedIndex(function (i) { return i < itemCount - 1 ? i + 1 : 0; });
         return;
       }
       if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) {
         e.preventDefault();
-        if (filtered[selectedIndex]) {
-          selectSkill(filtered[selectedIndex].name);
+        var items = getFilteredItems(slashQuery!, skills);
+        if (items[selectedIndex]) {
+          selectItem(items[selectedIndex]);
         }
         return;
       }
@@ -117,54 +171,112 @@ export function ChatInput(props: ChatInputProps) {
     checkSlash();
   }
 
+  function handlePaste(e: React.ClipboardEvent<HTMLTextAreaElement>) {
+    var items = e.clipboardData.items;
+    for (var i = 0; i < items.length; i++) {
+      if (items[i].type.startsWith("image/")) {
+        e.preventDefault();
+        var file = items[i].getAsFile();
+        if (file && attachmentsHook.canAttach) {
+          attachmentsHook.addFile(file);
+        }
+        return;
+      }
+    }
+
+    var text = e.clipboardData.getData("text/plain");
+    if (text && text.split("\n").length >= 10) {
+      e.preventDefault();
+      if (attachmentsHook.canAttach) {
+        attachmentsHook.addPaste(text);
+      }
+    }
+  }
+
+  function handleDragEnter(e: React.DragEvent) {
+    e.preventDefault();
+    dragCounter.current++;
+    if (e.dataTransfer.types.indexOf("Files") !== -1) {
+      setIsDragging(true);
+    }
+  }
+
+  function handleDragLeave(e: React.DragEvent) {
+    e.preventDefault();
+    dragCounter.current--;
+    if (dragCounter.current === 0) {
+      setIsDragging(false);
+    }
+  }
+
+  function handleDragOver(e: React.DragEvent) {
+    e.preventDefault();
+  }
+
+  function handleDrop(e: React.DragEvent) {
+    e.preventDefault();
+    dragCounter.current = 0;
+    setIsDragging(false);
+    var files = e.dataTransfer.files;
+    for (var i = 0; i < files.length; i++) {
+      if (attachmentsHook.canAttach) {
+        attachmentsHook.addFile(files[i]);
+      }
+    }
+  }
+
+  function handleVoiceStart() {
+    savedTextRef.current = textareaRef.current?.value || "";
+    voice.start();
+  }
+
+  function handleVoiceStop() {
+    var transcript = voice.stop();
+    if (transcript && textareaRef.current) {
+      var el = textareaRef.current;
+      var existing = savedTextRef.current;
+      el.value = existing ? existing + " " + transcript : transcript;
+      el.style.height = "auto";
+      el.style.height = Math.min(el.scrollHeight, 160) + "px";
+    }
+  }
+
+  function handleVoiceCancel() {
+    voice.cancel();
+    if (textareaRef.current) {
+      textareaRef.current.value = savedTextRef.current;
+    }
+  }
+
   function submit() {
     var el = textareaRef.current;
-    if (!el) {
-      return;
-    }
+    if (!el) return;
     var text = el.value.trim();
-    if (!text || props.disabled) {
-      return;
-    }
-    props.onSend(text);
+    if ((!text && attachmentsHook.attachments.length === 0) || props.disabled || attachmentsHook.hasUploading) return;
+    props.onSend(text, attachmentsHook.readyIds);
     el.value = "";
     el.style.height = "auto";
     setSlashQuery(null);
+    attachmentsHook.clearAll();
   }
 
   return (
-    <div className="relative">
+    <div
+      className="relative"
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
       {isOpen && (
-        <div
-          ref={popupRef}
-          role="listbox"
-          aria-label="Slash commands"
-          className="absolute left-0 right-0 bottom-[calc(100%+6px)] max-h-[320px] overflow-y-auto rounded-lg border border-base-content/10 bg-base-300 shadow-lg z-50"
-        >
-          {filtered.map(function (skill, i) {
-            return (
-              <button
-                key={skill.name}
-                data-active={i === selectedIndex}
-                onMouseDown={function (e) {
-                  e.preventDefault();
-                  selectSkill(skill.name);
-                }}
-                onMouseEnter={function () { setSelectedIndex(i); }}
-                className={
-                  "flex w-full items-center gap-3 px-3.5 py-2.5 text-left transition-colors " +
-                  (i === selectedIndex ? "bg-primary/10" : "hover:bg-base-content/5")
-                }
-              >
-                <span className="font-mono text-[12px] text-primary/90 whitespace-nowrap flex-shrink-0">
-                  /{skill.name}
-                </span>
-                <span className="text-[11px] text-base-content/40 truncate min-w-0">
-                  {skill.description}
-                </span>
-              </button>
-            );
-          })}
+        <div ref={popupRef}>
+          <CommandPalette
+            query={slashQuery!}
+            skills={skills}
+            selectedIndex={selectedIndex}
+            onSelect={selectItem}
+            onHover={setSelectedIndex}
+          />
         </div>
       )}
 
@@ -179,12 +291,32 @@ export function ChatInput(props: ChatInputProps) {
         </div>
       )}
 
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        className="hidden"
+        onChange={function (e) {
+          var files = e.target.files;
+          if (files) {
+            for (var i = 0; i < files.length; i++) {
+              if (attachmentsHook.canAttach) {
+                attachmentsHook.addFile(files[i]);
+              }
+            }
+          }
+          e.target.value = "";
+        }}
+      />
+
       <div
         className={
           "border rounded-xl bg-base-300/60 overflow-hidden transition-all duration-150 " +
-          (props.disabled
-            ? "border-base-content/10 opacity-60"
-            : "border-primary/20 focus-within:border-primary/40 focus-within:shadow-[0_0_0_3px_oklch(from_var(--color-primary)_l_c_h/0.1)]")
+          (isDragging
+            ? "border-primary/40 shadow-[0_0_0_3px_oklch(from_var(--color-primary)_l_c_h/0.1)]"
+            : props.disabled
+              ? "border-base-content/10 opacity-60"
+              : "border-primary/20 focus-within:border-primary/40 focus-within:shadow-[0_0_0_3px_oklch(from_var(--color-primary)_l_c_h/0.1)]")
         }
       >
         <div className="hidden sm:flex items-center gap-1.5 px-3 py-1.5 border-b border-base-content/8 font-mono text-[10px]">
@@ -192,24 +324,62 @@ export function ChatInput(props: ChatInputProps) {
           <span className="flex-1" />
           <span className="text-base-content/20">{modKey}+K commands</span>
         </div>
+
+        <AttachmentChips
+          attachments={attachmentsHook.attachments}
+          onRemove={attachmentsHook.removeAttachment}
+          onRetry={attachmentsHook.retryAttachment}
+        />
+
         <div className="flex items-center gap-2 px-3.5 py-2.5">
-          <div className="flex-1 min-w-0 relative">
-            <span className="absolute left-0 top-[1px] text-primary/50 font-mono text-[14px] leading-relaxed select-none pointer-events-none">›</span>
-            <textarea
-              ref={textareaRef}
-              aria-label="Message input"
-              placeholder={props.disabled ? "Claude is responding..." : "Message Claude..."}
-              disabled={props.disabled}
-              onKeyDown={handleKeyDown}
-              onInput={handleInput}
-              rows={1}
-              style={{ padding: "1px 0 0 16px", margin: 0, border: "none" }}
+          <div className="flex gap-1 flex-shrink-0">
+            <button
+              aria-label="Attach file"
+              disabled={!attachmentsHook.canAttach}
+              onClick={function () { fileInputRef.current?.click(); }}
               className={
-                "w-full resize-none bg-transparent text-base-content text-[14px] leading-relaxed max-h-[160px] overflow-y-auto outline-none placeholder:text-base-content/30 " +
-                (props.disabled ? "cursor-not-allowed" : "cursor-text")
+                "w-7 h-7 rounded-md flex items-center justify-center transition-colors " +
+                (attachmentsHook.canAttach
+                  ? "text-base-content/30 hover:text-base-content/50 border border-base-content/10 hover:border-base-content/20"
+                  : "text-base-content/15 cursor-not-allowed")
               }
+              title={attachmentsHook.canAttach ? "Attach file" : "Maximum attachments reached"}
+            >
+              <Paperclip size={13} />
+            </button>
+            <VoiceRecorder
+              isRecording={voice.isRecording}
+              isSupported={voice.isSupported}
+              isSpeaking={voice.isSpeaking}
+              elapsed={voice.elapsed}
+              interimTranscript={voice.interimTranscript}
+              onStart={handleVoiceStart}
+              onStop={handleVoiceStop}
+              onCancel={handleVoiceCancel}
             />
           </div>
+
+          {voice.isRecording ? null : (
+            <div className="flex-1 min-w-0 relative">
+              <span className="absolute left-0 top-[1px] text-primary/50 font-mono text-[14px] leading-relaxed select-none pointer-events-none">›</span>
+              <textarea
+                ref={textareaRef}
+                aria-label="Message input"
+                placeholder={props.disabled ? (props.disabledPlaceholder || "Claude is responding...") : "Message Claude..."}
+                disabled={props.disabled}
+                onKeyDown={handleKeyDown}
+                onInput={handleInput}
+                onPaste={handlePaste}
+                rows={1}
+                style={{ padding: "1px 0 0 16px", margin: 0, border: "none" }}
+                className={
+                  "w-full resize-none bg-transparent text-base-content text-[14px] leading-relaxed max-h-[160px] overflow-y-auto outline-none placeholder:text-base-content/30 " +
+                  (props.disabled ? "cursor-not-allowed" : "cursor-text")
+                }
+              />
+            </div>
+          )}
+
           <div className="flex items-center gap-1.5 flex-shrink-0">
             <button
               ref={settingsBtnRef}
@@ -222,11 +392,12 @@ export function ChatInput(props: ChatInputProps) {
             <span className="text-[10px] text-base-content/20 font-mono hidden sm:block">⏎ send</span>
             <button
               aria-label="Send message"
-              disabled={props.disabled}
+              disabled={props.disabled || attachmentsHook.hasUploading}
               onClick={submit}
+              title={attachmentsHook.hasUploading ? "Uploading..." : "Send message"}
               className={
                 "w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 transition-all duration-150 outline-none " +
-                (props.disabled
+                (props.disabled || attachmentsHook.hasUploading
                   ? "bg-base-content/5 text-base-content/20 cursor-not-allowed"
                   : "bg-primary text-primary-content hover:bg-primary/80 cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-base-300")
               }
@@ -236,6 +407,12 @@ export function ChatInput(props: ChatInputProps) {
           </div>
         </div>
       </div>
+
+      {isDragging && (
+        <div className="absolute inset-0 rounded-xl border-2 border-dashed border-primary/40 bg-primary/5 flex items-center justify-center z-40 pointer-events-none">
+          <span className="text-[13px] text-primary/60 font-mono">Drop files to attach</span>
+        </div>
+      )}
     </div>
   );
 }