askimo 1.1.0 → 1.3.0

package/README.md

@@ -7,7 +7,7 @@
 
 A CLI tool for communicating with AI providers.
 
-**Supported providers:** Perplexity · OpenAI · Anthropic
+**Supported providers:** Perplexity · OpenAI · Anthropic · xAI (Grok)
 
 ---
 
@@ -26,12 +26,14 @@ Create a config file at `~/.askimo/config`:
 PERPLEXITY_API_KEY=your-perplexity-key
 OPENAI_API_KEY=your-openai-key
 ANTHROPIC_API_KEY=your-anthropic-key
+XAI_API_KEY=your-xai-key
 
 # Optional settings
 DEFAULT_PROVIDER=perplexity
 PERPLEXITY_MODEL=sonar
 OPENAI_MODEL=gpt-4o
 ANTHROPIC_MODEL=claude-sonnet-4-20250514
+XAI_MODEL=grok-4
 ```
 
 ---
@@ -46,15 +48,17 @@ askimo "What is the capital of France?"
 
 ### Choose a provider
 
-| Flag | Provider |
-|------|----------|
+| Flag | Provider             |
+|------|----------------------|
 | `-p` | Perplexity (default) |
-| `-o` | OpenAI |
-| `-a` | Anthropic |
+| `-o` | OpenAI               |
+| `-a` | Anthropic            |
+| `-x` | xAI (Grok)           |
 
 ```bash
 askimo "explain quantum computing" -o    # Use OpenAI
 askimo "write a haiku" -a                # Use Anthropic
+askimo "what's happening today?" -x      # Use xAI Grok
 ```
 
 ### Continue a conversation
@@ -62,6 +66,7 @@ askimo "write a haiku" -a                # Use Anthropic
 ```bash
 askimo "tell me more" -c 1     # Continue last conversation
 askimo "go deeper" -c 2        # Continue second-to-last
+askimo "explain more" --cid abc123  # Continue by conversation ID
 ```
 
 ### JSON output
@@ -89,7 +94,9 @@ askimo -f error.log "find the bug"
 ```bash
 askimo chat                # Start new chat
 askimo chat -o             # Chat with OpenAI
+askimo chat -x             # Chat with xAI Grok
 askimo chat -c 1           # Continue last conversation
+askimo chat --cid abc123    # Continue by conversation ID
 ```
 
 Type `exit` or `Ctrl+C` to quit.
@@ -99,20 +106,27 @@ Type `exit` or `Ctrl+C` to quit.
 ```bash
 askimo models              # All providers
 askimo models -p           # Perplexity only
