State Management

from typing_extensions import TypedDict, Annotated
from operator import add
 
class ResearchState(TypedDict):
    # Each node can append to these — they accumulate across the run
    messages: Annotated[list, add]
    sources: Annotated[list[str], add]
    findings: Annotated[list[str], add]
 
    # These are replaced (last write wins)
    query: str
    model: str
    confidence: float
 
def researcher_node(state: ResearchState) -> dict:
    result = llm.invoke(state["messages"])
    new_sources = extract_sources(result.content)
 
    # Returns partial state — only fields being updated
    # LangGraph merges this into the existing state
    return {
        "messages": [result],           # Appended via reducer
        "sources": new_sources,          # Appended via reducer
        "confidence": 0.87,              # Replaced
    }

// Full typed state object
const state = agent.value();         // Signal<ProjectState>
 
// Computed values from nested fields
const score = computed(() => agent.value().analysis?.score ?? 0);
const fileCount = computed(() => agent.value().files.length);
const isDone = computed(() => agent.value().progress === 100);
 
// Runtime-neutral message projection for UI
const messages = agent.messages();   // Signal<Message[]>

const agent = injectAgent(PROJECT_AGENT);
 
agent.submit(
  { message: 'Update the project plan.' },
  { streamMode: ['messages-tuple'] },
);

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- Updates as each file is processed -->
    <p>Files processed: {{ agent.value().files.length }}</p>
 
    <!-- Progress bar updates as agent emits progress updates -->
    <progress [value]="agent.value().progress" max="100" />
 
    <!-- Plan items appear as the agent builds the plan -->
    @for (step of agent.value().plan; track step) {
      <li>{{ step }}</li>
    }
 
    <!-- Messages stream token by token -->
    @for (msg of agent.messages(); track $index) {
      <app-message [message]="msg" />
    }
  `
})
export class ProjectComponent {
  protected readonly agent = injectAgent(PROJECT_AGENT);
}

// Safe: computed() re-evaluates when agent.value() changes
const hasErrors = computed(() =>
  (agent.value().analysis?.issues ?? []).length > 0
);
 
// Safe: @for tracks by identity, not index, for stable DOM
// track $index is fine for messages since they always append
@for (msg of agent.messages(); track $index) {
  <app-message [message]="msg" />
}
 
// Safe: null-coalescing handles state fields not yet populated
const score = computed(() => agent.value().analysis?.score ?? 0);

// Defined once (e.g. in agent.ts):
// export const CHAT_AGENT = createAgentRef<ChatState>('chat');
 
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChatComponent {
  // --- Thread state (from injectAgent(), read-only) ---
  protected readonly agent = injectAgent(CHAT_AGENT);
 
  // Convenience computed values from thread state
  readonly messages = this.agent.messages;           // Signal<Message[]>
  readonly isLoading = this.agent.isLoading;         // Signal<boolean>
  readonly interrupted = this.agent.interrupt;       // Signal<AgentInterrupt | undefined>
 
  // --- Application state (your Angular signals) ---
  readonly sidebarOpen = signal(true);
  readonly activeTab = signal<'chat' | 'history' | 'settings'>('chat');
  readonly inputText = signal('');
  readonly selectedMessageId = signal<string | null>(null);
 
  // --- Actions ---
  send() {
    const text = this.inputText();
    if (!text.trim()) return;
    this.agent.submit({ message: text });
    this.inputText.set('');                          // UI state — clear the input
  }
 
  approve() {
    this.agent.submit({ resume: { approved: true } });
  }
}

import { inject, signal } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { injectAgent, provideAgent } from '@threadplane/langgraph';
 
// app.config.ts — configure threadId/onThreadId on the provider
// (CHAT_AGENT = createAgentRef<ChatState>('chat'), declared in agent.ts)
// The factory form runs inside an injection context, so it can inject router
// services — a plain object literal at bootstrap cannot.
provideAgent(CHAT_AGENT, () => {
  const route = inject(ActivatedRoute);
  const router = inject(Router);
  return {
    apiUrl: '...',
 
    // Same threadId = restored conversation history
    threadId: signal(route.snapshot.params['threadId']),
 
    // New threadId auto-created for new conversations
    onThreadId: (id: string) => router.navigate(['/chat', id]),
  };
});
 
// component.ts
const agent = injectAgent(CHAT_AGENT);
 
// Read checkpoint history for time-travel UI
const history = agent.history();             // Signal<AgentCheckpoint[]>
const rawHistory = agent.langGraphHistory(); // Signal<ThreadState[]>
const branch = agent.branch();               // Signal<string> — active branch ID
const branchTree = agent.experimentalBranchTree();

protected readonly agent = injectAgent(RESEARCH_AGENT);
 
// Derived signals — recalculate only when their dependencies change
readonly progress = computed(() => this.agent.value().progress);
readonly isPlanning = computed(() => this.agent.value().plan.length === 0 && this.agent.isLoading());
readonly sourceCount = computed(() => this.agent.value().sources.length);
readonly hasReport = computed(() => this.agent.value().report !== null);
readonly reportTitle = computed(() => this.agent.value().report?.title ?? '');