@modelprofile.com/flexharness 6.0.0 → 7.0.0

package/ts_chat_cli/components.messagelist.ts

@@ -0,0 +1,45 @@
+import { React, h, Box, Text } from './plugins.js';
+import { Message, type IChatMessage } from './components.message.js';
+
+interface IMessageListProps {
+  messages: IChatMessage[];
+  streamingText: string;
+  busy: boolean;
+}
+
+export function MessageList({ messages, streamingText, busy }: IMessageListProps): React.ReactElement {
+  const children: React.ReactNode[] = [];
+
+  if (messages.length === 0 && !busy) {
+    children.push(
+      h(Box, { justifyContent: 'center', marginY: 1, key: 'empty' },
+        h(Text, { dimColor: true }, 'Type a message to start chatting.'),
+      ),
+    );
+  }
+
+  for (let i = 0; i < messages.length; i++) {
+    children.push(h(Message, { key: `msg-${i}`, message: messages[i]! }));
+  }
+
+  if (busy && streamingText) {
+    children.push(
+      h(Box, { marginY: 0, key: 'streaming' },
+        h(Text, { bold: true, color: 'green' }, 'Assistant: '),
+        h(Text, null, streamingText),
+        h(Text, { dimColor: true }, '\u2588'),
+      ),
+    );
+  }
+
+  if (busy && !streamingText) {
+    children.push(
+      h(Box, { marginY: 0, key: 'spinner' },
+        h(Text, { color: 'yellow' }, '\u25CF'),
+        h(Text, { dimColor: true }, ' Thinking...'),
+      ),
+    );
+  }
+
+  return h(Box, { flexDirection: 'column' as const, flexGrow: 1 }, ...children);
+}

package/ts_chat_cli/components.statusbar.ts

@@ -0,0 +1,31 @@
+import { React, h, Box, Text } from './plugins.js';
+import type { IChatUsage } from './plugins.js';
+
+interface IStatusBarProps {
+  modelName?: string;
+  usage: IChatUsage;
+  busy: boolean;
+}
+
+export function StatusBar({ modelName, usage, busy }: IStatusBarProps): React.ReactElement {
+  const children: React.ReactNode[] = [
+    h(Text, { dimColor: true, key: 'model' }, modelName ? `model: ${modelName}` : 'FlexChat'),
+    h(Text, { dimColor: true, key: 'sep1' }, ' | '),
+    h(Text, { dimColor: true, key: 'tokens' }, `tokens: ${usage.totalTokens.toLocaleString()}`),
+    h(Text, { dimColor: true, key: 'sep2' }, ' | '),
+    h(Text, { dimColor: true, key: 'turns' }, `turns: ${usage.turns}`),
+  ];
+
+  if (busy) {
+    children.push(
+      h(Text, { dimColor: true, key: 'sep3' }, ' | '),
+      h(Text, { color: 'yellow', key: 'thinking' }, 'thinking...'),
+    );
+  }
+
+  return h(
+    Box,
+    { borderStyle: 'single' as const, borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1 },
+    ...children,
+  );
+}

package/ts_chat_cli/index.ts

@@ -0,0 +1,2 @@
+export { startChat } from './startchat.js';
+export type { IStartChatOptions } from './startchat.js';

package/ts_chat_cli/plugins.ts

@@ -0,0 +1,21 @@
+// ink (React-based terminal UI)
+import { render, Box, Text, Static, Newline, Spacer, useInput, useApp } from 'ink';
+export { render, Box, Text, Static, Newline, Spacer, useInput, useApp };
+
+// ink components
+import TextInput from 'ink-text-input';
+export { TextInput };
+
+// React
+import React from 'react';
+export { React };
+export const h = React.createElement;
+
+// Core (cross-folder import)
+import { ChatSession } from '@modelprofile.com/flexharness/chat';
+export { ChatSession };
+export type { IChatSessionOptions, IChatCallbacks, IChatUsage } from '@modelprofile.com/flexharness/chat';
+
+// FlexHarness agent types
+export type { IAgentRunResult } from '@modelprofile.com/flexharness-agent';
+export type { TSmartAiLanguageModel, ToolSet } from '@modelprofile.com/flexharness-models';

package/ts_chat_cli/readme.md