+askimo models -x           # xAI only
+```
+
+### View conversation history
+
+```bash
+askimo conversations       # Opens browser with all conversations
 ```
 
 ---
 
 ## ✨ Features
 
-| Feature | Description |
-|---------|-------------|
-| Streaming | Real-time response output |
-| Piping | Pipe content via stdin |
-| File input | Read content from files with `-f` |
-| Citations | Source links with Perplexity |
-| History | Conversations saved to `~/.askimo/conversations/` |
-| Multi-provider | Switch between AI providers easily |
+| Feature        | Description                                       |
+|----------------|---------------------------------------------------|
+| Streaming      | Real-time response output                         |
+| Piping         | Pipe content via stdin                            |
+| File input     | Read content from files with `-f`                 |
+| Citations      | Source links with Perplexity                      |
+| History        | Conversations saved to `~/.askimo/conversations/` |
+| Multi-provider | Switch between AI providers easily                |
 
 ---
 

package/index.mjs

@@ -3,7 +3,8 @@
 import { Command } from 'commander'
 import { startChat } from './lib/chat.mjs'
 import { ensureDirectories, loadConfig } from './lib/config.mjs'
-import { createConversation, loadConversation, saveConversation } from './lib/conversation.mjs'
+import { createConversation, loadConversation, loadConversationById, saveConversation } from './lib/conversation.mjs'
+import { showConversationsInBrowser } from './lib/conversations-ui.mjs'
 import { buildMessage, readFile, readStdin } from './lib/input.mjs'
 import { DEFAULT_MODELS, determineProvider, getProvider, listModels } from './lib/providers.mjs'
 import { generateResponse, outputJson, streamResponse } from './lib/stream.mjs'
@@ -20,8 +21,10 @@ program
   .option('-p, --perplexity', 'Use Perplexity AI (default)')
   .option('-o, --openai', 'Use OpenAI')
   .option('-a, --anthropic', 'Use Anthropic Claude')
+  .option('-x, --xai', 'Use xAI Grok')
   .option('-j, --json', 'Output as JSON instead of streaming')
   .option('-c, --continue <n>', 'Continue conversation N (1=last, 2=second-to-last)', Number.parseInt)
+  .option('--cid <id>', 'Continue conversation by ID')
   .option('-f, --file <path>', 'Read content from file')
   .action(async (question, options) => {
     try {
@@ -50,11 +53,24 @@ program
       let conversation
       let existingPath = null
 
+      if (options.continue && options.cid) {
+        console.error('Error: Cannot use both -c and --cid flags')
+        process.exit(1)
+      }
+
       if (options.continue) {
         const loaded = await loadConversation(options.continue)
         conversation = loaded.conversation
         existingPath = loaded.filePath
 
+        if (conversation.provider !== name) {
+          console.error(`Warning: Continuing ${conversation.provider} conversation with ${name}`)
+        }
+      } else if (options.cid) {
+        const loaded = await loadConversationById(options.cid)
+        conversation = loaded.conversation
+        existingPath = loaded.filePath
+
         if (conversation.provider !== name) {
           console.error(`Warning: Continuing ${conversation.provider} conversation with ${name}`)
         }
@@ -70,16 +86,16 @@ program
       let responseText
 
       if (options.json) {
-        const { text, sources } = await generateResponse(model, conversation.messages)
+        const { text, sources, duration } = await generateResponse(model, conversation.messages)
         responseText = text
         conversation.messages.push({
           role: 'assistant',
           content: responseText
         })
         await saveConversation(conversation, existingPath)
-        outputJson(conversation, responseText, sources)
+        outputJson(conversation, responseText, sources, duration)
       } else {
-        responseText = await streamResponse(model, conversation.messages)
+        responseText = await streamResponse(model, conversation.messages, modelName)
         conversation.messages.push({
           role: 'assistant',
           content: responseText
@@ -98,16 +114,23 @@ program
   .option('-p, --perplexity', 'Use Perplexity AI (default)')
   .option('-o, --openai', 'Use OpenAI')
   .option('-a, --anthropic', 'Use Anthropic Claude')
+  .option('-x, --xai', 'Use xAI Grok')
   .option('-c, --continue <n>', 'Continue conversation N (1=last, 2=second-to-last)', Number.parseInt)
+  .option('--cid <id>', 'Continue conversation by ID')
   .action(async (options) => {
     try {
+      if (options.continue && options.cid) {
+        console.error('Error: Cannot use both -c and --cid flags')
+        process.exit(1)
+      }
+
       const config = await loadConfig()
       await ensureDirectories()
 
       const providerName = determineProvider(options, config)
       const { model, name, modelName } = getProvider(providerName, config)
 
-      await startChat(model, name, modelName, options.continue)
+      await startChat(model, name, modelName, options.continue, options.cid)
     } catch (err) {
       console.error('Error:', err.message)
       process.exit(1)
@@ -120,6 +143,7 @@ program
   .option('-p, --perplexity', 'Show only Perplexity models')
   .option('-o, --openai', 'Show only OpenAI models')
   .option('-a, --anthropic', 'Show only Anthropic models')
+  .option('-x, --xai', 'Show only xAI models')
   .action(async (options) => {
     try {
       const config = await loadConfig()
@@ -128,8 +152,9 @@ program
       if (options.perplexity) providers.push('perplexity')
       if (options.openai) providers.push('openai')
       if (options.anthropic) providers.push('anthropic')
+      if (options.xai) providers.push('xai')
 
-      const toShow = providers.length === 0 ? ['perplexity', 'openai', 'anthropic'] : providers
+      const toShow = providers.length === 0 ? ['perplexity', 'openai', 'anthropic', 'xai'] : providers
 
       const results = await Promise.all(
         toShow.map(async (provider) => ({
@@ -159,4 +184,16 @@ program
     }
   })
 
+program
+  .command('conversations')
+  .description('View all conversations in browser')
+  .action(async () => {
+    try {
+      await showConversationsInBrowser()
+    } catch (err) {
+      console.error('Error:', err.message)
+      process.exit(1)
+    }
+  })
+
 program.parse()

package/lib/chat.mjs

@@ -1,8 +1,8 @@
 import input from '@inquirer/input'
-import { createConversation, loadConversation, saveConversation } from './conversation.mjs'
+import { createConversation, loadConversation, loadConversationById, saveConversation } from './conversation.mjs'
 import { streamResponse } from './stream.mjs'
 
-async function startChat(model, providerName, modelName, continueN = null) {
+async function startChat(model, providerName, modelName, continueN = null, conversationId = null) {
   let conversation
   let existingPath = null
 
@@ -15,6 +15,16 @@ async function startChat(model, providerName, modelName, continueN = null) {
       console.error(`Warning: Continuing ${conversation.provider} conversation with ${providerName}`)
     }
 
+    console.log(`Continuing conversation ${conversation.id} (${conversation.messages.length} messages)`)
+  } else if (conversationId) {
+    const loaded = await loadConversationById(conversationId)
+    conversation = loaded.conversation
+    existingPath = loaded.filePath
+
+    if (conversation.provider !== providerName) {
+      console.error(`Warning: Continuing ${conversation.provider} conversation with ${providerName}`)
+    }
+
     console.log(`Continuing conversation ${conversation.id} (${conversation.messages.length} messages)`)
   } else {
     conversation = createConversation(providerName, modelName)
@@ -42,7 +52,7 @@ async function startChat(model, providerName, modelName, continueN = null) {
     })
 
     console.log('')
-    const responseText = await streamResponse(model, conversation.messages)
+    const responseText = await streamResponse(model, conversation.messages, modelName)
 
     conversation.messages.push({
       role: 'assistant',

package/lib/conversation.mjs

@@ -52,6 +52,65 @@ async function loadConversation(n) {
   }
 }
 
+async function loadConversationById(conversationId) {
+  await ensureDirectories()
+
+  try {
+    const files = await readdir(CONVERSATIONS_DIR)
+    const jsonFiles = files.filter((f) => f.endsWith('.json'))
+
+    const matchingFile = jsonFiles.find((f) => {
+      const nameWithoutExt = f.slice(0, -5)
+      return nameWithoutExt.endsWith(`-${conversationId}`)
+    })
+
+    if (!matchingFile) {
+      console.error(`Conversation with ID "${conversationId}" not found`)
+      process.exit(1)
+    }
+
+    const filePath = join(CONVERSATIONS_DIR, matchingFile)
+    const content = await readFile(filePath, 'utf8')
+    return {
+      conversation: JSON.parse(content),
+      filePath
+    }
+  } catch (err) {
+    if (err.code !== 'ENOENT') {
+      throw err
+    }
+    console.error('No conversations directory found')
+    process.exit(1)
+  }
+}
+
+async function getAllConversations() {
+  await ensureDirectories()
+
+  try {
+    const files = await readdir(CONVERSATIONS_DIR)
+    const jsonFiles = files
+      .filter((f) => f.endsWith('.json'))
+      .sort()
+      .reverse()
+
+    const conversations = await Promise.all(
+      jsonFiles.map(async (filename) => {
+        const filePath = join(CONVERSATIONS_DIR, filename)
+        const content = await readFile(filePath, 'utf8')
+        return JSON.parse(content)
+      })
+    )
+
+    return conversations
+  } catch (err) {
+    if (err.code !== 'ENOENT') {
+      throw err
+    }
+    return []
+  }
+}
+
 async function saveConversation(conversation, existingPath = null) {
   await ensureDirectories()
 
@@ -68,4 +127,4 @@ async function saveConversation(conversation, existingPath = null) {
   return filePath
 }
 
-export { createConversation, loadConversation, saveConversation }
+export { createConversation, loadConversation, loadConversationById, getAllConversations, saveConversation }

package/lib/conversations-ui.mjs

@@ -0,0 +1,572 @@
+import hcat from 'hcat'
+import { getAllConversations } from './conversation.mjs'
+
+function formatDate(isoString) {
+  const date = new Date(isoString)
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+function getPreview(messages, maxLength = 100) {
+  const firstUserMessage = messages.find((m) => m.role === 'user')
+  if (!firstUserMessage) return 'No messages'
+
+  const content = firstUserMessage.content
+  if (content.length <= maxLength) return content
+  return content.slice(0, maxLength) + '...'
+}
+
+function escapeHtml(text) {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+const ITEMS_PER_PAGE = 20
+
+function generateHtml(conversations) {
+  // Prepare conversation data for client-side rendering
+  const conversationsJson = JSON.stringify(
+    conversations.map((conv) => ({
+      id: conv.id,
+      provider: conv.provider,
+      model: conv.model,
+      createdAt: conv.createdAt,
+      messageCount: conv.messages.length,
+      preview: getPreview(conv.messages),
+      messages: conv.messages
+    }))
+  )
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Askimo Conversations</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      min-height: 100vh;
+      color: #e0e0e0;
+      padding: 2rem;
+    }
+
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+    }
+
+    header {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    h1 {
+      font-size: 2.5rem;
+      font-weight: 700;
+      color: #fff;
+      margin-bottom: 0.5rem;
+    }
+
+    .subtitle {
+      color: #888;
+      font-size: 1rem;
+    }
+
+    .stats {
+      display: flex;
+      justify-content: center;
+      gap: 2rem;
+      margin-bottom: 2rem;
+    }
+
+    .stat {
+      background: rgba(255, 255, 255, 0.05);
+      padding: 1rem 2rem;
+      border-radius: 8px;
+      text-align: center;
+    }
+
+    .stat-value {
+      font-size: 2rem;
+      font-weight: 700;
+      color: #4fc3f7;
+    }
+
+    .stat-label {
+      font-size: 0.85rem;
+      color: #888;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      background: rgba(255, 255, 255, 0.03);
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    }
+
+    th {
+      background: rgba(79, 195, 247, 0.1);
+      padding: 1rem;
+      text-align: left;
+      font-weight: 600;
+      color: #4fc3f7;
+      text-transform: uppercase;
+      font-size: 0.75rem;
+      letter-spacing: 1px;
+    }
+
+    td {
+      padding: 1rem;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    .conversation-row {
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+
+    .conversation-row:hover {
+      background: rgba(255, 255, 255, 0.05);
+    }
+
+    .conversation-row.expanded {
+      background: rgba(79, 195, 247, 0.1);
+    }
+
+    .conversation-detail {
+      display: none;
+    }
+
+    .conversation-detail.expanded {
+      display: table-row;
+    }
+
+    .conversation-detail td {
+      padding: 0;
+      background: rgba(0, 0, 0, 0.2);
+    }
+
+    .detail-content {
+      padding: 1.5rem;
+      max-height: 500px;
+      overflow-y: auto;
+    }
+
+    .message {
+      margin-bottom: 1rem;
+      padding: 1rem;
+      border-radius: 8px;
+    }
+
+    .message:last-child {
+      margin-bottom: 0;
+    }
+
+    .message.user {
+      background: rgba(79, 195, 247, 0.1);
+      border-left: 3px solid #4fc3f7;
+    }
+
+    .message.assistant {
+      background: rgba(129, 199, 132, 0.1);
+      border-left: 3px solid #81c784;
+    }
+
+    .message-role {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 0.5rem;
+      color: #888;
+    }
+
+    .message.user .message-role {
+      color: #4fc3f7;
+    }
+
+    .message.assistant .message-role {
+      color: #81c784;
+    }
+
+    .message-content {
+      white-space: pre-wrap;
+      word-break: break-word;
+      line-height: 1.6;
+    }
+
+    .id {
+      font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+      font-size: 0.85rem;
+      color: #81c784;
+    }
+
+    .id-text {
+      margin-right: 0.5rem;
+    }
+
+    .copy-btn {
+      background: none;
+      border: none;
+      color: #666;
+      cursor: pointer;
+      padding: 0.25rem;
+      border-radius: 4px;
+      transition: all 0.2s;
+      vertical-align: middle;
+    }
+
+    .copy-btn:hover {
+      color: #4fc3f7;
+      background: rgba(79, 195, 247, 0.1);
+    }
+
+    .copy-btn.copied {
+      color: #81c784;
+    }
+
+    .provider {
+      text-transform: capitalize;
+      font-weight: 500;
+    }
+
+    .model {
+      font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+      font-size: 0.85rem;
+      color: #ffb74d;
+    }
+
+    .date {
+      color: #888;
+      font-size: 0.9rem;
+      white-space: nowrap;
+    }
+
+    .messages {
+      text-align: center;
+      font-weight: 600;
+    }
+
+    .preview {
+      color: #aaa;
+      font-size: 0.9rem;
+      max-width: 400px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .empty {
+      text-align: center;
+      padding: 4rem;
+      color: #666;
+    }
+
+    .usage {
+      margin-top: 2rem;
+      text-align: center;
+      color: #666;
+      font-size: 0.9rem;
+    }
+
+    code {
+      background: rgba(255, 255, 255, 0.1);
+      padding: 0.2rem 0.5rem;
+      border-radius: 4px;
+      font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+    }
+
+    /* Pagination */
+    .pagination {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 0.5rem;
+      margin-top: 1.5rem;
+      padding: 1rem;
+    }
+
+    .page-btn {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      color: #e0e0e0;
+      padding: 0.5rem 0.75rem;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .page-btn:hover:not(:disabled) {
+      background: rgba(79, 195, 247, 0.2);
+      border-color: rgba(79, 195, 247, 0.3);
+      color: #4fc3f7;
+    }
+
+    .page-btn:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    .page-info {
+      color: #888;
+      font-size: 0.9rem;
+      padding: 0 1rem;
+    }
+
+    /* Scrollbar styling */
+    .detail-content::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .detail-content::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 4px;
+    }
+
+    .detail-content::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 4px;
+    }
+
+    .detail-content::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>Askimo Conversations</h1>
+      <p class="subtitle">Your AI conversation history</p>
+    </header>
+
+    <div class="stats">
+      <div class="stat">
+        <div class="stat-value">${conversations.length}</div>
+        <div class="stat-label">Conversations</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value">${conversations.reduce((sum, c) => sum + c.messages.length, 0)}</div>
+        <div class="stat-label">Total Messages</div>
+      </div>
+    </div>
+
+    <div id="conversations-container">
+      <!-- Rendered by JavaScript -->
+    </div>
+
+    <div class="usage">
+      <p>Continue a conversation: <code>askimo --cid &lt;ID&gt; "your follow-up"</code></p>
+    </div>
+  </div>
+
+  <script>
+    const conversations = ${conversationsJson};
+    const ITEMS_PER_PAGE = ${ITEMS_PER_PAGE};
+    let currentPage = 1;
+    const totalPages = Math.ceil(conversations.length / ITEMS_PER_PAGE);
+
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    function formatDate(isoString) {
+      const date = new Date(isoString);
+      return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    }
+
+    function renderMessages(messages) {
+      return messages.map(msg => \`
+        <div class="message \${msg.role}">
+          <div class="message-role">\${msg.role === 'user' ? 'You' : 'Assistant'}</div>
+          <div class="message-content">\${escapeHtml(msg.content)}</div>
+        </div>
+      \`).join('');
+    }
+
+    function renderPage(page) {
+      currentPage = page;
+      const container = document.getElementById('conversations-container');
+      const start = (page - 1) * ITEMS_PER_PAGE;
+      const end = Math.min(start + ITEMS_PER_PAGE, conversations.length);
+      const pageConversations = conversations.slice(start, end);
+
+      if (conversations.length === 0) {
+        container.innerHTML = \`
+          <div class="empty">
+            <p>No conversations found.</p>
+            <p>Start a conversation with: <code>askimo "your question"</code></p>
+          </div>
+        \`;
+        return;
+      }
+
+      const rows = pageConversations.map((conv, idx) => {
+        const globalIndex = start + idx;
+        return \`
+          <tr class="conversation-row" data-index="\${globalIndex}">
+            <td class="id">
+              <span class="id-text">\${escapeHtml(conv.id)}</span>
+              <button class="copy-btn" data-id="\${escapeHtml(conv.id)}" title="Copy ID">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+              </button>
+            </td>
+            <td class="provider">\${escapeHtml(conv.provider)}</td>
+            <td class="model">\${escapeHtml(conv.model)}</td>
+            <td class="date">\${formatDate(conv.createdAt)}</td>
+            <td class="messages">\${conv.messageCount}</td>
+            <td class="preview">\${escapeHtml(conv.preview)}</td>
+          </tr>
+          <tr class="conversation-detail" data-index="\${globalIndex}">
+            <td colspan="6">
+              <div class="detail-content">
+                \${renderMessages(conv.messages)}
+              </div>
+            </td>
+          </tr>
+        \`;
+      }).join('');
+
+      const pagination = totalPages > 1 ? \`
+        <div class="pagination">
+          <button class="page-btn" onclick="renderPage(1)" \${currentPage === 1 ? 'disabled' : ''}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="11 17 6 12 11 7"></polyline>
+              <polyline points="18 17 13 12 18 7"></polyline>
+            </svg>
+          </button>
+          <button class="page-btn" onclick="renderPage(\${currentPage - 1})" \${currentPage === 1 ? 'disabled' : ''}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="15 18 9 12 15 6"></polyline>
+            </svg>
+          </button>
+          <span class="page-info">Page \${currentPage} of \${totalPages}</span>
+          <button class="page-btn" onclick="renderPage(\${currentPage + 1})" \${currentPage === totalPages ? 'disabled' : ''}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="9 18 15 12 9 6"></polyline>
+            </svg>
+          </button>
+          <button class="page-btn" onclick="renderPage(\${totalPages})" \${currentPage === totalPages ? 'disabled' : ''}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="13 17 18 12 13 7"></polyline>
+              <polyline points="6 17 11 12 6 7"></polyline>
+            </svg>
+          </button>
+        </div>
+      \` : '';
+
+      container.innerHTML = \`
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Provider</th>
+              <th>Model</th>
+              <th>Date</th>
+              <th>Messages</th>
+              <th>Preview</th>
+            </tr>
+          </thead>
+          <tbody>
+            \${rows}
+          </tbody>
+        </table>
+        \${pagination}
+      \`;
+
+      attachEventListeners();
+    }
+
+    function attachEventListeners() {
+      // Accordion behavior
+      document.querySelectorAll('.conversation-row').forEach(row => {
+        row.addEventListener('click', (e) => {
+          if (e.target.closest('.copy-btn')) return;
+
+          const index = row.dataset.index;
+          const detailRow = document.querySelector('.conversation-detail[data-index="' + index + '"]');
+          const isExpanded = row.classList.contains('expanded');
+
+          document.querySelectorAll('.conversation-row.expanded').forEach(r => r.classList.remove('expanded'));
+          document.querySelectorAll('.conversation-detail.expanded').forEach(d => d.classList.remove('expanded'));
+
+          if (!isExpanded) {
+            row.classList.add('expanded');
+            detailRow.classList.add('expanded');
+          }
+        });
+      });
+
+      // Copy button functionality
+      document.querySelectorAll('.copy-btn').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          const id = btn.dataset.id;
+
+          try {
+            await navigator.clipboard.writeText(id);
+            btn.classList.add('copied');
+            btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+
+            setTimeout(() => {
+              btn.classList.remove('copied');
+              btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+            }, 2000);
+          } catch (err) {
+            console.error('Failed to copy:', err);
+          }
+        });
+      });
+    }
+
+    // Initial render
+    renderPage(1);
+  </script>
+</body>
+</html>`
+}
+
+async function showConversationsInBrowser() {
+  const conversations = await getAllConversations()
+  const html = generateHtml(conversations)
+
+  console.log('Opening conversations in browser...')
+  hcat(html, { port: 0 })
+}
+
+export { showConversationsInBrowser, generateHtml }

