@assistkick/create 1.10.0 → 1.12.0

package/templates/assistkick-product-system/packages/frontend/src/lib/chat_message_helpers.test.ts

@@ -0,0 +1,305 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  buildToolResultMap,
+  extractMessageText,
+  countToolUses,
+  countToolErrors,
+  isEmptyMessage,
+  buildStreamOptions,
+  prepareMergedQueueText,
+  markOrCreateStreamingAssistant,
+} from './chat_message_helpers.ts';
+import type { ChatMessage, ContentBlock } from '../hooks/use_chat_stream.ts';
+import type { QueuedMessage } from './message_queue.ts';
+
+describe('buildToolResultMap', () => {
+  it('builds empty map from empty blocks', () => {
+    const map = buildToolResultMap([]);
+    assert.equal(map.size, 0);
+  });
+
+  it('builds map from tool_result blocks', () => {
+    const blocks: ContentBlock[] = [
+      { type: 'text', text: 'hello' },
+      { type: 'tool_result', toolUseId: 'tu_1', content: 'result1', isError: false },
+      { type: 'tool_use', id: 'tu_1', name: 'Read', input: {} },
+      { type: 'tool_result', toolUseId: 'tu_2', content: 'result2', isError: true },
+    ];
+    const map = buildToolResultMap(blocks);
+    assert.equal(map.size, 2);
+    assert.equal(map.get('tu_1')?.content, 'result1');
+    assert.equal(map.get('tu_2')?.isError, true);
+  });
+
+  it('ignores non-tool-result blocks', () => {
+    const blocks: ContentBlock[] = [
+      { type: 'text', text: 'hello' },
+      { type: 'tool_use', id: 'tu_1', name: 'Read', input: {} },
+    ];
+    const map = buildToolResultMap(blocks);
+    assert.equal(map.size, 0);
+  });
+});
+
+describe('extractMessageText', () => {
+  it('extracts text from user message', () => {
+    const msg: ChatMessage = {
+      id: 'msg_1',
+      role: 'user',
+      content: [{ type: 'text', text: 'Hello Claude' }],
+      isStreaming: false,
+    };
+    assert.equal(extractMessageText(msg), 'Hello Claude');
+  });
+
+  it('concatenates multiple text blocks', () => {
+    const msg: ChatMessage = {
+      id: 'msg_2',
+      role: 'assistant',
+      content: [
+        { type: 'text', text: 'First part' },
+        { type: 'tool_use', id: 'tu_1', name: 'Read', input: {} },
+        { type: 'text', text: 'Second part' },
+      ],
+      isStreaming: false,
+    };
+    assert.equal(extractMessageText(msg), 'First part\nSecond part');
+  });
+
+  it('returns empty string for messages with no text blocks', () => {
+    const msg: ChatMessage = {
+      id: 'msg_3',
+      role: 'assistant',
+      content: [
+        { type: 'tool_use', id: 'tu_1', name: 'Bash', input: { command: 'ls' } },
+      ],
+      isStreaming: false,
+    };
+    assert.equal(extractMessageText(msg), '');
+  });
+});
+
+describe('countToolUses', () => {
+  it('returns 0 for messages with no tool uses', () => {
+    const msg: ChatMessage = {
+      id: 'msg_1',
+      role: 'assistant',
+      content: [{ type: 'text', text: 'hello' }],
+      isStreaming: false,
+    };
+    assert.equal(countToolUses(msg), 0);
+  });
+
+  it('counts tool use blocks', () => {
+    const msg: ChatMessage = {
+      id: 'msg_2',
+      role: 'assistant',
+      content: [
+        { type: 'text', text: 'hello' },
+        { type: 'tool_use', id: 'tu_1', name: 'Read', input: {} },
+        { type: 'tool_use', id: 'tu_2', name: 'Write', input: {} },
+        { type: 'tool_result', toolUseId: 'tu_1', content: 'ok', isError: false },
+      ],
+      isStreaming: false,
+    };
+    assert.equal(countToolUses(msg), 2);
+  });
+});
+
+describe('countToolErrors', () => {
+  it('returns 0 when no errors', () => {
+    const msg: ChatMessage = {
+      id: 'msg_1',
+      role: 'assistant',
+      content: [
+        { type: 'tool_result', toolUseId: 'tu_1', content: 'ok', isError: false },
+      ],
+      isStreaming: false,
+    };
+    assert.equal(countToolErrors(msg), 0);
+  });
+
+  it('counts error results', () => {
+    const msg: ChatMessage = {
+      id: 'msg_2',
+      role: 'assistant',
+      content: [
+        { type: 'tool_result', toolUseId: 'tu_1', content: 'ok', isError: false },
+        { type: 'tool_result', toolUseId: 'tu_2', content: 'fail', isError: true },
+        { type: 'tool_result', toolUseId: 'tu_3', content: 'also fail', isError: true },
+      ],
+      isStreaming: false,
+    };
+    assert.equal(countToolErrors(msg), 2);
+  });
+});
+
+describe('isEmptyMessage', () => {
+  it('returns true for empty content', () => {
+    const msg: ChatMessage = { id: 'msg_1', role: 'assistant', content: [], isStreaming: true };
+    assert.equal(isEmptyMessage(msg), true);
+  });
+
+  it('returns false for non-empty content', () => {
+    const msg: ChatMessage = {
+      id: 'msg_2',
+      role: 'assistant',
+      content: [{ type: 'text', text: 'hello' }],
+      isStreaming: false,
+    };
+    assert.equal(isEmptyMessage(msg), false);
+  });
+});
+
+describe('buildStreamOptions', () => {
+  it('builds options with skip mode', () => {
+    const opts = buildStreamOptions({
+      projectId: 'proj_1',
+      claudeSessionId: 'sess_1',
+      isNewSession: true,
+      permissionMode: 'skip',
+      allowedTools: ['Read'],
+      attachmentPaths: [],
+    });
+    assert.equal(opts.projectId, 'proj_1');
+    assert.equal(opts.claudeSessionId, 'sess_1');
+    assert.equal(opts.isNewSession, true);
+    assert.equal(opts.permissionMode, 'skip');
+    assert.equal(opts.allowedTools, undefined);
+    assert.equal(opts.attachments, undefined);
+  });
+
+  it('includes allowedTools only in allowed_tools mode', () => {
+    const opts = buildStreamOptions({
+      projectId: 'proj_1',
+      claudeSessionId: 'sess_1',
+      isNewSession: false,
+      permissionMode: 'allowed_tools',
+      allowedTools: ['Read', 'Grep'],
+      attachmentPaths: [],
+    });
+    assert.deepEqual(opts.allowedTools, ['Read', 'Grep']);
+  });
+
+  it('includes attachments when paths provided', () => {
+    const opts = buildStreamOptions({
+      projectId: 'proj_1',
+      claudeSessionId: 'sess_1',
+      isNewSession: false,
+      permissionMode: 'skip',
+      allowedTools: [],
+      attachmentPaths: ['uploads/file.txt', 'uploads/img.png'],
+    });
+    assert.deepEqual(opts.attachments, ['uploads/file.txt', 'uploads/img.png']);
+  });
+
+  it('omits attachments when paths empty', () => {
+    const opts = buildStreamOptions({
+      projectId: 'proj_1',
+      claudeSessionId: 'sess_1',
+      isNewSession: false,
+      permissionMode: 'prompt',
+      allowedTools: [],
+      attachmentPaths: [],
+    });
+    assert.equal(opts.attachments, undefined);
+  });
+});
+
+describe('prepareMergedQueueText', () => {
+  it('returns empty string for empty queue', () => {
+    assert.equal(prepareMergedQueueText([]), '');
+  });
+
+  it('returns single message text', () => {
+    const messages: QueuedMessage[] = [
+      { id: 'q_1', text: 'hello', createdAt: 1000 },
+    ];
+    assert.equal(prepareMergedQueueText(messages), 'hello');
+  });
+
+  it('joins multiple messages with double newline', () => {
+    const messages: QueuedMessage[] = [
+      { id: 'q_1', text: 'first message', createdAt: 1000 },
+      { id: 'q_2', text: 'second message', createdAt: 2000 },
+      { id: 'q_3', text: 'third message', createdAt: 3000 },
+    ];
+    assert.equal(
+      prepareMergedQueueText(messages),
+      'first message\n\nsecond message\n\nthird message',
+    );
+  });
+});
+
+describe('markOrCreateStreamingAssistant', () => {
+  it('marks existing assistant message as streaming', () => {
+    const messages: ChatMessage[] = [
+      { id: 'msg_1', role: 'user', content: [{ type: 'text', text: 'hi' }], isStreaming: false },
+      { id: 'msg_2', role: 'assistant', content: [{ type: 'text', text: 'hello' }], isStreaming: false },
+    ];
+    const result = markOrCreateStreamingAssistant(messages, 'msg_new');
+    assert.equal(result.length, 2);
+    assert.equal(result[1].isStreaming, true);
+    assert.equal(result[1].id, 'msg_2');
+    assert.equal(result[1].content.length, 1);
+  });
+
+  it('marks the LAST assistant message as streaming when multiple exist', () => {
+    const messages: ChatMessage[] = [
+      { id: 'msg_1', role: 'user', content: [{ type: 'text', text: 'hi' }], isStreaming: false },
+      { id: 'msg_2', role: 'assistant', content: [{ type: 'text', text: 'first' }], isStreaming: false },
+      { id: 'msg_3', role: 'user', content: [{ type: 'text', text: 'follow up' }], isStreaming: false },
+      { id: 'msg_4', role: 'assistant', content: [{ type: 'text', text: 'second' }], isStreaming: false },
+    ];
+    const result = markOrCreateStreamingAssistant(messages, 'msg_new');
+    assert.equal(result.length, 4);
+    assert.equal(result[1].isStreaming, false);
+    assert.equal(result[3].isStreaming, true);
+    assert.equal(result[3].id, 'msg_4');
+  });
+
+  it('creates new empty assistant message when none exists', () => {
+    const messages: ChatMessage[] = [
+      { id: 'msg_1', role: 'user', content: [{ type: 'text', text: 'hi' }], isStreaming: false },
+    ];
+    const result = markOrCreateStreamingAssistant(messages, 'msg_new');
+    assert.equal(result.length, 2);
+    assert.equal(result[1].id, 'msg_new');
+    assert.equal(result[1].role, 'assistant');
+    assert.deepEqual(result[1].content, []);
+    assert.equal(result[1].isStreaming, true);
+  });
+
+  it('creates new assistant message when messages array is empty', () => {
+    const result = markOrCreateStreamingAssistant([], 'msg_new');
+    assert.equal(result.length, 1);
+    assert.equal(result[0].role, 'assistant');
+    assert.equal(result[0].isStreaming, true);
+    assert.deepEqual(result[0].content, []);
+  });
+
+  it('does not mutate the original array', () => {
+    const original: ChatMessage[] = [
+      { id: 'msg_1', role: 'assistant', content: [{ type: 'text', text: 'hello' }], isStreaming: false },
+    ];
+    const result = markOrCreateStreamingAssistant(original, 'msg_new');
+    assert.equal(original[0].isStreaming, false);
+    assert.equal(result[0].isStreaming, true);
+    assert.notEqual(original, result);
+  });
+
+  it('preserves content when marking existing assistant as streaming', () => {
+    const content: ContentBlock[] = [
+      { type: 'text', text: 'some response' },
+      { type: 'tool_use', id: 'tu_1', name: 'Read', input: { path: '/file.ts' } },
+    ];
+    const messages: ChatMessage[] = [
+      { id: 'msg_1', role: 'user', content: [{ type: 'text', text: 'hi' }], isStreaming: false },
+      { id: 'msg_2', role: 'assistant', content, isStreaming: false },
+    ];
+    const result = markOrCreateStreamingAssistant(messages, 'msg_new');
+    assert.equal(result[1].content.length, 2);
+    assert.deepEqual(result[1].content, content);
+  });
+});

