@almadar/std 16.238.0 → 16.239.0

package/behaviors/lolo/agent/atoms/std-agent-tool-loop.lolo

@@ -1,5 +1,5 @@
 app std-agent-tool-loop "2.0.0"
-"std-agent-tool-loop — answers a conversation by operating the running app as the caller, through `call-service llm call-tools`. The `tools` allowlist names declared external inputs (addressed like a listens source: `Trait.EVENT`, `Orbital.Trait.EVENT`) and entities to read; each input fires as the signed-in user through the ordinary dispatch (guards and entity policies apply) and each read returns only the rows the caller may read. Headless: the conversation UI (std-agent-session) shows the reply; a failure shows as a toast. CONVERSE carries the conversation (and optionally what std-agent-memory recalled); REPLIED carries the reply, every tool step and the token usage; REPLY_FAILED carries the error. Compose with std-agent-session (the conversation) and std-agent-trace (the step record)."
+"std-agent-tool-loop — answers a conversation by operating the running app as the caller, through `call-service llm call-tools`. The `tools` allowlist names declared external inputs (addressed like a listens source: `Trait.EVENT`, `Orbital.Trait.EVENT`) and entities to read; each input fires as the signed-in user through the ordinary dispatch (guards and entity policies apply) and each read returns only the rows the caller may read. Headless: the conversation UI (std-agent-session) shows the reply; a failure shows as a toast. CONVERSE carries the conversation (and optionally what std-agent-memory recalled); STEP carries each step live while it works (a model call, a tool it used, what the app answered) to the asking tab; REPLIED carries the reply, every step and the token usage; REPLY_FAILED carries the error. Compose with std-agent-session (the conversation) and std-agent-trace (the step record)."
 
 type AgentTool = {
   event : event
@@ -9,13 +9,46 @@ type AgentChatMessage = {
   role : "user" | "assistant"
   content : string!
 }
-type AgentStep = {
-  kind : "input" | "read" | "invalid"
-  target : string!
-  args : string!
-  ok : boolean!
+type AgentToolKind = "input" | "read" | "invalid"
+type AgentToolCallActivity = {
+  type : "tool_call"!
+  tool : string!
+  kind : AgentToolKind
+  argsText : string!
+  timestamp : number!
+  isExecuting : boolean
+}
+type AgentToolResultActivity = {
+  type : "tool_result"!
+  tool : string!
+  kind : AgentToolKind
+  success : boolean!
   detail : string
+  rows : number
+  resultText : string!
+  timestamp : number!
+}
+type AgentLlmCall = {
+  service : string!
+  provider : string!
+  model : string!
+  systemPrompt : string!
+  userPrompt : string!
+  toolCallsJson : string
+  attempt : number
+  durationMs : number!
+  promptTokens : number
+  completionTokens : number
+  cachedPromptTokens : number
+  costUSD : number
+}
+type AgentLlmResponseActivity = {
+  type : "llm_response"!
+  content : string!
+  llm : AgentLlmCall
+  timestamp : number!
 }
+type AgentActivity = AgentToolCallActivity | AgentToolResultActivity | AgentLlmResponseActivity
 type AgentUsage = {
   promptTokens : number!
   completionTokens : number!
@@ -61,7 +94,7 @@ orbital AgentToolLoopOrbital {
           instructions: (if ["=", (str/default ?context ""), ""] @config.instructions (str/concat @config.instructions "\n\nWhat you remember that may be relevant:\n" ?context))
           maxSteps: @config.maxSteps
         } {
-          emit: { failure: ASK_FAILED, success: ANSWERED }
+          emit: { failure: ASK_FAILED, success: ANSWERED, onMessage: STEP }
         })
     }
 
@@ -82,9 +115,15 @@ orbital AgentToolLoopOrbital {
     }
 
     emits {
+      STEP -> external {
+        activity : AgentActivity!
+      }
+        @description "One thing the assistant just did, live while it works: a model call, a tool it used, or what the app answered. Delivered to the asking tab only."
+        @synonyms "progress, activity, trace step, working"
+        @tier "domain"
       REPLIED -> external {
         reply : string!
-        steps : [AgentStep]!
+        steps : [AgentActivity]!
         usage : AgentUsage!
       }
         @description "The assistant answered; carries every tool step it took and the tokens it used."
@@ -98,7 +137,7 @@ orbital AgentToolLoopOrbital {
         @tier "domain"
       ANSWERED -> internal {
         reply : string!
-        steps : [AgentStep]!
+        steps : [AgentActivity]!
         usage : AgentUsage!
       }
         @tier "internal"

package/behaviors/lolo/agent/atoms/std-agent-trace.lolo

@@ -1,13 +1,46 @@
 app std-agent-trace "2.0.0"
-"std-agent-trace — the persisted record of what an in-app assistant did. Each REPLIED (from std-agent-tool-loop) stores one AgentRun row: the reply, every tool step (which input or entity, the arguments, whether it took effect and why not), the tokens and the model calls; each REPLY_FAILED stores a failed run with its error. The record verification grades and later optimisation reads, in one format for tests and production. AgentTraceRecorder is headless; AgentRunBrowse is the run list. Rows carry ownerId (the real @user); the binding organism scopes @read."
+"std-agent-trace — the persisted record of what an in-app assistant did. Each REPLIED (from std-agent-tool-loop) stores one AgentRun row: the reply, every step (each model call, each tool used with its arguments, whether it took effect and why not), the tokens and the model calls; each REPLY_FAILED stores a failed run with its error. The record verification grades and later optimisation reads, in one format for tests and production. AgentTraceRecorder is headless; AgentRunBrowse is the run list. Rows carry ownerId (the real @user); the binding organism scopes @read."
 
-type AgentStep = {
-  kind : "input" | "read" | "invalid"
-  target : string!
-  args : string!
-  ok : boolean!
+type AgentToolKind = "input" | "read" | "invalid"
+type AgentToolCallActivity = {
+  type : "tool_call"!
+  tool : string!
+  kind : AgentToolKind
+  argsText : string!
+  timestamp : number!
+  isExecuting : boolean
+}
+type AgentToolResultActivity = {
+  type : "tool_result"!
+  tool : string!
+  kind : AgentToolKind
+  success : boolean!
   detail : string
+  rows : number
+  resultText : string!
+  timestamp : number!
+}
+type AgentLlmCall = {
+  service : string!
+  provider : string!
+  model : string!
+  systemPrompt : string!
+  userPrompt : string!
+  toolCallsJson : string
+  attempt : number
+  durationMs : number!
+  promptTokens : number
+  completionTokens : number
+  cachedPromptTokens : number
+  costUSD : number
 }
+type AgentLlmResponseActivity = {
+  type : "llm_response"!
+  content : string!
+  llm : AgentLlmCall
+  timestamp : number!
+}
+type AgentActivity = AgentToolCallActivity | AgentToolResultActivity | AgentLlmResponseActivity
 type AgentUsage = {
   promptTokens : number!
   completionTokens : number!
@@ -25,7 +58,7 @@ orbital AgentTraceOrbital {
     outcome : "answered" | "failed" @description "Whether the assistant answered." @synonyms "result, status" = answered
     reply : string @description "What the assistant said." @synonyms "answer, response" = ""
     error : string @description "Why the run failed." = ""
-    steps : [AgentStep] @description "Every tool use, in order." @synonyms "actions, tool calls, trace" = []
+    steps : [AgentActivity] @description "Every step, in order: each model call, each tool used and what the app answered." @synonyms "actions, tool calls, trace" = []
     promptTokens : number @description "Tokens sent to the model." = 0
     completionTokens : number @description "Tokens the model produced." = 0
     totalTokens : number @description "All tokens for the run." = 0
@@ -76,7 +109,7 @@ orbital AgentTraceOrbital {
     listens {
       REPLIED {
         reply : string!
-        steps : [AgentStep]!
+        steps : [AgentActivity]!
         usage : AgentUsage!
       }
         @description "Record an answered run."
@@ -116,6 +149,10 @@ orbital AgentTraceOrbital {
               content: (str/concat @item.modelCalls " model calls, " @item.totalTokens " tokens")
               type: typography
               variant: caption
+            }, {
+              activities: @item.steps
+              followLatest: false
+              type: agent-activity-feed
             }]
             direction: vertical
             gap: xs

package/behaviors/lolo/agent/organisms/std-agent-assistant.lolo

@@ -1,5 +1,5 @@
-app std-agent-assistant "1.0.0"
-"std-agent-assistant — an in-app assistant that operates the running app for the signed-in user. One request flows down a chain of std agent atoms on the bus: the conversation (std-agent-session) SENDs → CONVERSE → std-agent-context bounds it → std-agent-memory adds what it recalls → std-agent-tool-loop answers it through `call-service llm call-tools`, firing only the inputs and reading only the entities the `tools` allowlist names, as the signed-in user → REPLIED goes back to the conversation, to memory (remembered) and to std-agent-trace (the run record). Import the orbital and supply the allowlist: `orbital Assistant = Agent.orbitals.AgentAssistantOrbital { config { tools: [{ event: TaskOrbital.TaskPersistor.DO_CREATE }, { read: Task }], instructions: \"…\" } }`. The conversation, memory and run records live in AgentRecordsOrbital; retarget them onto your own owner-scoped entities (`ownerId` a relation to your [identity] roster, with @read/@create) with `entities { AgentMessage: …, AgentMemory: …, AgentRun: … }`."
+app std-agent-assistant "2.0.0"
+"std-agent-assistant — an in-app assistant that operates the running app for the signed-in user. A floating button opens it in a side panel docked beside the page (std-panel-launcher; a side sheet on small screens), where the conversation shows every step the assistant takes live as it works. List AssistantDock with the assistant's traits on each page that should carry the button. One request flows down a chain of std agent atoms on the bus: the conversation (std-agent-session) SENDs → CONVERSE → std-agent-context bounds it → std-agent-memory adds what it recalls → std-agent-tool-loop answers it through `call-service llm call-tools`, firing only the inputs and reading only the entities the `tools` allowlist names, as the signed-in user → REPLIED goes back to the conversation, to memory (remembered) and to std-agent-trace (the run record). Import the orbital and supply the allowlist: `orbital Assistant = Agent.orbitals.AgentAssistantOrbital { config { tools: [{ event: TaskOrbital.TaskPersistor.DO_CREATE }, { read: Task }], instructions: \"…\" } }`. The conversation, memory and run records live in AgentRecordsOrbital; retarget them onto your own owner-scoped entities (`ownerId` a relation to your [identity] roster, with @read/@create) with `entities { AgentMessage: …, AgentMemory: …, AgentRun: … }`."
 
 type AgentTool = {
   event : event
@@ -16,6 +16,7 @@ orbital AgentAssistantOrbital {
   uses Memory from "std/behaviors/std-agent-memory"
   uses Loop from "std/behaviors/std-agent-tool-loop"
   uses Trace from "std/behaviors/std-agent-trace"
+  uses Launcher from "std/behaviors/std-panel-launcher"
 
   config {
     tools : [AgentTool] = []
@@ -41,6 +42,13 @@ orbital AgentAssistantOrbital {
       @label "Links above the conversation"
       @description "The pages showing the assistant's run history and memory."
       @tier "presentation"
+    title : string = "Assistant"
+      @label "Panel title"
+      @tier "presentation"
+    buttonLabel : string = "Open the assistant"
+      @label "Button label"
+      @description "What the floating button does, read to screen readers and shown as its tooltip."
+      @tier "presentation"
   }
 
   entity AgentAssistant [runtime] {
@@ -48,21 +56,37 @@ orbital AgentAssistantOrbital {
   }
 
   trait AssistantThread = Session.traits.AgentThread -> AgentMessage {
-    config {
-      links: @config.links
-    }
     events {
       CONVERSE: REQUEST_CONTEXT
     }
     listens {
-      SEND {
-        message : string!
-      }
+      AssistantConversation.SEND -> SEND
+      AssistantLoop.REPLIED -> REPLIED
+    }
+  }
+
+  trait AssistantConversation = Session.traits.AgentConversation {
+    config {
+      links: @config.links
+    }
+    listens {
+      AssistantThread.AgentMessagesLoaded -> THREAD_LOADED
+      AssistantThread.THREAD_FAILED -> REPLY_FAILED
+      AssistantLoop.STEP -> STEP
       AssistantLoop.REPLIED -> REPLIED
       AssistantLoop.REPLY_FAILED -> REPLY_FAILED
     }
   }
 
+  trait AssistantDock = Launcher.traits.PanelLauncher {
+    config {
+      contentTrait: @trait.AssistantConversation
+      title: @config.title
+      label: @config.buttonLabel
+      icon: message-circle
+    }
+  }
+
   trait AssistantContext = Context.traits.AgentContextCompactor {
     config {
       keepMessages: @config.keepMessages
@@ -100,7 +124,7 @@ orbital AgentAssistantOrbital {
     }
   }
 
-  page "/assistant" as AssistantPage -> AssistantThread, AssistantContext, AssistantMemory, AssistantLoop, AssistantTrace
+  page "/assistant" as AssistantPage -> AssistantDock, AssistantThread, AssistantContext, AssistantMemory, AssistantLoop, AssistantTrace
 }
 
 ;; The assistant's records live outside AgentAssistantOrbital, so a consumer

package/behaviors/lolo/ui/avl/atoms/ui-avl-glyph.lolo

@@ -20,6 +20,7 @@ orbital AvlGlyphOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -47,7 +48,7 @@ orbital AvlGlyphOrbital {
         @label "Label"
         @description "Caption, and the drawn text for operator / literal / bindingRef symbols."
         @tier "presentation"
-      effectType : string
+      effectType : string = set
         @label "Effect Type"
         @description "Effect symbol variant. @default 'set'"
         @tier "presentation"
@@ -71,6 +72,10 @@ orbital AvlGlyphOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/avl/atoms/ui-avl-state-machine.lolo

@@ -60,6 +60,7 @@ orbital AvlStateMachineOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -161,6 +162,10 @@ orbital AvlStateMachineOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/.hand-authored.json

@@ -79,10 +79,6 @@
     "signature": "b6d780174cc19310",
     "board": "packages/almadar-std/behaviors/lolo/ui/core/atoms/std-image-upload-multi.lolo"
   },
-  "std-list": {
-    "signature": "ece46e2df57db77d",
-    "board": "packages/almadar-std/behaviors/lolo/ui/core/atoms/std-list.lolo"
-  },
   "std-modal": {
     "signature": "e8718a24813236d8",
     "board": "packages/almadar-std/behaviors/lolo/ui/core/atoms/std-modal.lolo"

package/behaviors/lolo/ui/core/atoms/std-billable-hour.lolo

@@ -59,17 +59,26 @@ orbital BillableHourOrbital {
         })
       BillableHourLoaded -> browsing
         (render-ui main {
-          children: [{
-            align: center
-            children: [{ name: clock, size: lg, type: icon }, {
-              content: @config.title
-              type: typography
-              variant: h3
-            }]
-            direction: horizontal
-            gap: sm
+          children: [(if @config.showHeader {
+            children: [{
+              align: center
+              children: [{ name: clock, size: lg, type: icon }, {
+                content: @config.title
+                type: typography
+                variant: h3
+              }]
+              direction: horizontal
+              gap: sm
+              type: stack
+            }, { type: divider }]
+            direction: vertical
+            gap: md
             type: stack
-          }, { type: divider }, {
+          } {
+            children: []
+            gap: none
+            type: stack
+          }), {
             children: [@trait.DenseHoursTable]
             className: overflow-x-auto
             direction: vertical
@@ -367,6 +376,10 @@ orbital BillableHourOrbital {
     }
 
     config {
+      showHeader : boolean = true
+        @label "Show the list's own title row?"
+        @description "Off when the page already carries a page header naming the same thing, so the page shows one title."
+        @tier "presentation"
       title : string = "Time Entries"
         @label "Section title"
         @description "Heading shown above the time-entries list"

package/behaviors/lolo/ui/core/atoms/std-browse.lolo

@@ -1,7 +1,7 @@
 app std-browse "2.5.0"
 "std-browse as a Function — single primitive: data-grid. Owns the fetch + REFETCH (query/filter/page) state machine. Consumers configure fields/imageField/itemActions/cols/gap/variant; the atom renders the grid. Each `fields[]` entry accepts `{ name, label, variant }` plus optional `referenceEntity` + `displayField` to render a foreign-key column as the joined entity's display value (data-grid resolves @list[referenceEntity] at render time when both keys are present). `browseLook` (table default / dense / feed / gallery / master-detail / triage) selects one of six render bodies; dense/feed/gallery were folded in from std-browse-dense/-feed/-gallery (Phase 5.B); master-detail (split record view driven by the guarded VIEW/CLOSE self-transitions) and triage (inbox rows) were folded in 2026-07-26. Consumers retarget by setting browseLook."
 type BadgeColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral" | "destructive"
-type FieldSpec = { name : string!, label : string, variant : h3 | h4 | body | caption | badge | small | progress, icon : string, format : date | currency | number | boolean | percent, key : string, header : string, colorMap : Map string BadgeColor, labels : Map string string }
+type FieldSpec = { name : string!, label : string, variant : h3 | h4 | overline | avatar | body | caption | badge | small | progress, icon : string, format : date | time | datetime | currency | number | boolean | percent, key : string, header : string, colorMap : Map string BadgeColor, labels : Map string string }
 type ItemAction = { label : string!, event : event, navigatesTo : string, variant : primary | secondary | ghost | danger, icon : string, roles : [string], when : SExpr }
 type ColumnSpec = { key : string!, field : string, header : string, width : string, align : left | center | right, className : string, weight : normal | medium | semibold, format : badge | date | currency | number | percent | boolean, icon : string, colorMap : Map string BadgeColor, labels : Map string string, variant : h3 | h4 }
 type FilterSpec = { field : string!, label : string, options : [string] }
@@ -48,8 +48,9 @@ orbital BrowseItemOrbital {
       itemActions: @config.itemActions
       viewerRole: @config.viewerRole
       itemClickEvent: @config.itemClickEvent
-      maxInlineActions: @config.maxInlineActions
+      maxInlineActions: 0
       variant: compact
+      surface: none
       selfFetch: false
     }
 
@@ -283,30 +284,16 @@ orbital BrowseItemOrbital {
         @description "Entity field containing the thumbnail URL for each row."
         @synonyms "image field, thumbnail field, photo field, picture column"
         @tier "presentation"
-      titleBinding : string = @item.name
-        @label "Title field binding"
-        @description "Binding path for the card title slot (e.g. @item.dishName)."
-        @tier "internal"
-      descriptionBinding : string = @item.description
-        @label "Description field binding"
-        @description "Binding path for the card body/subtitle slot."
-        @tier "internal"
-      badgeBinding : string = @item.status
-        @label "Badge field binding"
-        @description "Binding path for the status/badge slot."
-        @tier "internal"
-      metaBinding : string = @item.createdAt
-        @label "Meta field binding"
-        @description "Binding path for the secondary meta slot (timestamp / category). Hosts binding a count or other non-date value should label it in the binding itself (e.g. (str/concat \"Vehicles: \" @item.vehicleCount)) and set metaFormat: none."
-        @tier "internal"
-      metaFormat : "none" | "date" | "time" | "datetime" | "number" = date
-        @label "Meta value format"
-        @description "Typography format for the feed meta slot — date by default so the createdAt binding renders human-readable instead of raw ISO; set none for non-date bindings."
+      surface : "auto" | "none" = auto
+        @label "Paint a surface behind the list?"
+        @description "auto (default) draws the theme's content surface behind every look — on a patterned page background the list reads as one block; the theme decides how that surface looks. none places the list directly on the page (e.g. a list already inside a card or panel you composed)."
+        @synonyms "card background, panel, container, list background, no background, transparent, bare"
+        @tier "presentation"
+      feedSurface : "cards" | "divided" | "plain" = cards
+        @label "How are feed items separated?"
+        @description "browseLook = feed only. cards = each item its own raised card with space between (community posts, listings); divided = one surface with hairline rows (inboxes, answer lists, notes); plain = no chrome, items on the page background (editorial article lists, changelogs). What each item shows comes from `fields`: overline = eyebrow above the title, h3/h4 = title (its `icon` becomes a leading tile), caption = prose, small/body = meta line, badge = pill, avatar = leading initials."
+        @synonyms "feed style, item chrome, card per item, divided list, editorial list, rows or cards"
         @tier "presentation"
-      categoryBinding : string = @item.category
-        @label "Category field binding"
-        @description "Binding path for the category/tag slot."
-        @tier "internal"
       itemActions : [ItemAction] = []
         @label "What actions can users take on each row?"
         @description "Buttons rendered on each row (e.g. Edit, Delete, View)."
@@ -490,6 +477,7 @@ orbital BrowseItemOrbital {
           emptyDescription: @config.emptyDescription
           emptyIcon: @config.emptyIcon
           emptyTitle: @config.emptyTitle
+          surface: @config.surface
           type: data-grid
         }]
         direction: vertical
@@ -539,6 +527,7 @@ orbital BrowseItemOrbital {
             itemClickEvent: @config.itemClickEvent
             look: dense
             maxInlineActions: @config.maxInlineActions
+            surface: none
             pageSize: @config.displayPageSize
             selectable: @config.selectable
             emptyDescription: @config.emptyDescription
@@ -551,7 +540,7 @@ orbital BrowseItemOrbital {
           gap: none
           type: stack
         }]
-        className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] shadow-sm overflow-hidden"
+        className: (if ["=", @config.surface, "auto"] "surface-content overflow-hidden" "")
         direction: vertical
         gap: none
         type: stack
@@ -595,82 +584,19 @@ orbital BrowseItemOrbital {
           type: stack
         }), {
           entity: ?data
-          fields: []
-          gap: md
+          fields: @config.fields
+          gap: none
           itemClickEvent: @config.itemClickEvent
           itemActions: (array/filter @config.itemActions (fn item (or (= (array/len (object/get @item roles [])) 0) (array/includes (object/get @item roles []) @config.viewerRole))))
-          renderItem: (fn item {
-            children: [{
-              align: start
-              children: [{
-                className: "rounded-full flex-shrink-0"
-                fallback: @config.titleBinding
-                size: md
-                type: avatar
-              }, {
-                children: [{
-                  align: center
-                  children: [{
-                    className: truncate
-                    content: @config.titleBinding
-                    type: typography
-                    variant: body
-                    weight: medium
-                  }, {
-                    label: @config.categoryBinding
-                    size: sm
-                    type: badge
-                    variant: neutral
-                  }]
-                  className: flex-wrap
-                  direction: horizontal
-                  gap: xs
-                  type: stack
-                }, {
-                  className: "text-[var(--color-foreground)] whitespace-pre-wrap break-words leading-relaxed"
-                  content: @config.descriptionBinding
-                  type: typography
-                  variant: body
-                }, {
-                  align: center
-                  children: [{
-                    color: muted
-                    content: @config.metaBinding
-                    format: @config.metaFormat
-                    type: typography
-                    variant: caption
-                  }, {
-                    label: @config.badgeBinding
-                    size: sm
-                    type: badge
-                    variant: default
-                  }]
-                  className: pt-1
-                  direction: horizontal
-                  gap: sm
-                  justify: between
-                  type: stack
-                }]
-                className: "flex-1 min-w-0"
-                direction: vertical
-                gap: xs
-                type: stack
-              }]
-              className: p-card-md
-              direction: horizontal
-              gap: md
-              type: stack
-            }]
-            className: "rounded-lg bg-[var(--color-card)] border border-[var(--color-border)] shadow-sm transition-all duration-normal hover:shadow-main hover:border-[var(--color-border-strong)] hover:-translate-y-px"
-            look: flat-bordered
-            padding: none
-            type: card
-          })
+          look: (if ["=", @config.feedSurface, "cards"] card-rows borderless)
+          maxInlineActions: @config.maxInlineActions
           emptyDescription: @config.emptyDescription
           emptyIcon: @config.emptyIcon
           emptyTitle: @config.emptyTitle
+          pageSize: @config.displayPageSize
+          surface: (if ["=", @config.feedSurface, "plain"] none @config.surface)
           type: data-list
-          variant: card
+          variant: (if ["=", @config.feedSurface, "divided"] card default)
         }]
         className: w-full
         direction: vertical
@@ -678,7 +604,7 @@ orbital BrowseItemOrbital {
         type: stack
       }
         @label "Feed look body"
-        @description "Render-ui SExpr rendered after rows load when browseLook = feed. Chronological card-per-item stream with avatar, title, meta, body, timestamp; composes titleBinding/descriptionBinding/categoryBinding/badgeBinding/metaBinding/searchPlaceholder/itemActions. Folded from std-browse-feed (Phase 5.B)."
+        @description "Render-ui SExpr rendered after rows load when browseLook = feed. Chronological item stream on the same `fields` contract every look reads (roles: overline, h3/h4, caption, small/body, badge, avatar), separated per feedSurface. Folded from std-browse-feed (Phase 5.B)."
         @tier "internal"
       galleryBodyContent : render-ui = {
         children: [(if @config.bodySearch {
@@ -727,6 +653,7 @@ orbital BrowseItemOrbital {
           emptyDescription: @config.emptyDescription
           emptyIcon: @config.emptyIcon
           emptyTitle: @config.emptyTitle
+          surface: @config.surface
           type: data-grid
         }]
         className: w-full
@@ -780,6 +707,8 @@ orbital BrowseItemOrbital {
             emptyDescription: @config.emptyDescription
             emptyIcon: @config.emptyIcon
             emptyTitle: @config.emptyTitle
+            pageSize: @config.displayPageSize
+            surface: none
             type: data-list
             variant: compact
           }]
@@ -788,7 +717,7 @@ orbital BrowseItemOrbital {
           gap: none
           type: stack
         }]
-        className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] shadow-sm overflow-hidden"
+        className: (if ["=", @config.surface, "auto"] "surface-content overflow-hidden" "")
         direction: vertical
         gap: none
         type: stack
@@ -851,7 +780,7 @@ orbital BrowseItemOrbital {
           }
           type: master-detail-layout
         }]
-        className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] shadow-sm overflow-hidden"
+        className: (if ["=", @config.surface, "auto"] "surface-content overflow-hidden" "")
         direction: vertical
         gap: none
         type: stack
@@ -899,6 +828,7 @@ orbital BrowseItemOrbital {
             closeEvent: @config.detailCloseEvent
             initialData: ?row
             showActions: true
+            surface: none
             type: detail-panel
           }
           hasSelection: true
@@ -911,7 +841,7 @@ orbital BrowseItemOrbital {
           }
           type: master-detail-layout
         }]
-        className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] shadow-sm overflow-hidden"
+        className: (if ["=", @config.surface, "auto"] "surface-content overflow-hidden" "")
         direction: vertical
         gap: none
         type: stack

package/behaviors/lolo/ui/core/atoms/std-graphs.lolo

@@ -1,5 +1,5 @@
 app std-graphs "2.0.0"
-"std-graphs — embeddable chart atom. ITEMS_LOADED keeps the rows whose @config.filterField equals @config.filterValue (blank = all), groups them by @config.categoryField, or (timeAxis=true) by the @config.period bucket of @config.timeField — rows without a time value have no place on a time axis and are left out — and aggregates per bucket. Multi-series rendering via @config.series (preformatted ChartSeries shape). Histograms via chartType=histogram pass pre-binned @payload.data through unchanged. Stacked / 100% stacked bars via @config.stack. Post-process sort + limit. Clicking a data point emits UI:@config.drillEvent with { label, value, seriesLabel? }. Drop into a dashboard alongside std-stats / std-browse."
+"std-graphs — embeddable chart atom. ITEMS_LOADED keeps the rows whose @config.filterField equals @config.filterValue (blank = all), groups them by @config.categoryField, or (timeAxis=true) by the @config.period bucket of @config.timeField — rows without a time value (or, by category, without a category value) have no bucket to land in and are left out — and aggregates per bucket. Multi-series rendering via @config.series (preformatted ChartSeries shape). Histograms via chartType=histogram pass pre-binned @payload.data through unchanged. Stacked / 100% stacked bars via @config.stack. Post-process sort + limit. Clicking a data point emits UI:@config.drillEvent with { label, value, seriesLabel? }. Drop into a dashboard alongside std-stats / std-browse."
 type ObjectSpec = { id : string, label : string, value : string }
 orbital GraphItemOrbital {
     type ChartPoint = { label : string!, value : number! }
@@ -38,7 +38,7 @@ orbital GraphItemOrbital {
           (set @entity.chartData (if ["=", @config.chartType, histogram] (array/map @rows (fn p {
           label: (object/get @p label)
           value: (object/get @p value)
-        })) (array/map (object/entries (if @config.timeAxis (array/groupBy (array/map (array/filter @rows (fn row (object/get @row @config.timeField))) (fn row (object/set @row "periodStart" (time/startOf (time/parse (object/get @row @config.timeField)) @config.period)))) "periodStart") (array/groupBy @rows @config.categoryField))) (fn entry {
+        })) (array/map (object/entries (if @config.timeAxis (array/groupBy (array/map (array/filter @rows (fn row (object/get @row @config.timeField))) (fn row (object/set @row "periodStart" (time/startOf (time/parse (object/get @row @config.timeField)) @config.period)))) "periodStart") (array/groupBy (array/filter @rows (fn row (object/get @row @config.categoryField))) @config.categoryField))) (fn entry {
           label: (object/get @entry "0")
           value: (if ["=", @config.aggregation, sum] (array/sum (object/get @entry "1") @config.valueField) (if ["=", @config.aggregation, avg] (array/avg (object/get @entry "1") @config.valueField) (if ["=", @config.aggregation, min] (array/min (object/get @entry "1") @config.valueField) (if ["=", @config.aggregation, max] (array/max (object/get @entry "1") @config.valueField) (array/len (object/get @entry "1"))))))
         })))))