package/lib/providers.mjs

@@ -1,11 +1,13 @@
 import { createAnthropic } from '@ai-sdk/anthropic'
 import { createOpenAI } from '@ai-sdk/openai'
 import { createPerplexity } from '@ai-sdk/perplexity'
+import { createXai } from '@ai-sdk/xai'
 
 const DEFAULT_MODELS = {
   perplexity: 'sonar',
   openai: 'gpt-4o',
-  anthropic: 'claude-sonnet-4-20250514'
+  anthropic: 'claude-sonnet-4-20250514',
+  xai: 'grok-4'
 }
 
 // Perplexity doesn't have a models list API, so we hardcode these
@@ -17,6 +19,20 @@ const PERPLEXITY_MODELS = [
   { id: 'sonar-deep-research', description: 'Deep research sessions' }
 ]
 
+// xAI doesn't have a public models list API, so we hardcode these
+const XAI_MODELS = [
+  { id: 'grok-4-1-fast-reasoning', description: 'Grok 4.1 fast with reasoning' },
+  { id: 'grok-4-1-fast-non-reasoning', description: 'Grok 4.1 fast without reasoning' },
+  { id: 'grok-code-fast-1', description: 'Grok optimized for code' },
+  { id: 'grok-4-fast-reasoning', description: 'Grok 4 fast with reasoning' },
+  { id: 'grok-4-fast-non-reasoning', description: 'Grok 4 fast without reasoning' },
+  { id: 'grok-4-0709', description: 'Grok 4 flagship model' },
+  { id: 'grok-3-mini', description: 'Lightweight Grok 3 model' },
+  { id: 'grok-3', description: 'Grok 3 base model' },
+  { id: 'grok-2-vision-1212', description: 'Grok 2 with vision capabilities' },
+  { id: 'grok-2-image-1212', description: 'Image generation model' }
+]
+
 async function fetchOpenAiModels(apiKey) {
   const response = await fetch('https://api.openai.com/v1/models', {
     // biome-ignore lint/style/useNamingConvention: headers use standard capitalization
@@ -71,6 +87,9 @@ async function listModels(provider, config) {
       return fetchAnthropicModels(apiKey)
     }
 
+    case 'xai':
+      return XAI_MODELS
+
     default:
       throw new Error(`Unknown provider: ${provider}`)
   }
@@ -117,6 +136,19 @@ function getProvider(providerName, config) {
         modelName
       }
     }
+    case 'xai': {
+      const apiKey = config.XAI_API_KEY
+      if (!apiKey) {
+        throw new Error('XAI_API_KEY not found in config')
+      }
+      const modelName = config.XAI_MODEL || DEFAULT_MODELS.xai
+      const xai = createXai({ apiKey })
+      return {
+        model: xai(modelName),
+        name: 'xai',
+        modelName
+      }
+    }
     default:
       throw new Error(`Unknown provider: ${providerName}`)
   }