package/templates/assistkick-product-system/packages/frontend/src/lib/chat_message_helpers.ts

@@ -0,0 +1,113 @@
+/**
+ * chat_message_helpers — pure utility functions for Chat v2 message processing.
+ *
+ * Extracts testable logic from the ChatView and related components.
+ * Includes stream options building, message filtering, and text extraction.
+ */
+
+import type { ChatMessage, ContentBlock, TextBlock, ToolResultBlock } from '../hooks/use_chat_stream';
+import type { QueuedMessage } from './message_queue';
+
+/**
+ * Build a lookup map from toolUseId → ToolResultBlock for matching
+ * tool results to their corresponding tool_use blocks.
+ */
+export const buildToolResultMap = (blocks: ContentBlock[]): Map<string, ToolResultBlock> => {
+  const map = new Map<string, ToolResultBlock>();
+  for (const block of blocks) {
+    if (block.type === 'tool_result') {
+      map.set(block.toolUseId, block);
+    }
+  }
+  return map;
+};
+
+/**
+ * Extract plain text from a ChatMessage's content blocks.
+ * Returns the concatenated text of all TextBlock entries.
+ */
+export const extractMessageText = (message: ChatMessage): string => {
+  return message.content
+    .filter((b): b is TextBlock => b.type === 'text')
+    .map((b) => b.text)
+    .join('\n');
+};
+
+/**
+ * Count tool use blocks in a message's content.
+ */
+export const countToolUses = (message: ChatMessage): number => {
+  return message.content.filter((b) => b.type === 'tool_use').length;
+};
+
+/**
+ * Count tool result blocks that are errors.
+ */
+export const countToolErrors = (message: ChatMessage): number => {
+  return message.content.filter(
+    (b) => b.type === 'tool_result' && b.isError,
+  ).length;
+};
+
+/**
+ * Determine if a message has any content to display.
+ * Empty streaming assistant messages show a "Thinking…" indicator.
+ */
+export const isEmptyMessage = (message: ChatMessage): boolean => {
+  return message.content.length === 0;
+};
+
+/**
+ * Build the stream options object for sending a message.
+ */
+export const buildStreamOptions = (opts: {
+  projectId: string;
+  claudeSessionId: string;
+  isNewSession: boolean;
+  permissionMode: 'skip' | 'allowed_tools' | 'prompt';
+  allowedTools: string[];
+  attachmentPaths: string[];
+}): {
+  projectId: string;
+  claudeSessionId: string;
+  isNewSession: boolean;
+  permissionMode: 'skip' | 'allowed_tools' | 'prompt';
+  allowedTools?: string[];
+  attachments?: string[];
+} => {
+  return {
+    projectId: opts.projectId,
+    claudeSessionId: opts.claudeSessionId,
+    isNewSession: opts.isNewSession,
+    permissionMode: opts.permissionMode,
+    allowedTools: opts.permissionMode === 'allowed_tools' ? opts.allowedTools : undefined,
+    attachments: opts.attachmentPaths.length > 0 ? opts.attachmentPaths : undefined,
+  };
+};
+
+/**
+ * Prepare merged text from queued messages for sending as a single CLI prompt.
+ */
+export const prepareMergedQueueText = (messages: QueuedMessage[]): string => {
+  return messages.map((m) => m.text).join('\n\n');
+};
+
+/**
+ * Mark the last assistant message as streaming, or create a new empty one if none exists.
+ * Used by the stream_resumed handler when re-attaching to an in-flight stream.
+ * Returns a new array (does not mutate the input).
+ */
+export const markOrCreateStreamingAssistant = (
+  messages: ChatMessage[],
+  nextId: string,
+): ChatMessage[] => {
+  const updated = [...messages];
+  for (let i = updated.length - 1; i >= 0; i--) {
+    if (updated[i].role === 'assistant') {
+      updated[i] = { ...updated[i], isStreaming: true };
+      return updated;
+    }
+  }
+  updated.push({ id: nextId, role: 'assistant', content: [], isStreaming: true });
+  return updated;
+};

