@semiont/react-ui 0.5.26 → 0.5.28

package/src/components/resource/panels/CollaborationPanel.tsx

@@ -1,9 +1,26 @@
 'use client';
 
-import type { ConnectionState } from '@semiont/core';
+import type { CollaboratorEntry, ConnectionState } from '@semiont/core';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import './CollaborationPanel.css';
 
+/**
+ * Token counts read as ceilings, not quantities — "200K" carries the meaning a
+ * bare 200000 makes the reader compute. Kept lossless above the K/M break so a
+ * 128000 window never displays as a rounded-away 130K.
+ */
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) {
+    const m = n / 1_000_000;
+    return `${Number.isInteger(m) ? m : m.toFixed(1)}M`;
+  }
+  if (n >= 1_000) {
+    const k = n / 1_000;
+    return `${Number.isInteger(k) ? k : k.toFixed(1)}K`;
+  }
+  return String(n);
+}
+
 interface Props {
   /**
    * Connection state from `client.actor.state$`. See
@@ -26,16 +43,34 @@ interface Props {
   eventCount: number;
   lastEventTimestamp?: string;
   knowledgeBaseName?: string;
+  /**
+   * The KB's collaborator roster (`client.browse.agents()`, typically via
+   * `useCollaborators`). Optional so hosts that never wire it — including
+   * external consumers of this package — render exactly as before.
+   *
+   * Each entry's `limits` is absent whenever discovery could not answer *right
+   * now* (INFERENCE-LIMITS-EXPOSURE D3), so a missing ceiling is normal and
+   * shows as no ceiling rather than as an error.
+   */
+  collaborators?: CollaboratorEntry[];
 }
 
 export function CollaborationPanel({
   state,
   eventCount,
   lastEventTimestamp,
-  knowledgeBaseName
+  knowledgeBaseName,
+  collaborators
 }: Props) {
   const t = useTranslations('CollaborationPanel');
 
+  // Only Software agents have a provider/model and can carry inference
+  // ceilings; Persons and Organizations are collaborators in a different
+  // sense and have nothing to show in this section.
+  const softwareAgents = (collaborators ?? []).filter(
+    (entry) => entry.agent['@type'] === 'Software',
+  );
+
   // Healthy = live, or briefly flapping. Only genuinely sustained
   // disconnects surface as "Disconnected" in the UI.
   const isHealthy = state === 'open' || state === 'reconnecting' || state === 'initial' || state === 'connecting';
@@ -122,6 +157,62 @@ export function CollaborationPanel({
         </div>
       </div>
 
+      {/* Collaborators roster — software agents and their discovered ceilings */}
+      {softwareAgents.length > 0 && (
+        <div className="semiont-collaboration-panel__section semiont-collaboration-panel__section--bordered">
+          <h3 className="semiont-collaboration-panel__heading">
+            {t('collaborators')}
+          </h3>
+          {softwareAgents.map((entry, i) => {
+            // `agent` is narrowed to the Software member by the filter above,
+            // but the generated union is structural, so read through a local.
+            const agent = entry.agent as Extract<CollaboratorEntry['agent'], { '@type': 'Software' }>;
+            const limits = entry.limits;
+            // `maxOutputTokens === contextTokens` is the schema's documented
+            // sentinel for a provider with ONE shared window (Ollama). Showing
+            // "128K in / 128K out" there would invent a distinction the
+            // provider does not make.
+            const ceiling = !limits
+              ? null
+              : limits.maxOutputTokens === limits.contextTokens
+                ? t('sharedWindow', { contextTokens: formatTokens(limits.contextTokens) })
+                : t('ceilings', {
+                    contextTokens: formatTokens(limits.contextTokens),
+                    maxOutputTokens: formatTokens(limits.maxOutputTokens),
+                  });
+
+            return (
+              <div
+                key={agent['@id'] ?? `${agent.provider}:${agent.model}:${i}`}
+                className="semiont-collaboration-panel__collaborator"
+                data-testid="semiont-collaborator-row"
+              >
+                <div className="semiont-collaboration-panel__collaborator-id">
+                  {agent.provider && (
+                    <span className="semiont-collaboration-panel__collaborator-provider">
+                      {agent.provider}
+                    </span>
+                  )}
+                  <span className="semiont-collaboration-panel__collaborator-model">
+                    {agent.model ?? agent.name}
+                  </span>
+                </div>
+                {entry.servesJobTypes && entry.servesJobTypes.length > 0 && (
+                  <div className="semiont-collaboration-panel__collaborator-jobs">
+                    {entry.servesJobTypes.join(', ')}
+                  </div>
+                )}
+                {ceiling && (
+                  <div className="semiont-collaboration-panel__collaborator-limits">
+                    {ceiling}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
       {/* Sharing Section - Placeholder for future */}
       <div className="semiont-collaboration-panel__section semiont-collaboration-panel__section--bordered">
         <h3 className="semiont-collaboration-panel__heading">

package/src/components/resource/panels/CommentEntry.tsx

@@ -87,7 +87,7 @@ export function CommentEntry({
       data-type="comment"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        session?.client.browse.click(comment.id, comment.motivation);
+        session?.client.browse.click(comment.id);
       }}
       {...hoverProps}
     >

package/src/components/resource/panels/CommentsPanel.css

@@ -31,10 +31,6 @@
   margin-bottom: var(--semiont-panel-header-margin-bottom);
 }
 
-[data-theme="dark"] .semiont-comments-panel__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-comments-panel__list {
   flex: 1;
   overflow-y: auto;
@@ -68,29 +64,17 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-comments-panel__comment-author {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-comments-panel__comment-time {
   font-size: var(--semiont-text-xs);
   color: var(--semiont-text-tertiary);
 }
 
-[data-theme="dark"] .semiont-comments-panel__comment-time {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-comments-panel__comment-text {
   font-size: var(--semiont-text-sm);
   color: var(--semiont-text-primary);
   line-height: 1.5;
 }
 
-[data-theme="dark"] .semiont-comments-panel__comment-text {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-comments-panel__input-area {
   padding: var(--semiont-panel-padding);
   border-top: 1px solid var(--semiont-color-gray-200);

package/src/components/resource/panels/HighlightEntry.tsx

@@ -51,7 +51,7 @@ export function HighlightEntry({
       data-type="highlight"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        session?.client.browse.click(highlight.id, highlight.motivation);
+        session?.client.browse.click(highlight.id);
       }}
       {...hoverProps}
     >

package/src/components/resource/panels/HighlightPanel.css

@@ -30,10 +30,6 @@
   letter-spacing: 0.05em;
 }
 
-[data-theme="dark"] .semiont-highlight-panel__label {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-highlight-panel__colors {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
@@ -58,6 +54,3 @@
   transform: scale(1.1);
 }
 
-[data-theme="dark"] .semiont-highlight-panel__color--selected {
-  border-color: var(--semiont-text-primary);
-}

package/src/components/resource/panels/JsonLdPanel.css

@@ -24,10 +24,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-jsonld-panel__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-jsonld-panel__editor {
   flex: 1;
   overflow: hidden;

package/src/components/resource/panels/ReferenceEntry.tsx

@@ -27,6 +27,8 @@ interface ReferenceEntryProps {
   onOpenResource?: (resourceId: string) => void;
   annotateMode?: boolean;
   isGenerating?: boolean;
+  /** The reference just got attention-worthy (created or resolved) — glow the icon (RESOLUTION-SPARKLE D6). */
+  sparkle?: boolean;
   ref?: Ref<HTMLDivElement>;
 }
 
@@ -38,6 +40,7 @@ export function ReferenceEntry({
   onOpenResource,
   annotateMode = true,
   isGenerating = false,
+  sparkle = false,
   ref,
 }: ReferenceEntryProps) {
   const t = useTranslations('ReferencesPanel');
@@ -117,7 +120,7 @@ export function ReferenceEntry({
       data-type="reference"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        session?.client.browse.click(reference.id, reference.motivation);
+        session?.client.browse.click(reference.id);
       }}
       {...hoverProps}
     >
@@ -125,7 +128,7 @@ export function ReferenceEntry({
       <div className="semiont-annotation-entry__header">
         <div className="semiont-reference-icon-group">
           <button
-            className={`semiont-reference-icon${iconIsClickable ? ' semiont-reference-icon--clickable' : ''}`}
+            className={`semiont-reference-icon${iconIsClickable ? ' semiont-reference-icon--clickable' : ''}${sparkle ? ' annotation-sparkle' : ''}`}
             title={isResolved ? t('open') : annotateMode ? t('resolve') : t('stub')}
             onClick={iconIsClickable ? handleIconClick : undefined}
             data-generating={!isResolved && isGenerating ? 'true' : 'false'}
@@ -151,7 +154,11 @@ export function ReferenceEntry({
           )}
           {!selectedText && (
             <div className="semiont-annotation-entry__meta">
-              {annotationType}
+              {/* A resource-level annotation with a resolved, named target is
+                  a derivation (the shape generation mints — the vocabulary
+                  deliberately has no 'deriving' purpose): qualify the link
+                  line below instead of showing the generic type label. */}
+              {!selector && resolvedDocumentName ? t('derived') : annotationType}
             </div>
           )}
           {resolvedDocumentName && (

package/src/components/resource/panels/ReferencesPanel.css

@@ -37,30 +37,18 @@
   margin-bottom: var(--semiont-panel-header-margin-bottom);
 }
 
-[data-theme="dark"] .semiont-references-panel__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-references-panel__path {
   font-size: var(--semiont-text-sm);
   color: var(--semiont-text-tertiary);
   margin-top: var(--semiont-panel-padding-xs);
 }
 
-[data-theme="dark"] .semiont-references-panel__path {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-references-panel__count {
   font-size: var(--semiont-text-sm);
   color: var(--semiont-text-tertiary);
   margin-top: var(--semiont-panel-padding-xs);
 }
 
-[data-theme="dark"] .semiont-references-panel__count {
-  color: var(--semiont-text-tertiary);
-}
-
 /* Reference Icon Group — status icon + hover-reveal unlink */
 .semiont-reference-icon-group {
   position: relative;

package/src/components/resource/panels/ReferencesPanel.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { assistProgressTranslations } from '../../../lib/assist-progress-copy';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import type { SemiontSession } from '@semiont/sdk';
 import { useSessionEventSubscriptions } from '../../../hooks/useSessionEventSubscriptions';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import { AssistShell } from './AssistShell';
-import { EntityFoundLog } from '../../EntityFoundLog';
+import { ItemFoundLog } from '../../ItemFoundLog';
 import { ReferenceEntry } from './ReferenceEntry';
 import type { components, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
@@ -82,6 +83,8 @@ interface Props {
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
   hoveredAnnotationId?: string | null;
+  /** Annotations currently sparkling (recently created or resolved) — entries in the set glow their icon (RESOLUTION-SPARKLE D6). */
+  sparkleAnnotationIds?: Set<string>;
 
   /** User UI locale — stamped on the unresolved-reference body's `language` field. */
   locale?: string;
@@ -118,6 +121,7 @@ export function ReferencesPanel({
   scrollToAnnotationId,
   onScrollCompleted,
   hoveredAnnotationId,
+  sparkleAnnotationIds,
   locale,
   sourceLanguage,
 }: Props) {
@@ -126,7 +130,7 @@ export function ReferencesPanel({
   // lives in one namespace so the same words aren't re-translated per panel.
   const ta = useTranslations('AssistProgress');
   const [selectedEntityTypes, setSelectedEntityTypes] = useState<string[]>([]);
-  const [lastAnnotationLog, setLastDetectionLog] = useState<Array<{ entityType: string; foundCount: number }> | null>(null);
+  const [lastAnnotationLog, setLastDetectionLog] = useState<Array<{ value: string; foundCount: number }> | null>(null);
   const [pendingEntityTypes, setPendingEntityTypes] = useState<string[]>([]);
   const [includeDescriptiveReferences, setIncludeDescriptiveReferences] = useState(false);
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
@@ -243,8 +247,8 @@ export function ReferencesPanel({
 
   // Save detection log when detection completes
   // Only depends on isAssisting boolean to avoid infinite loops from array reference changes
-  // Trade-off: If completedEntityTypes changes while isAssisting stays false, we won't update
-  // This is acceptable because in practice, completedEntityTypes only changes when annotation finishes
+  // Trade-off: If completedItems changes while isAssisting stays false, we won't update
+  // This is acceptable because in practice, completedItems only changes when annotation finishes
   useEffect(() => {
     // When annotation starts, reset the flag
     if (isAssisting) {
@@ -253,12 +257,12 @@ export function ReferencesPanel({
     }
 
     // When annotation is complete and we haven't saved yet, save the log
-    if (!hasSavedLogRef.current && progress?.completedEntityTypes) {
+    if (!hasSavedLogRef.current && progress?.completedItems) {
       hasSavedLogRef.current = true;
-      setLastDetectionLog(progress.completedEntityTypes);
+      setLastDetectionLog(progress.completedItems);
       setSelectedEntityTypes([]);
     }
-  }, [isAssisting, progress?.completedEntityTypes]); // Both dependencies needed to annotation completion
+  }, [isAssisting, progress?.completedItems]); // Both dependencies needed to annotation completion
 
   const togglePendingEntityType = (type: string) => {
     setPendingEntityTypes(prev =>
@@ -371,24 +375,15 @@ export function ReferencesPanel({
             progressProps={{
               onCancel: () => session?.client.job.cancelRequest('annotation'),
               onDismiss: () => session?.client.mark.dismissProgress(),
-              translations: {
-                title: t('annotationProgressTitle'),
-                cancel: t('cancelAnnotation'),
-                inProgress: t('annotating'),
-                complete: t('complete'),
-                failed: t('failed'),
-                found: (count) => t('found', { count }),
-                current: (entityType) => t('current', { entityType }),
-                paramsTitle: ta('paramsTitle'),
-                processing: (label) => ta('processing', { label }),
-                close: ta('close'),
-              },
+              translations: assistProgressTranslations(ta, {
+                found: (count: number) => t('found', { count }),
+              }),
             }}
             form={
               <>
                 {/* Completed annotation log - shown after completion */}
                 {lastAnnotationLog && (
-                  <EntityFoundLog
+                  <ItemFoundLog
                     entries={lastAnnotationLog}
                     formatFound={(count) => t('found', { count })}
                   />
@@ -491,6 +486,7 @@ export function ReferencesPanel({
                   onOpenResource={onOpenResource}
                   annotateMode={annotateMode}
                   isGenerating={reference.id === generatingReferenceId}
+                  sparkle={sparkleAnnotationIds?.has(reference.id) ?? false}
                   ref={(el) => setEntryRef(reference.id, el)}
                 />
               ))

package/src/components/resource/panels/ResourceInfoPanel.css

@@ -21,10 +21,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-resource-info-panel__section {
   margin-bottom: var(--semiont-panel-gap);
 }
@@ -40,28 +36,16 @@
   margin-bottom: var(--semiont-panel-gap-sm);
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__heading {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-resource-info-panel__value {
   font-size: var(--semiont-text-sm);
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__value {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-resource-info-panel__value--empty {
   color: var(--semiont-text-tertiary);
   font-style: italic;
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__value--empty {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-resource-info-panel__metric {
   display: flex;
   align-items: center;
@@ -78,20 +62,12 @@
   font-size: var(--semiont-text-sm);
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__metric-label {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-resource-info-panel__metric-value {
   color: var(--semiont-text-primary);
   font-size: var(--semiont-text-sm);
   font-weight: var(--semiont-font-medium);
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__metric-value {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-resource-info-panel__tags {
   display: flex;
   flex-wrap: wrap;
@@ -142,10 +118,6 @@
   margin-right: var(--semiont-panel-gap-sm);
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__label {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-resource-info-panel__tag-list {
   display: flex;
   flex-wrap: wrap;
@@ -169,10 +141,6 @@
   line-height: 1.5;
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__description {
-  color: var(--semiont-text-tertiary);
-}
-
 /* Resource Info Panel Buttons */
 .semiont-resource-button {
   width: 100%;

package/src/components/resource/panels/ResourceInfoPanel.tsx

@@ -1,13 +1,17 @@
 'use client';
 
 import { useTranslations } from '../../../contexts/TranslationContext';
-import type { SemiontSession } from '@semiont/sdk';
+import { readyValue, type SemiontSession, type YieldOutcome } from '@semiont/sdk';
 import { formatLocaleDisplay } from '@semiont/core';
 import { resourceId as makeResourceId, type components } from '@semiont/core';
+import { useObservable } from '../../../hooks/useObservable';
 import { renderAgentLabel } from './agent-label';
+import { AssistShell } from './AssistShell';
+import { assistProgressTranslations } from '../../../lib/assist-progress-copy';
 import './ResourceInfoPanel.css';
 
 type Agent = components['schemas']['Agent'];
+type JobProgress = components['schemas']['JobProgress'];
 
 interface Props {
   /** Session carrying the client and event bus; null renders inert. */
@@ -30,6 +34,17 @@ interface Props {
    * to a verb). Omit to hide the Generate action.
    */
   onGenerate?: () => void;
+  /**
+   * Generation lifecycle, page-held (`yield.isGenerating$` / `yield.progress$`
+   * / `yield.outcome$`): this panel is generation's progress surface
+   * (GENERATE-FROM-RESOURCE D7) — the run reports where it was started.
+   */
+  isGenerating?: boolean;
+  generationProgress?: JobProgress | null;
+  /** The finished run's result; the ended frame links it by name (D8). */
+  generationOutcome?: YieldOutcome | null;
+  /** Clear the finished display — wires `yield.dismissProgress()`. */
+  onDismissProgress?: () => void;
 }
 
 /**
@@ -54,8 +69,13 @@ export function ResourceInfoPanel({
   wasDerivedFrom,
   generator,
   onGenerate,
+  isGenerating = false,
+  generationProgress = null,
+  generationOutcome = null,
+  onDismissProgress,
 }: Props) {
   const t = useTranslations('ResourceInfoPanel');
+  const ta = useTranslations('AssistProgress');
 
   // Single attribution surface. `wasAttributedTo` is the canonical list
   // of responsible parties; if a producer set only `generator` we
@@ -152,13 +172,7 @@ export function ResourceInfoPanel({
                 <span className="semiont-resource-info-panel__label">{t('derivedFrom')}</span>
                 <span className="semiont-resource-info-panel__value">
                   {(Array.isArray(wasDerivedFrom) ? wasDerivedFrom : [wasDerivedFrom]).map((id, i) => (
-                    <button
-                      key={id}
-                      className="semiont-resource-info-panel__link"
-                      onClick={() => session?.client.browse.navigateReference(makeResourceId(id))}
-                    >
-                      {i > 0 && ', '}{id}
-                    </button>
+                    <DerivedFromLink key={id} session={session} id={id} first={i === 0} />
                   ))}
                 </span>
               </div>
@@ -185,19 +199,47 @@ export function ResourceInfoPanel({
         </div>
       )}
 
-      {/* Generate Action — opens the resource-generate flow (UI-only) */}
+      {/* Generate — the run reports where it was started (GENERATE-FROM-RESOURCE
+          D7): the same AssistShell every assist uses, its form the Generate
+          control, the progress frame in its place while a generation runs. */}
       {onGenerate && (
-        <div className="semiont-resource-info-panel__action-section">
-          <button
-            onClick={onGenerate}
-            className="semiont-resource-button semiont-resource-button--secondary"
-          >
-            ✨ {t('generate')}
-          </button>
-          <p className="semiont-resource-info-panel__description">
-            {t('generateDescription')}
-          </p>
-        </div>
+        <AssistShell
+          assistType="generation"
+          title={t('generate')}
+          isAssisting={isGenerating}
+          progress={generationProgress}
+          progressProps={{
+            onCancel: () => session?.client.job.cancelRequest('generation'),
+            ...(onDismissProgress ? { onDismiss: onDismissProgress } : {}),
+            ...(generationOutcome ? {
+              outcome: {
+                label: generationOutcome.resourceName,
+                onOpen: () => session?.client.browse.openResource(generationOutcome.resourceId),
+              },
+              // The terminal sentence derives from the OUTCOME, not the final
+              // progress frame — whose fire-and-forget emit can lose the race
+              // with job:complete and leave "creating…" beside a ✅
+              // (GENERATION-ARRIVAL D4/D5).
+              endedMessage: generationOutcome.truncated
+                ? ta('codeCompleteGeneratedTruncated')
+                : ta('codeCompleteGenerated'),
+            } : {}),
+            translations: assistProgressTranslations(ta),
+          }}
+          form={
+            <>
+              <button
+                onClick={onGenerate}
+                className="semiont-resource-button semiont-resource-button--secondary"
+              >
+                ✨ {t('generate')}
+              </button>
+              <p className="semiont-resource-info-panel__description">
+                {t('generateDescription')}
+              </p>
+            </>
+          }
+        />
       )}
 
       {/* Clone Action */}
@@ -244,3 +286,30 @@ export function ResourceInfoPanel({
     </div>
   );
 }
+
+/**
+ * One derived-from entry: linked by id (wire identity), labeled by the source
+ * resource's NAME once `browse.resource` serves its descriptor. The raw id is
+ * the honest label until then — and stays if the descriptor never resolves
+ * (deleted source, no session). Own component because the id list maps in a
+ * loop and the subscription is a hook.
+ */
+function DerivedFromLink({ session, id, first }: {
+  session: SemiontSession | null;
+  id: string;
+  first: boolean;
+}) {
+  // `browse.resource` is stable per id (cache + scope wrappers memoize), so
+  // subscribing straight off the render read is safe; `failed` is an emission,
+  // never a stream error, so `readyValue` covers every unresolved state.
+  const descriptor = useObservable(session ? session.client.browse.resource(makeResourceId(id)) : null);
+  const name = descriptor ? readyValue(descriptor)?.name : undefined;
+  return (
+    <button
+      className="semiont-resource-info-panel__link"
+      onClick={() => session?.client.browse.openResource(makeResourceId(id))}
+    >
+      {!first && ', '}{name ?? id}
+    </button>
+  );
+}