@@ -126,9 +158,10 @@ function determineProvider(options, config = {}) {
   if (options.openai) return 'openai'
   if (options.anthropic) return 'anthropic'
   if (options.perplexity) return 'perplexity'
+  if (options.xai) return 'xai'
 
   const defaultProvider = config.DEFAULT_PROVIDER?.toLowerCase()
-  if (defaultProvider && ['perplexity', 'openai', 'anthropic'].includes(defaultProvider)) {
+  if (defaultProvider && ['perplexity', 'openai', 'anthropic', 'xai'].includes(defaultProvider)) {
     return defaultProvider
   }
 

package/lib/stream.mjs

@@ -1,6 +1,13 @@
 import { generateText, streamText } from 'ai'
 
-async function streamResponse(model, messages) {
+function formatDuration(ms) {
+  if (ms < 1000) return `${ms}ms`
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+async function streamResponse(model, messages, modelName) {
+  const startTime = Date.now()
+
   const result = streamText({
     model,
     messages
@@ -29,19 +36,26 @@ async function streamResponse(model, messages) {
     })
   }
 
+  // Display status line
+  const duration = Date.now() - startTime
+  process.stdout.write(`\n\x1b[2m${modelName} · ${formatDuration(duration)}\x1b[0m\n`)
+
   return fullText
 }
 
 async function generateResponse(model, messages) {
+  const startTime = Date.now()
+
   const { text, sources } = await generateText({
     model,
     messages
   })
 
-  return { text, sources }
+  const duration = Date.now() - startTime
+  return { text, sources, duration }
 }
 
-function buildJsonOutput(conversation, response, sources) {
+function buildJsonOutput(conversation, response, sources, duration) {
   const lastUserMessage = conversation.messages.findLast((m) => m.role === 'user')
   const output = {
     provider: conversation.provider,
@@ -49,7 +63,8 @@ function buildJsonOutput(conversation, response, sources) {
     question: lastUserMessage?.content || '',
     response,
     conversationId: conversation.id,
-    messageCount: conversation.messages.length + 1
+    messageCount: conversation.messages.length + 1,
+    durationMs: duration
   }
 
   if (sources?.length > 0) {
@@ -59,8 +74,8 @@ function buildJsonOutput(conversation, response, sources) {
   return output
 }
 
-function outputJson(conversation, response, sources) {
-  const output = buildJsonOutput(conversation, response, sources)
+function outputJson(conversation, response, sources, duration) {
+  const output = buildJsonOutput(conversation, response, sources, duration)
   console.log(JSON.stringify(output, null, 2))
 }
 

package/package.json

@@ -1,9 +1,21 @@
 {
   "name": "askimo",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "A CLI tool for communicating with AI providers (Perplexity, OpenAI, Anthropic)",
   "license": "Apache-2.0",
   "author": "Amit Tal",
+  "keywords": [
+    "cli",
+    "ai",
+    "llm",
+    "perplexity",
+    "openai",
+    "anthropic",
+    "claude",
+    "gpt",
+    "chatbot",
+    "terminal"
+  ],
   "type": "module",
   "bin": {
     "askimo": "./index.mjs"
@@ -27,8 +39,10 @@
     "@ai-sdk/anthropic": "^2.0.53",
     "@ai-sdk/openai": "^2.0.76",
     "@ai-sdk/perplexity": "^2.0.21",
+    "@ai-sdk/xai": "^2.0.40",
     "@inquirer/input": "^5.0.2",
     "ai": "^5.0.106",
-    "commander": "^14.0.2"
+    "commander": "^14.0.2",
+    "hcat": "^2.2.1"
   }
 }