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);
 
// Direct messages access (shortcut for agent.value().messages)
const messages = agent.messages();   // Signal<BaseMessage[]>

const agent = streamResource<ProjectState>({
  assistantId: 'project_agent',
  // Default: values mode — full state after each node
  // streamMode: 'messages' — token-by-token for text fields
});

@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 {
  readonly agent = streamResource<ProjectState>({
    assistantId: '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);

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChatComponent {
  // --- Thread state (from agent, read-only) ---
  readonly agent = streamResource<ChatState>({
    assistantId: 'chat_agent',
  });
 
  // Convenience computed values from thread state
  readonly messages = this.agent.messages;           // Signal<BaseMessage[]>
  readonly isLoading = this.agent.isLoading;         // Signal<boolean>
  readonly interrupted = this.agent.interrupt;       // Signal<Interrupt | null>
 
  // --- 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({ messages: [{ role: 'user', content: text }] });
    this.inputText.set('');                          // UI state — clear the input
  }
 
  approve() {
    this.agent.submit(null, { resume: { approved: true } });
  }
}

const agent = streamResource<ChatState>({
  assistantId: 'chat_agent',
 
  // Same threadId = restored conversation history
  threadId: signal(this.route.snapshot.params['threadId']),
 
  // New threadId auto-created for new conversations
  onThreadId: (id) => this.router.navigate(['/chat', id]),
});
 
// Read checkpoint history for time-travel UI
const history = agent.history();    // Signal<ThreadState[]>
const branch = agent.branch();      // Signal<string> — active branch ID

readonly agent = streamResource<ResearchState>({
  assistantId: '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 ?? '');