package/templates/assistkick-product-system/packages/frontend/src/lib/context_usage_helpers.test.ts

@@ -0,0 +1,157 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { extractContextUsage, formatTokenCount, buildContextSegments } from './context_usage_helpers.ts';
+
+describe('extractContextUsage', () => {
+  it('extracts all token fields from a full usage object', () => {
+    const usage = {
+      input_tokens: 2000,
+      output_tokens: 3000,
+      cache_creation_input_tokens: 5000,
+      cache_read_input_tokens: 40000,
+    };
+    const result = extractContextUsage(usage);
+    assert.equal(result.inputTokens, 2000);
+    assert.equal(result.outputTokens, 3000);
+    assert.equal(result.cacheCreationTokens, 5000);
+    assert.equal(result.cacheReadTokens, 40000);
+    // totalTokens = input context only (no output)
+    assert.equal(result.totalTokens, 47000);
+    assert.equal(result.contextWindow, null);
+  });
+
+  it('defaults cache fields to 0 when absent', () => {
+    const usage = {
+      input_tokens: 1000,
+      output_tokens: 500,
+    };
+    const result = extractContextUsage(usage);
+    assert.equal(result.cacheCreationTokens, 0);
+    assert.equal(result.cacheReadTokens, 0);
+    // totalTokens = input only, output excluded
+    assert.equal(result.totalTokens, 1000);
+  });
+
+  it('defaults all fields to 0 for empty usage object', () => {
+    const result = extractContextUsage({});
+    assert.equal(result.inputTokens, 0);
+    assert.equal(result.outputTokens, 0);
+    assert.equal(result.cacheCreationTokens, 0);
+    assert.equal(result.cacheReadTokens, 0);
+    assert.equal(result.totalTokens, 0);
+  });
+
+  it('ignores non-number token values', () => {
+    const usage = {
+      input_tokens: 'not a number',
+      output_tokens: null,
+      cache_creation_input_tokens: undefined,
+      cache_read_input_tokens: true,
+    };
+    const result = extractContextUsage(usage as Record<string, unknown>);
+    assert.equal(result.totalTokens, 0);
+  });
+
+  it('computes correct total with only cache tokens (no raw input)', () => {
+    const usage = {
+      input_tokens: 0,
+      output_tokens: 1000,
+      cache_creation_input_tokens: 0,
+      cache_read_input_tokens: 45000,
+    };
+    const result = extractContextUsage(usage);
+    // totalTokens = input context only (cache_read), output excluded
+    assert.equal(result.totalTokens, 45000);
+  });
+});
+
+describe('formatTokenCount', () => {
+  it('formats small numbers as-is', () => {
+    assert.equal(formatTokenCount(0), '0');
+    assert.equal(formatTokenCount(500), '500');
+    assert.equal(formatTokenCount(999), '999');
+  });
+
+  it('formats thousands with k suffix', () => {
+    assert.equal(formatTokenCount(1000), '1k');
+    assert.equal(formatTokenCount(1500), '2k');
+    assert.equal(formatTokenCount(45000), '45k');
+    assert.equal(formatTokenCount(200000), '200k');
+  });
+
+  it('formats millions with M suffix', () => {
+    assert.equal(formatTokenCount(1000000), '1.0M');
+    assert.equal(formatTokenCount(1500000), '1.5M');
+    assert.equal(formatTokenCount(2000000), '2.0M');
+  });
+});
+
+describe('buildContextSegments', () => {
+  it('builds segments for typical usage with all categories', () => {
+    const segments = buildContextSegments({
+      inputTokens: 100,
+      outputTokens: 500,
+      cacheCreationTokens: 10000,
+      cacheReadTokens: 40000,
+      totalTokens: 50100,
+      contextWindow: 200000,
+    });
+
+    // Should have: cached context, new cached, uncached input, free
+    assert.equal(segments.length, 4);
+    assert.equal(segments[0].label, 'Cached context');
+    assert.equal(segments[0].tokens, 40000);
+    assert.equal(segments[1].label, 'New cached');
+    assert.equal(segments[1].tokens, 10000);
+    assert.equal(segments[2].label, 'Uncached input');
+    assert.equal(segments[2].tokens, 100);
+    assert.equal(segments[3].label, 'Free');
+    assert.equal(segments[3].tokens, 149900);
+  });
+
+  it('defaults contextWindow to 200k when null', () => {
+    const segments = buildContextSegments({
+      inputTokens: 0,
+      outputTokens: 0,
+      cacheCreationTokens: 0,
+      cacheReadTokens: 100000,
+      totalTokens: 100000,
+      contextWindow: null,
+    });
+
+    const free = segments.find(s => s.label === 'Free');
+    assert.ok(free);
+    assert.equal(free.tokens, 100000); // 200k - 100k
+  });
+
+  it('omits zero-token segments', () => {
+    const segments = buildContextSegments({
+      inputTokens: 0,
+      outputTokens: 0,
+      cacheCreationTokens: 0,
+      cacheReadTokens: 50000,
+      totalTokens: 50000,
+      contextWindow: 200000,
+    });
+
+    const labels = segments.map(s => s.label);
+    assert.ok(labels.includes('Cached context'));
+    assert.ok(labels.includes('Free'));
+    assert.ok(!labels.includes('New cached'));
+    assert.ok(!labels.includes('Uncached input'));
+  });
+
+  it('shows no free space when context is full', () => {
+    const segments = buildContextSegments({
+      inputTokens: 0,
+      outputTokens: 100,
+      cacheCreationTokens: 0,
+      cacheReadTokens: 200000,
+      totalTokens: 200000,
+      contextWindow: 200000,
+    });
+
+    const free = segments.find(s => s.label === 'Free');
+    assert.equal(free, undefined);
+  });
+});

