@cryptiklemur/lattice 1.13.0 → 1.14.0

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

@@ -8,13 +8,12 @@ import {
   ResponsiveContainer,
   Legend,
 } from "recharts";
+import { getChartColors } from "../chartTokens";
 
 interface ProjectRadarProps {
   data: Array<{ project: string; cost: number; sessions: number; avgDuration: number; toolDiversity: number; tokensPerSession: number }>;
 }
 
-var PROJECT_COLORS = ["#a855f7", "#22c55e", "#f59e0b", "#ef4444", "oklch(55% 0.25 280)"];
-
 var AXIS_KEYS = ["cost", "sessions", "avgDuration", "toolDiversity", "tokensPerSession"] as const;
 var AXIS_LABELS: Record<string, string> = {
   cost: "Cost",
@@ -50,6 +49,7 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function ProjectRadar({ data }: ProjectRadarProps) {
+  var colors = getChartColors();
   if (!data || data.length === 0) {
     return (
       <div className="flex items-center justify-center h-[250px] text-base-content/25 font-mono text-[11px]">
@@ -87,10 +87,10 @@ export function ProjectRadar({ data }: ProjectRadarProps) {
   return (
     <ResponsiveContainer width="100%" height={280}>
       <RadarChart data={radarData} margin={{ top: 10, right: 30, bottom: 10, left: 30 }}>
-        <PolarGrid stroke="oklch(0.9 0.02 280 / 0.08)" />
+        <PolarGrid stroke={colors.gridStroke} />
         <PolarAngleAxis
           dataKey="axis"
-          tick={{ fontSize: 9, fontFamily: "var(--font-mono)", fill: "oklch(0.9 0.02 280 / 0.4)" }}
+          tick={{ fontSize: 9, fontFamily: "var(--font-mono)", fill: colors.tickFill }}
         />
         <PolarRadiusAxis
           angle={90}
@@ -104,8 +104,8 @@ export function ProjectRadar({ data }: ProjectRadarProps) {
               key={project.project}
               name={project.project}
               dataKey={project.project}
-              stroke={PROJECT_COLORS[index % PROJECT_COLORS.length]}
-              fill={PROJECT_COLORS[index % PROJECT_COLORS.length]}
+              stroke={colors.palette[index % colors.palette.length]}
+              fill={colors.palette[index % colors.palette.length]}
               fillOpacity={0.1}
               strokeWidth={1.5}
             />

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

@@ -8,21 +8,7 @@ import {
   ResponsiveContainer,
 } from "recharts";
 import { useChartFullscreen } from "../ChartCard";
-
-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 MODEL_COLORS: Record<string, string> = {
-  opus: "#a855f7",
-  sonnet: "oklch(55% 0.25 280)",
-  haiku: "#22c55e",
-  other: "#f59e0b",
-};
+import { getChartColors, getTickStyle, getModelColor } from "../chartTokens";
 
 interface ResponseTimeDatum {
   tokens: number;
@@ -51,12 +37,13 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 
 export function ResponseTimeScatter({ data }: ResponseTimeScatterProps) {
   var fullscreenHeight = useChartFullscreen();
+  var colors = getChartColors();
   var models = Array.from(new Set(data.map(function (d) { return d.model; })));
 
   var byModel = models.map(function (model) {
     return {
       model: model,
-      color: MODEL_COLORS[model] || "#f59e0b",
+      color: getModelColor(model),
       points: data
         .filter(function (d) { return d.model === model; })
         .map(function (d) { return { tokens: d.tokens, durationSec: d.duration / 1000, model: d.model }; }),
@@ -66,11 +53,11 @@ export function ResponseTimeScatter({ data }: ResponseTimeScatterProps) {
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
       <ScatterChart margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
-        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} />
+        <CartesianGrid strokeDasharray="3 3" stroke={colors.gridStroke} />
         <XAxis
           dataKey="tokens"
           type="number"
-          tick={TICK_STYLE}
+          tick={getTickStyle()}
           axisLine={false}
           tickLine={false}
           tickFormatter={function (v) { return v >= 1000 ? (v / 1000).toFixed(0) + "k" : String(v); }}
@@ -79,13 +66,13 @@ export function ResponseTimeScatter({ data }: ResponseTimeScatterProps) {
         <YAxis
           dataKey="durationSec"
           type="number"
-          tick={TICK_STYLE}
+          tick={getTickStyle()}
           axisLine={false}
           tickLine={false}
           tickFormatter={function (v) { return v.toFixed(0) + "s"; }}
           name="duration"
         />
-        <Tooltip content={<CustomTooltip />} cursor={{ strokeDasharray: "3 3", stroke: GRID_COLOR }} />
+        <Tooltip content={<CustomTooltip />} cursor={{ strokeDasharray: "3 3", stroke: colors.gridStroke }} />
         {byModel.map(function (group) {
           return (
             <Scatter

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

@@ -9,25 +9,7 @@ import {
   ZAxis,
 } from "recharts";
 import { useChartFullscreen } from "../ChartCard";
-
-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)",
-];
+import { getChartColors, getTickStyle } from "../chartTokens";
 
 interface SessionBubbleDatum {
   id: string;
@@ -64,11 +46,12 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 
 export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
   var fullscreenHeight = useChartFullscreen();
+  var colors = getChartColors();
   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];
+    return colors.palette[idx % colors.palette.length];
   }
 
   var byProject = projects.map(function (project) {
@@ -87,12 +70,12 @@ export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
       <ScatterChart margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
-        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} />
+        <CartesianGrid strokeDasharray="3 3" stroke={colors.gridStroke} />
         <XAxis
           dataKey="x"
           type="number"
           domain={[minTs, maxTs]}
-          tick={TICK_STYLE}
+          tick={getTickStyle()}
           axisLine={false}
           tickLine={false}
           tickFormatter={function (v) { return formatDate(v); }}
@@ -100,13 +83,13 @@ export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
         <YAxis
           dataKey="y"
           type="number"
-          tick={TICK_STYLE}
+          tick={getTickStyle()}
           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 }} />
+        <Tooltip content={<CustomTooltip />} cursor={{ strokeDasharray: "3 3", stroke: colors.gridStroke }} />
         {byProject.map(function (group) {
           return (
             <Scatter

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

@@ -1,14 +1,9 @@
+import { getScoreColor } from "../chartTokens";
+
 interface SessionComplexityListProps {
   data: Array<{ id: string; title: string; score: number; messages: number; tools: number; contextPercent: number }>;
 }
 
-function getScoreColor(score: number, maxScore: number): string {
-  var intensity = maxScore > 0 ? Math.min(score / maxScore, 1) : 0;
-  var lightness = 0.45 - intensity * 0.1;
-  var chroma = 0.1 + intensity * 0.18;
-  return "oklch(" + lightness + " " + chroma + " 280)";
-}
-
 export function SessionComplexityList({ data }: SessionComplexityListProps) {
   if (!data || data.length === 0) {
     return (

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

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { getChartColors } from "../chartTokens";
 
 interface TimelineDatum {
   id: string;
@@ -19,16 +20,6 @@ var ROW_STEP = ROW_HEIGHT + ROW_GAP;
 var LEFT_MARGIN = 8;
 var RIGHT_MARGIN = 8;
 
-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)",
-];
 
 function formatTime(ts: number): string {
   var d = new Date(ts);
@@ -37,6 +28,7 @@ function formatTime(ts: number): string {
 
 export function SessionTimeline({ data }: SessionTimelineProps) {
   var [hover, setHover] = useState<{ x: number; y: number; datum: TimelineDatum } | null>(null);
+  var colors = getChartColors();
 
   if (!data || data.length === 0) {
     return (
@@ -49,7 +41,7 @@ export function SessionTimeline({ data }: SessionTimelineProps) {
   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];
+    return colors.palette[idx % colors.palette.length];
   }
 
   var minTime = Infinity;

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

@@ -8,14 +8,7 @@ import {
   ResponsiveContainer,
 } from "recharts";
 import { useChartFullscreen } from "../ChartCard";
-
-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)";
+import { getChartColors, getTickStyle } from "../chartTokens";
 
 interface TokenFlowDatum {
   date: string;
@@ -54,30 +47,31 @@ function formatTokens(v: number): string {
 
 export function TokenFlowChart({ data }: TokenFlowChartProps) {
   var fullscreenHeight = useChartFullscreen();
+  var colors = getChartColors();
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
       <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
         <defs>
           <linearGradient id="inputGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.4} />
-            <stop offset="95%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.05} />
+            <stop offset="5%" stopColor={colors.primary} stopOpacity={0.4} />
+            <stop offset="95%" stopColor={colors.primary} stopOpacity={0.05} />
           </linearGradient>
           <linearGradient id="outputGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor="#22c55e" stopOpacity={0.4} />
-            <stop offset="95%" stopColor="#22c55e" stopOpacity={0.05} />
+            <stop offset="5%" stopColor={colors.success} stopOpacity={0.4} />
+            <stop offset="95%" stopColor={colors.success} stopOpacity={0.05} />
           </linearGradient>
           <linearGradient id="cacheReadGrad" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.4} />
-            <stop offset="95%" stopColor="#f59e0b" stopOpacity={0.05} />
+            <stop offset="5%" stopColor={colors.warning} stopOpacity={0.4} />
+            <stop offset="95%" stopColor={colors.warning} stopOpacity={0.05} />
           </linearGradient>
         </defs>
-        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} vertical={false} />
-        <XAxis dataKey="date" tick={TICK_STYLE} axisLine={false} tickLine={false} />
-        <YAxis tick={TICK_STYLE} axisLine={false} tickLine={false} tickFormatter={formatTokens} />
+        <CartesianGrid strokeDasharray="3 3" stroke={colors.gridStroke} vertical={false} />
+        <XAxis dataKey="date" tick={getTickStyle()} axisLine={false} tickLine={false} />
+        <YAxis tick={getTickStyle()} axisLine={false} tickLine={false} tickFormatter={formatTokens} />
         <Tooltip content={<CustomTooltip />} />
-        <Area type="monotone" dataKey="input" stackId="1" stroke="oklch(55% 0.25 280)" fill="url(#inputGrad)" strokeWidth={1.5} />
-        <Area type="monotone" dataKey="output" stackId="1" stroke="#22c55e" fill="url(#outputGrad)" strokeWidth={1.5} />
-        <Area type="monotone" dataKey="cacheRead" stackId="1" stroke="#f59e0b" fill="url(#cacheReadGrad)" strokeWidth={1.5} />
+        <Area type="monotone" dataKey="input" stackId="1" stroke={colors.primary} fill="url(#inputGrad)" strokeWidth={1.5} />
+        <Area type="monotone" dataKey="output" stackId="1" stroke={colors.success} fill="url(#outputGrad)" strokeWidth={1.5} />
+        <Area type="monotone" dataKey="cacheRead" stackId="1" stroke={colors.warning} fill="url(#cacheReadGrad)" strokeWidth={1.5} />
       </AreaChart>
     </ResponsiveContainer>
   );

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

@@ -1,16 +1,6 @@
 import { Sankey, Tooltip, ResponsiveContainer } from "recharts";
 import { useChartFullscreen } from "../ChartCard";
-
-var NODE_COLORS: Record<string, string> = {
-  "Input Tokens": "oklch(55% 0.25 280)",
-  "Cache Read": "#f59e0b",
-  "Cache Creation": "oklch(65% 0.2 240)",
-  "Opus": "#a855f7",
-  "Sonnet": "oklch(55% 0.25 280)",
-  "Haiku": "#22c55e",
-  "Other": "#f59e0b",
-  "Output Tokens": "#22c55e",
-};
+import { getChartColors } from "../chartTokens";
 
 interface SankeyData {
   nodes: Array<{ name: string }>;
@@ -44,7 +34,18 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 }
 
 function SankeyNode({ x, y, width, height, index, payload }: { x: number; y: number; width: number; height: number; index: number; payload: { name: string } }) {
-  var color = NODE_COLORS[payload.name] || "oklch(0.5 0.1 280)";
+  var colors = getChartColors();
+  var NODE_COLORS: Record<string, string> = {
+    "Input Tokens": colors.primary,
+    "Cache Read": colors.warning,
+    "Cache Creation": colors.accent,
+    "Opus": colors.secondary,
+    "Sonnet": colors.primary,
+    "Haiku": colors.success,
+    "Other": colors.warning,
+    "Output Tokens": colors.success,
+  };
+  var color = NODE_COLORS[payload.name] || colors.primary;
   return (
     <g>
       <rect x={x} y={y} width={width} height={height} fill={color} fillOpacity={0.85} rx={2} />
@@ -53,7 +54,7 @@ function SankeyNode({ x, y, width, height, index, payload }: { x: number; y: num
           x={x + width + 6}
           y={y + height / 2}
           dy={4}
-          fill="oklch(0.9 0.02 280 / 0.5)"
+          fill={colors.tickFill}
           fontSize={9}
           fontFamily="var(--font-mono)"
         >
@@ -66,6 +67,7 @@ function SankeyNode({ x, y, width, height, index, payload }: { x: number; y: num
 
 export function TokenSankeyChart({ data }: TokenSankeyChartProps) {
   var fullscreenHeight = useChartFullscreen();
+  var colors = getChartColors();
   if (!data.links || data.links.length === 0) {
     return (
       <div className="flex items-center justify-center h-[250px] text-base-content/30 font-mono text-[12px]">
@@ -79,7 +81,7 @@ export function TokenSankeyChart({ data }: TokenSankeyChartProps) {
       <Sankey
         data={data}
         node={<SankeyNode x={0} y={0} width={0} height={0} index={0} payload={{ name: "" }} />}
-        link={{ stroke: "oklch(0.9 0.02 280 / 0.1)" }}
+        link={{ stroke: colors.gridStroke }}
         margin={{ top: 10, right: 100, left: 10, bottom: 10 }}
         nodeWidth={12}
         nodePadding={14}

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

@@ -1,19 +1,13 @@
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
+import { getChartColors } from "../chartTokens";
 
 interface ToolSunburstProps {
   data: Array<{ name: string; category: string; count: number }>;
 }
 
-var CATEGORY_COLORS: Record<string, string> = {
-  Read: "#22c55e",
-  Write: "#f59e0b",
-  Execute: "#ef4444",
-  AI: "#a855f7",
-  Other: "oklch(55% 0.15 280)",
-};
-
 function getCategoryColor(category: string): string {
-  return CATEGORY_COLORS[category] || CATEGORY_COLORS.Other;
+  var colors = getChartColors();
+  return colors.category[category] || colors.category.Other;
 }
 
 function getToolColor(category: string, index: number): string {

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

@@ -1,5 +1,6 @@
 import { Treemap, ResponsiveContainer, Tooltip } from "recharts";
 import { useChartFullscreen } from "../ChartCard";
+import { getChartColors, getIntensityColor } from "../chartTokens";
 
 interface ToolTreemapProps {
   data: Array<{ name: string; count: number; avgCost: number }>;
@@ -9,9 +10,7 @@ var MAX_COST_INTENSITY = 0.5;
 
 function getColor(avgCost: number, maxCost: number): string {
   var intensity = maxCost > 0 ? Math.min(avgCost / maxCost, 1) : 0.3;
-  var lightness = 0.45 - intensity * 0.15;
-  var chroma = 0.15 + intensity * 0.12;
-  return "oklch(" + lightness + " " + chroma + " 280)";
+  return getIntensityColor(intensity);
 }
 
 function CustomContent(props: {
@@ -21,6 +20,7 @@ function CustomContent(props: {
 }) {
   var { x = 0, y = 0, width = 0, height = 0, name = "", count = 0, avgCost = 0, maxCost = MAX_COST_INTENSITY } = props;
   if (width < 4 || height < 4) return null;
+  var colors = getChartColors();
   var showLabel = width > 40 && height > 20;
   var showCount = width > 50 && height > 34;
   return (
@@ -33,7 +33,7 @@ function CustomContent(props: {
         rx={3}
         fill={getColor(avgCost, maxCost)}
         fillOpacity={0.85}
-        stroke="oklch(0.2 0.02 280)"
+        stroke={colors.gridStroke}
         strokeWidth={1}
       />
       {showLabel && (
@@ -42,7 +42,7 @@ function CustomContent(props: {
           y={y + height / 2 + (showCount ? -5 : 0)}
           textAnchor="middle"
           dominantBaseline="middle"
-          style={{ fontSize: 10, fontFamily: "var(--font-mono)", fill: "oklch(0.95 0.02 280 / 0.9)" }}
+          style={{ fontSize: 10, fontFamily: "var(--font-mono)", fill: colors.tickFill }}
         >
           {name}
         </text>
@@ -53,7 +53,7 @@ function CustomContent(props: {
           y={y + height / 2 + 9}
           textAnchor="middle"
           dominantBaseline="middle"
-          style={{ fontSize: 9, fontFamily: "var(--font-mono)", fill: "oklch(0.95 0.02 280 / 0.5)" }}
+          style={{ fontSize: 9, fontFamily: "var(--font-mono)", fill: colors.tickFill }}
         >
           {count}
         </text>

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

@@ -1,4 +1,5 @@
 import { useRef, useState, useEffect, useMemo } from "react";
+import { useStore } from "@tanstack/react-store";
 import { SendHorizontal, Settings, Paperclip } from "lucide-react";
 import { useSkills } from "../../hooks/useSkills";
 import { CommandPalette, getFilteredItems } from "./CommandPalette";
@@ -17,6 +18,7 @@ interface ChatInputProps {
   onFailedInputConsumed?: () => void;
   prefillText?: string | null;
   onPrefillConsumed?: () => void;
+  sessionId?: string | null;
 }
 
 function getModKey(): string {
@@ -26,9 +28,37 @@ function getModKey(): string {
   return "Ctrl";
 }
 
-var inputHistory: string[] = [];
+var historyBySession = new Map<string, string[]>();
 var MAX_HISTORY = 100;
 
+function extractTypedInput(text: string): string | null {
+  var firstNewline = text.search(/\r?\n/);
+  var firstLine = firstNewline !== -1 ? text.slice(0, firstNewline).trim() : text;
+  if (firstLine.indexOf(":") !== -1 && /\n---[\r\n]/.test(text)) {
+    return "/" + firstLine;
+  }
+  if (text.startsWith("<skill-name>")) {
+    var endTag = text.indexOf("</skill-name>");
+    if (endTag !== -1) {
+      return "/" + text.slice(12, endTag);
+    }
+    return null;
+  }
+  if (text.startsWith("<skill-content>")) return null;
+  if (text.length > 500) return null;
+  return text;
+}
+
+function getHistory(sessionId: string | null | undefined): string[] {
+  if (!sessionId) return [];
+  var hist = historyBySession.get(sessionId);
+  if (!hist) {
+    hist = [];
+    historyBySession.set(sessionId, hist);
+  }
+  return hist;
+}
+
 export function ChatInput(props: ChatInputProps) {
   var textareaRef = useRef<HTMLTextAreaElement>(null);
   var popupRef = useRef<HTMLDivElement>(null);
@@ -41,26 +71,29 @@ export function ChatInput(props: ChatInputProps) {
   var modKey = useMemo(getModKey, []);
   var [historyIndex, setHistoryIndex] = useState(-1);
   var savedCurrentRef = useRef("");
+  var inputHistory = getHistory(props.sessionId);
+  var historyLoading = useStore(getSessionStore(), function (s) { return s.historyLoading; });
+  var messages = useStore(getSessionStore(), function (s) { return s.messages; });
+
+  useEffect(function () {
+    setHistoryIndex(-1);
+    savedCurrentRef.current = "";
+  }, [props.sessionId]);
 
   useEffect(function () {
-    var store = getSessionStore();
-    var messages = store.state.messages;
-    var seen = new Set<string>();
+    if (!props.sessionId || historyLoading) return;
     for (var i = 0; i < messages.length; i++) {
       if (messages[i].type === "user" && messages[i].text) {
-        var text = messages[i].text!.trim();
-        if (text && !seen.has(text)) {
-          seen.add(text);
-          if (inputHistory.indexOf(text) === -1) {
-            inputHistory.push(text);
-          }
+        var typed = extractTypedInput(messages[i].text!.trim());
+        if (typed && inputHistory.indexOf(typed) === -1) {
+          inputHistory.push(typed);
         }
       }
     }
     if (inputHistory.length > MAX_HISTORY) {
       inputHistory.splice(0, inputHistory.length - MAX_HISTORY);
     }
-  }, []);
+  }, [props.sessionId, historyLoading]);
 
   var attachmentsHook = useAttachments();
   var voice = useVoiceRecorder();