@@ -0,0 +1,40 @@
+Interactive terminal chat built with Ink and React, backed by the FlexHarness chat core.
+
+```sh
+pnpm add @modelprofile.com/flexharness ink ink-text-input react
+```
+
+```typescript
+import { startChat } from '@modelprofile.com/flexharness/chat/cli';
+
+await startChat({ model, modelName: 'My selected model', system: 'Answer concisely.' });
+```
+
+Supply a model from a separately installed FlexHarness provider. `startChat` also accepts `tools` and `maxSteps`. It renders the terminal conversation and resolves when the user exits. Install the terminal UI peer dependencies shown above; TypeScript projects also need `@types/react`. Chat core and browser projects do not need these peers.
+
+This replaces `@push.rocks/smartchat/cli` and retains `startChat` and `IStartChatOptions`.
+
+## Issue Reporting and Security
+
+Report issues and security concerns through [community.foss.global](https://community.foss.global).
+
+## License and Legal Information
+
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the repository license file.
+
+**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
+
+### Trademarks
+
+This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.
+
+Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.
+
+### Company Information
+
+Task Venture Capital GmbH<br>
+Registered at District Court Bremen HRB 35230 HB, Germany
+
+For any legal inquiries or further information, please contact us via email at hello@task.vc.
+
+By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.

package/ts_chat_cli/startchat.ts

@@ -0,0 +1,34 @@
+import { React, h, render } from './plugins.js';
+import type { TSmartAiLanguageModel, ToolSet } from './plugins.js';
+import { ChatApp } from './components.chatapp.js';
+
+export interface IStartChatOptions {
+  /** The language model to use */
+  model: TSmartAiLanguageModel;
+  /** System prompt for the agent */
+  system?: string;
+  /** Tools available to the agent */
+  tools?: ToolSet;
+  /** Maximum agentic steps per turn */
+  maxSteps?: number;
+  /** Display name for the model (shown in header/status) */
+  modelName?: string;
+}
+
+/**
+ * Start an interactive chat TUI in the terminal.
+ * Returns a promise that resolves when the user exits.
+ */
+export async function startChat(options: IStartChatOptions): Promise<void> {
+  const instance = render(
+    h(ChatApp, {
+      model: options.model,
+      system: options.system,
+      tools: options.tools,
+      maxSteps: options.maxSteps,
+      modelName: options.modelName,
+    }),
+  );
+
+  await instance.waitUntilExit();
+}

package/ts_chat_web/flexchat-input.ts

@@ -0,0 +1,184 @@
+import { LitElement, html, css } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+
+export class FlexChatInput extends LitElement {
+  declare disabled: boolean;
+  declare placeholder: string;
+  private value = '';
+
+  static properties = {
+    disabled: { type: Boolean },
+    placeholder: { type: String },
+  };
+
+  static styles: CSSResult = css`
+    :host {
+      display: block;
+    }
+
+    .input-wrap {
+      display: flex;
+      align-items: flex-end;
+      gap: 8px;
+      padding: 10px 12px;
+      background: rgba(255, 255, 255, 0.04);
+      border-radius: 16px;
+      border: 1px solid rgba(255, 255, 255, 0.07);
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .input-wrap:focus-within {
+      border-color: rgba(99, 102, 241, 0.45);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
+    }
+
+    .input-wrap.disabled {
+      opacity: 0.45;
+      pointer-events: none;
+    }
+
+    textarea {
+      flex: 1;
+      background: transparent;
+      border: none;
+      outline: none;
+      color: #e4e4e7;
+      font-size: 14px;
+      font-family: inherit;
+      line-height: 1.5;
+      resize: none;
+      min-height: 22px;
+      max-height: 110px;
+      padding: 2px 0;
+    }
+
+    textarea::placeholder {
+      color: rgba(255, 255, 255, 0.22);
+    }
+
+    .send-btn {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      border: none;
+      background: linear-gradient(135deg, #6366f1, #7c3aed);
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
+      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+    }
+
+    .send-btn:hover:not(:disabled) {
+      transform: scale(1.08);
+      box-shadow: 0 3px 12px rgba(99, 102, 241, 0.45);
+    }
+
+    .send-btn:active:not(:disabled) {
+      transform: scale(0.94);
+    }
+
+    .send-btn:disabled {
+      opacity: 0.25;
+      cursor: default;
+      box-shadow: none;
+    }
+
+    .send-btn svg {
+      width: 15px;
+      height: 15px;
+    }
+
+    .hint {
+      display: flex;
+      justify-content: flex-end;
+      padding: 5px 2px 0;
+    }
+
+    .hint-text {
+      font-size: 10.5px;
+      color: rgba(255, 255, 255, 0.13);
+    }
+
+    kbd {
+      padding: 0 3px;
+      border-radius: 3px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.07);
+      font-family: inherit;
+      font-size: 10px;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.disabled = false;
+    this.placeholder = 'Type a message...';
+  }
+
+  private handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      this.submit();
+    }
+  }
+
+  private handleInput(e: Event) {
+    const textarea = e.target as HTMLTextAreaElement;
+    this.value = textarea.value;
+    textarea.style.height = 'auto';
+    textarea.style.height = Math.min(textarea.scrollHeight, 110) + 'px';
+  }
+
+  private submit() {
+    if (!this.value.trim() || this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent('send', {
+        detail: { text: this.value.trim() },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    this.value = '';
+    const textarea = this.shadowRoot?.querySelector('textarea');
+    if (textarea) {
+      textarea.value = '';
+      textarea.style.height = 'auto';
+    }
+  }
+
+  render(): TemplateResult {
+    const canSend = !this.disabled && !!this.value.trim();
+    return html`
+      <div class="input-wrap ${this.disabled ? 'disabled' : ''}">
+        <textarea
+          rows="1"
+          .value=${this.value}
+          @input=${this.handleInput}
+          @keydown=${this.handleKeydown}
+          placeholder=${this.disabled ? 'Waiting for response...' : this.placeholder}
+          ?disabled=${this.disabled}
+        ></textarea>
+        <button
+          class="send-btn"
+          @click=${this.submit}
+          ?disabled=${!canSend}
+          aria-label="Send message"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="12" y1="19" x2="12" y2="5"></line>
+            <polyline points="5 12 12 5 19 12"></polyline>
+          </svg>
+        </button>
+      </div>
+      <div class="hint">
+        <span class="hint-text"><kbd>Enter</kbd> send · <kbd>Shift+Enter</kbd> new line</span>
+      </div>
+    `;
+  }
+}
+
+customElements.define('flexchat-input', FlexChatInput);

package/ts_chat_web/flexchat-message.ts

@@ -0,0 +1,185 @@
+import { LitElement, html, css } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+
+export class FlexChatMessage extends LitElement {
+  declare role: 'user' | 'assistant' | 'tool';
+  declare content: string;
+  declare toolName: string;
+  declare timestamp: number;
+
+  static properties = {
+    role: { type: String },
+    content: { type: String },
+    toolName: { type: String },
+    timestamp: { type: Number },
+  };
+
+  static styles: CSSResult = css`
+    :host {
+      display: block;
+      animation: msg-in 0.3s ease-out both;
+    }
+
+    @keyframes msg-in {
+      from {
+        opacity: 0;
+        transform: translateY(6px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* ── Message Row ── */
+    .row {
+      display: flex;
+      gap: 10px;
+      align-items: flex-end;
+      margin-bottom: 4px;
+    }
+
+    .row.user {
+      justify-content: flex-end;
+    }
+
+    .row.assistant {
+      justify-content: flex-start;
+    }
+
+    /* ── Avatar ── */
+    .avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      flex-shrink: 0;
+      line-height: 1;
+    }
+
+    .avatar.user {
+      background: linear-gradient(135deg, #3b82f6, #2563eb);
+      color: #fff;
+      order: 2;
+    }
+
+    .avatar.assistant {
+      background: linear-gradient(135deg, #6366f1, #7c3aed);
+      color: #fff;
+    }
+
+    /* ── Bubble ── */
+    .bubble {
+      padding: 10px 14px;
+      border-radius: 18px;
+      word-break: break-word;
+      white-space: pre-wrap;
+      font-size: 14px;
+      line-height: 1.55;
+      max-width: min(75%, 480px);
+    }
+
+    .bubble.user {
+      background: linear-gradient(135deg, #3b82f6, #2563eb);
+      color: #fff;
+      border-bottom-right-radius: 6px;
+    }
+
+    .bubble.assistant {
+      background: var(--flexchat-assistant-bg, #1e1e2e);
+      border: 1px solid var(--flexchat-assistant-border, rgba(255, 255, 255, 0.08));
+      color: var(--flexchat-assistant-text, #d1d5db);
+      border-bottom-left-radius: 6px;
+    }
+
+    /* ── Tool ── */
+    .tool-row {
+      display: flex;
+      justify-content: flex-start;
+      padding: 2px 0 2px 38px;
+    }
+
+    .tool-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      background: rgba(99, 102, 241, 0.1);
+      border: 1px solid rgba(99, 102, 241, 0.15);
+      border-radius: 20px;
+      font-size: 11px;
+      font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
+      color: #a5b4fc;
+    }
+
+    .tool-icon {
+      font-size: 10px;
+    }
+
+    .tool-name {
+      font-weight: 600;
+    }
+
+    /* ── Timestamp ── */
+    .time-row {
+      padding: 1px 38px 6px;
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.2);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .time-row.user {
+      text-align: right;
+    }
+
+    .time-row.assistant {
+      text-align: left;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.role = 'user';
+    this.content = '';
+    this.toolName = '';
+    this.timestamp = 0;
+  }
+
+  private formatTime(ts: number): string {
+    if (!ts) return '';
+    const d = new Date(ts);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+
+  render(): TemplateResult {
+    if (this.role === 'tool') {
+      return html`
+        <div class="tool-row">
+          <div class="tool-pill">
+            <span class="tool-icon">⚡</span>
+            <span class="tool-name">${this.toolName || 'tool'}</span>
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="row ${this.role}">
+        <div class="avatar ${this.role}">
+          ${this.role === 'user' ? '⬆' : '✦'}
+        </div>
+        <div class="bubble ${this.role}">
+          ${this.content}
+        </div>
+      </div>
+      ${this.timestamp
+        ? html`<div class="time-row ${this.role}">${this.formatTime(this.timestamp)}</div>`
+        : ''}
+    `;
+  }
+}
+
+customElements.define('flexchat-message', FlexChatMessage);