package/templates/assistkick-product-system/packages/frontend/src/lib/context_usage_helpers.ts

@@ -0,0 +1,95 @@
+import type { ContextUsage } from '../hooks/use_chat_stream';
+
+/**
+ * Extract context usage from a stream event's usage object.
+ * Includes cache_creation_input_tokens and cache_read_input_tokens
+ * to accurately reflect total context window usage when prompt caching is active.
+ */
+export const extractContextUsage = (usage: Record<string, unknown>): ContextUsage => {
+  const input = typeof usage.input_tokens === 'number' ? usage.input_tokens : 0;
+  const output = typeof usage.output_tokens === 'number' ? usage.output_tokens : 0;
+  const cacheCreation = typeof usage.cache_creation_input_tokens === 'number' ? usage.cache_creation_input_tokens : 0;
+  const cacheRead = typeof usage.cache_read_input_tokens === 'number' ? usage.cache_read_input_tokens : 0;
+  return {
+    inputTokens: input,
+    outputTokens: output,
+    cacheCreationTokens: cacheCreation,
+    cacheReadTokens: cacheRead,
+    // totalTokens = input context only (output doesn't count toward context window)
+    totalTokens: input + cacheCreation + cacheRead,
+    contextWindow: null,
+  };
+};
+
+/**
+ * Format a token count as a compact string (e.g. 45000 → "45k").
+ */
+export const formatTokenCount = (tokens: number): string => {
+  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`;
+  if (tokens >= 1_000) return `${Math.round(tokens / 1_000)}k`;
+  return String(tokens);
+};
+
+/** Segment for the color-coded context usage bar. */
+export interface ContextSegment {
+  label: string;
+  tokens: number;
+  percent: number;
+  color: string;
+}
+
+/**
+ * Build color-coded segments for the context usage bar.
+ * Shows input context categories as portions of the context window:
+ * - Cached context (cache read — system prompt, tools, skills, prior messages)
+ * - New cached (cache creation — newly cached content this turn)
+ * - Uncached input (fresh input tokens, typically the latest user message)
+ * - Free space (remaining context window)
+ *
+ * Output tokens are NOT included — they don't consume context window space.
+ */
+export const buildContextSegments = (usage: ContextUsage): ContextSegment[] => {
+  const contextWindow = usage.contextWindow ?? 200_000;
+  const inputTotal = usage.inputTokens + usage.cacheCreationTokens + usage.cacheReadTokens;
+  const free = Math.max(0, contextWindow - inputTotal);
+
+  const segments: ContextSegment[] = [];
+
+  if (usage.cacheReadTokens > 0) {
+    segments.push({
+      label: 'Cached context',
+      tokens: usage.cacheReadTokens,
+      percent: (usage.cacheReadTokens / contextWindow) * 100,
+      color: '#6366f1', // indigo
+    });
+  }
+
+  if (usage.cacheCreationTokens > 0) {
+    segments.push({
+      label: 'New cached',
+      tokens: usage.cacheCreationTokens,
+      percent: (usage.cacheCreationTokens / contextWindow) * 100,
+      color: '#8b5cf6', // violet
+    });
+  }
+
+  if (usage.inputTokens > 0) {
+    segments.push({
+      label: 'Uncached input',
+      tokens: usage.inputTokens,
+      percent: (usage.inputTokens / contextWindow) * 100,
+      color: '#06b6d4', // cyan
+    });
+  }
+
+  if (free > 0) {
+    segments.push({
+      label: 'Free',
+      tokens: free,
+      percent: (free / contextWindow) * 100,
+      color: 'transparent',
+    });
+  }
+
+  return segments;
+};