@vibe-forge/client 0.2.0-alpha.8 → 0.3.0

package/dist/assets/{xychartDiagram-f5964ef8-BRJ9Z4u-.js → xychartDiagram-f5964ef8-C3cbfVqN.js}

@@ -1,4 +1,4 @@
-import{s as zt,a as Ft,v as wt,x as Nt,b as Xt,c as Yt,l as St,aH as Ht,e as $t,z as Ut,ap as ot,aJ as Ct,aL as qt,aY as jt,i as Gt}from"./mermaid.core-Cabag9SZ.js";import{a as Qt}from"./createText-1719965b-ByfEqOF-.js";import"./index-CNMzWvKV.js";import{i as Kt}from"./init-Gi6I4Gst.js";import{o as Jt}from"./ordinal-Cboi1Yqb.js";import{l as ft}from"./linear-C4msxfcU.js";import{l as pt}from"./line-C7WAYMt5.js";import"./array-BKyUJesY.js";import"./path-CbwjOpE9.js";function Zt(e,t,i){e=+e,t=+t,i=(n=arguments.length)<2?(t=e,e=0,1):n<3?1:+i;for(var s=-1,n=Math.max(0,Math.ceil((t-e)/i))|0,o=new Array(n);++s<n;)o[s]=e+s*i;return o}function st(){var e=Jt().unknown(void 0),t=e.domain,i=e.range,s=0,n=1,o,c,f=!1,d=0,R=0,_=.5;delete e.unknown;function A(){var m=t().length,T=n<s,S=T?n:s,P=T?s:n;o=(P-S)/Math.max(1,m-d+R*2),f&&(o=Math.floor(o)),S+=(P-S-o*(m-d))*_,c=o*(1-d),f&&(S=Math.round(S),c=Math.round(c));var p=Zt(m).map(function(C){return S+o*C});return i(T?p.reverse():p)}return e.domain=function(m){return arguments.length?(t(m),A()):t()},e.range=function(m){return arguments.length?([s,n]=m,s=+s,n=+n,A()):[s,n]},e.rangeRound=function(m){return[s,n]=m,s=+s,n=+n,f=!0,A()},e.bandwidth=function(){return c},e.step=function(){return o},e.round=function(m){return arguments.length?(f=!!m,A()):f},e.padding=function(m){return arguments.length?(d=Math.min(1,R=+m),A()):d},e.paddingInner=function(m){return arguments.length?(d=Math.min(1,m),A()):d},e.paddingOuter=function(m){return arguments.length?(R=+m,A()):R},e.align=function(m){return arguments.length?(_=Math.max(0,Math.min(1,m)),A()):_},e.copy=function(){return st(t(),[s,n]).round(f).paddingInner(d).paddingOuter(R).align(_)},Kt.apply(A(),arguments)}var nt=function(){var e=function(V,r,l,u){for(l=l||{},u=V.length;u--;l[V[u]]=r);return l},t=[1,10,12,14,16,18,19,21,23],i=[2,6],s=[1,3],n=[1,5],o=[1,6],c=[1,7],f=[1,5,10,12,14,16,18,19,21,23,34,35,36],d=[1,25],R=[1,26],_=[1,28],A=[1,29],m=[1,30],T=[1,31],S=[1,32],P=[1,33],p=[1,34],C=[1,35],h=[1,36],L=[1,37],z=[1,43],lt=[1,42],ct=[1,47],$=[1,50],w=[1,10,12,14,16,18,19,21,23,34,35,36],Q=[1,10,12,14,16,18,19,21,23,24,26,27,28,34,35,36],v=[1,10,12,14,16,18,19,21,23,24,26,27,28,34,35,36,41,42,43,44,45,46,47,48,49,50],ut=[1,64],K={trace:function(){},yy:{},symbols_:{error:2,start:3,eol:4,XYCHART:5,chartConfig:6,document:7,CHART_ORIENTATION:8,statement:9,title:10,text:11,X_AXIS:12,parseXAxis:13,Y_AXIS:14,parseYAxis:15,LINE:16,plotData:17,BAR:18,acc_title:19,acc_title_value:20,acc_descr:21,acc_descr_value:22,acc_descr_multiline_value:23,SQUARE_BRACES_START:24,commaSeparatedNumbers:25,SQUARE_BRACES_END:26,NUMBER_WITH_DECIMAL:27,COMMA:28,xAxisData:29,bandData:30,ARROW_DELIMITER:31,commaSeparatedTexts:32,yAxisData:33,NEWLINE:34,SEMI:35,EOF:36,alphaNum:37,STR:38,MD_STR:39,alphaNumToken:40,AMP:41,NUM:42,ALPHA:43,PLUS:44,EQUALS:45,MULT:46,DOT:47,BRKT:48,MINUS:49,UNDERSCORE:50,$accept:0,$end:1},terminals_:{2:"error",5:"XYCHART",8:"CHART_ORIENTATION",10:"title",12:"X_AXIS",14:"Y_AXIS",16:"LINE",18:"BAR",19:"acc_title",20:"acc_title_value",21:"acc_descr",22:"acc_descr_value",23:"acc_descr_multiline_value",24:"SQUARE_BRACES_START",26:"SQUARE_BRACES_END",27:"NUMBER_WITH_DECIMAL",28:"COMMA",31:"ARROW_DELIMITER",34:"NEWLINE",35:"SEMI",36:"EOF",38:"STR",39:"MD_STR",41:"AMP",42:"NUM",43:"ALPHA",44:"PLUS",45:"EQUALS",46:"MULT",47:"DOT",48:"BRKT",49:"MINUS",50:"UNDERSCORE"},productions_:[0,[3,2],[3,3],[3,2],[3,1],[6,1],[7,0],[7,2],[9,2],[9,2],[9,2],[9,2],[9,2],[9,3],[9,2],[9,3],[9,2],[9,2],[9,1],[17,3],[25,3],[25,1],[13,1],[13,2],[13,1],[29,1],[29,3],[30,3],[32,3],[32,1],[15,1],[15,2],[15,1],[33,3],[4,1],[4,1],[4,1],[11,1],[11,1],[11,1],[37,1],[37,2],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1]],performAction:function(r,l,u,g,b,a,F){var x=a.length-1;switch(b){case 5:g.setOrientation(a[x]);break;case 9:g.setDiagramTitle(a[x].text.trim());break;case 12:g.setLineData({text:"",type:"text"},a[x]);break;case 13:g.setLineData(a[x-1],a[x]);break;case 14:g.setBarData({text:"",type:"text"},a[x]);break;case 15:g.setBarData(a[x-1],a[x]);break;case 16:this.$=a[x].trim(),g.setAccTitle(this.$);break;case 17:case 18:this.$=a[x].trim(),g.setAccDescription(this.$);break;case 19:this.$=a[x-1];break;case 20:this.$=[Number(a[x-2]),...a[x]];break;case 21:this.$=[Number(a[x])];break;case 22:g.setXAxisTitle(a[x]);break;case 23:g.setXAxisTitle(a[x-1]);break;case 24:g.setXAxisTitle({type:"text",text:""});break;case 25:g.setXAxisBand(a[x]);break;case 26:g.setXAxisRangeData(Number(a[x-2]),Number(a[x]));break;case 27:this.$=a[x-1];break;case 28:this.$=[a[x-2],...a[x]];break;case 29:this.$=[a[x]];break;case 30:g.setYAxisTitle(a[x]);break;case 31:g.setYAxisTitle(a[x-1]);break;case 32:g.setYAxisTitle({type:"text",text:""});break;case 33:g.setYAxisRangeData(Number(a[x-2]),Number(a[x]));break;case 37:this.$={text:a[x],type:"text"};break;case 38:this.$={text:a[x],type:"text"};break;case 39:this.$={text:a[x],type:"markdown"};break;case 40:this.$=a[x];break;case 41:this.$=a[x-1]+""+a[x];break}},table:[e(t,i,{3:1,4:2,7:4,5:s,34:n,35:o,36:c}),{1:[3]},e(t,i,{4:2,7:4,3:8,5:s,34:n,35:o,36:c}),e(t,i,{4:2,7:4,6:9,3:10,5:s,8:[1,11],34:n,35:o,36:c}),{1:[2,4],9:12,10:[1,13],12:[1,14],14:[1,15],16:[1,16],18:[1,17],19:[1,18],21:[1,19],23:[1,20]},e(f,[2,34]),e(f,[2,35]),e(f,[2,36]),{1:[2,1]},e(t,i,{4:2,7:4,3:21,5:s,34:n,35:o,36:c}),{1:[2,3]},e(f,[2,5]),e(t,[2,7],{4:22,34:n,35:o,36:c}),{11:23,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:39,13:38,24:z,27:lt,29:40,30:41,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:45,15:44,27:ct,33:46,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:49,17:48,24:$,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:52,17:51,24:$,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{20:[1,53]},{22:[1,54]},e(w,[2,18]),{1:[2,2]},e(w,[2,8]),e(w,[2,9]),e(Q,[2,37],{40:55,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L}),e(Q,[2,38]),e(Q,[2,39]),e(v,[2,40]),e(v,[2,42]),e(v,[2,43]),e(v,[2,44]),e(v,[2,45]),e(v,[2,46]),e(v,[2,47]),e(v,[2,48]),e(v,[2,49]),e(v,[2,50]),e(v,[2,51]),e(w,[2,10]),e(w,[2,22],{30:41,29:56,24:z,27:lt}),e(w,[2,24]),e(w,[2,25]),{31:[1,57]},{11:59,32:58,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},e(w,[2,11]),e(w,[2,30],{33:60,27:ct}),e(w,[2,32]),{31:[1,61]},e(w,[2,12]),{17:62,24:$},{25:63,27:ut},e(w,[2,14]),{17:65,24:$},e(w,[2,16]),e(w,[2,17]),e(v,[2,41]),e(w,[2,23]),{27:[1,66]},{26:[1,67]},{26:[2,29],28:[1,68]},e(w,[2,31]),{27:[1,69]},e(w,[2,13]),{26:[1,70]},{26:[2,21],28:[1,71]},e(w,[2,15]),e(w,[2,26]),e(w,[2,27]),{11:59,32:72,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},e(w,[2,33]),e(w,[2,19]),{25:73,27:ut},{26:[2,28]},{26:[2,20]}],defaultActions:{8:[2,1],10:[2,3],21:[2,2],72:[2,28],73:[2,20]},parseError:function(r,l){if(l.recoverable)this.trace(r);else{var u=new Error(r);throw u.hash=l,u}},parse:function(r){var l=this,u=[0],g=[],b=[null],a=[],F=this.table,x="",U=0,gt=0,Vt=2,xt=1,Bt=a.slice.call(arguments,1),k=Object.create(this.lexer),B={yy:{}};for(var Z in this.yy)Object.prototype.hasOwnProperty.call(this.yy,Z)&&(B.yy[Z]=this.yy[Z]);k.setInput(r,B.yy),B.yy.lexer=k,B.yy.parser=this,typeof k.yylloc>"u"&&(k.yylloc={});var tt=k.yylloc;a.push(tt);var Wt=k.options&&k.options.ranges;typeof B.yy.parseError=="function"?this.parseError=B.yy.parseError:this.parseError=Object.getPrototypeOf(this).parseError;function Ot(){var I;return I=g.pop()||k.lex()||xt,typeof I!="number"&&(I instanceof Array&&(g=I,I=g.pop()),I=l.symbols_[I]||I),I}for(var D,W,E,it,O={},q,M,dt,j;;){if(W=u[u.length-1],this.defaultActions[W]?E=this.defaultActions[W]:((D===null||typeof D>"u")&&(D=Ot()),E=F[W]&&F[W][D]),typeof E>"u"||!E.length||!E[0]){var et="";j=[];for(q in F[W])this.terminals_[q]&&q>Vt&&j.push("'"+this.terminals_[q]+"'");k.showPosition?et="Parse error on line "+(U+1)+`:
+import{s as zt,a as Ft,v as wt,x as Nt,b as Xt,c as Yt,l as St,aH as Ht,e as $t,z as Ut,ap as ot,aJ as Ct,aL as qt,aY as jt,i as Gt}from"./mermaid.core-CG3Ib42Q.js";import{a as Qt}from"./createText-1719965b-2XqnWjQY.js";import"./index-CNo75dYr.js";import{i as Kt}from"./init-Gi6I4Gst.js";import{o as Jt}from"./ordinal-Cboi1Yqb.js";import{l as ft}from"./linear-DzGV4E9N.js";import{l as pt}from"./line-9GUsXbwv.js";import"./array-BKyUJesY.js";import"./path-CbwjOpE9.js";function Zt(e,t,i){e=+e,t=+t,i=(n=arguments.length)<2?(t=e,e=0,1):n<3?1:+i;for(var s=-1,n=Math.max(0,Math.ceil((t-e)/i))|0,o=new Array(n);++s<n;)o[s]=e+s*i;return o}function st(){var e=Jt().unknown(void 0),t=e.domain,i=e.range,s=0,n=1,o,c,f=!1,d=0,R=0,_=.5;delete e.unknown;function A(){var m=t().length,T=n<s,S=T?n:s,P=T?s:n;o=(P-S)/Math.max(1,m-d+R*2),f&&(o=Math.floor(o)),S+=(P-S-o*(m-d))*_,c=o*(1-d),f&&(S=Math.round(S),c=Math.round(c));var p=Zt(m).map(function(C){return S+o*C});return i(T?p.reverse():p)}return e.domain=function(m){return arguments.length?(t(m),A()):t()},e.range=function(m){return arguments.length?([s,n]=m,s=+s,n=+n,A()):[s,n]},e.rangeRound=function(m){return[s,n]=m,s=+s,n=+n,f=!0,A()},e.bandwidth=function(){return c},e.step=function(){return o},e.round=function(m){return arguments.length?(f=!!m,A()):f},e.padding=function(m){return arguments.length?(d=Math.min(1,R=+m),A()):d},e.paddingInner=function(m){return arguments.length?(d=Math.min(1,m),A()):d},e.paddingOuter=function(m){return arguments.length?(R=+m,A()):R},e.align=function(m){return arguments.length?(_=Math.max(0,Math.min(1,m)),A()):_},e.copy=function(){return st(t(),[s,n]).round(f).paddingInner(d).paddingOuter(R).align(_)},Kt.apply(A(),arguments)}var nt=function(){var e=function(V,r,l,u){for(l=l||{},u=V.length;u--;l[V[u]]=r);return l},t=[1,10,12,14,16,18,19,21,23],i=[2,6],s=[1,3],n=[1,5],o=[1,6],c=[1,7],f=[1,5,10,12,14,16,18,19,21,23,34,35,36],d=[1,25],R=[1,26],_=[1,28],A=[1,29],m=[1,30],T=[1,31],S=[1,32],P=[1,33],p=[1,34],C=[1,35],h=[1,36],L=[1,37],z=[1,43],lt=[1,42],ct=[1,47],$=[1,50],w=[1,10,12,14,16,18,19,21,23,34,35,36],Q=[1,10,12,14,16,18,19,21,23,24,26,27,28,34,35,36],v=[1,10,12,14,16,18,19,21,23,24,26,27,28,34,35,36,41,42,43,44,45,46,47,48,49,50],ut=[1,64],K={trace:function(){},yy:{},symbols_:{error:2,start:3,eol:4,XYCHART:5,chartConfig:6,document:7,CHART_ORIENTATION:8,statement:9,title:10,text:11,X_AXIS:12,parseXAxis:13,Y_AXIS:14,parseYAxis:15,LINE:16,plotData:17,BAR:18,acc_title:19,acc_title_value:20,acc_descr:21,acc_descr_value:22,acc_descr_multiline_value:23,SQUARE_BRACES_START:24,commaSeparatedNumbers:25,SQUARE_BRACES_END:26,NUMBER_WITH_DECIMAL:27,COMMA:28,xAxisData:29,bandData:30,ARROW_DELIMITER:31,commaSeparatedTexts:32,yAxisData:33,NEWLINE:34,SEMI:35,EOF:36,alphaNum:37,STR:38,MD_STR:39,alphaNumToken:40,AMP:41,NUM:42,ALPHA:43,PLUS:44,EQUALS:45,MULT:46,DOT:47,BRKT:48,MINUS:49,UNDERSCORE:50,$accept:0,$end:1},terminals_:{2:"error",5:"XYCHART",8:"CHART_ORIENTATION",10:"title",12:"X_AXIS",14:"Y_AXIS",16:"LINE",18:"BAR",19:"acc_title",20:"acc_title_value",21:"acc_descr",22:"acc_descr_value",23:"acc_descr_multiline_value",24:"SQUARE_BRACES_START",26:"SQUARE_BRACES_END",27:"NUMBER_WITH_DECIMAL",28:"COMMA",31:"ARROW_DELIMITER",34:"NEWLINE",35:"SEMI",36:"EOF",38:"STR",39:"MD_STR",41:"AMP",42:"NUM",43:"ALPHA",44:"PLUS",45:"EQUALS",46:"MULT",47:"DOT",48:"BRKT",49:"MINUS",50:"UNDERSCORE"},productions_:[0,[3,2],[3,3],[3,2],[3,1],[6,1],[7,0],[7,2],[9,2],[9,2],[9,2],[9,2],[9,2],[9,3],[9,2],[9,3],[9,2],[9,2],[9,1],[17,3],[25,3],[25,1],[13,1],[13,2],[13,1],[29,1],[29,3],[30,3],[32,3],[32,1],[15,1],[15,2],[15,1],[33,3],[4,1],[4,1],[4,1],[11,1],[11,1],[11,1],[37,1],[37,2],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1],[40,1]],performAction:function(r,l,u,g,b,a,F){var x=a.length-1;switch(b){case 5:g.setOrientation(a[x]);break;case 9:g.setDiagramTitle(a[x].text.trim());break;case 12:g.setLineData({text:"",type:"text"},a[x]);break;case 13:g.setLineData(a[x-1],a[x]);break;case 14:g.setBarData({text:"",type:"text"},a[x]);break;case 15:g.setBarData(a[x-1],a[x]);break;case 16:this.$=a[x].trim(),g.setAccTitle(this.$);break;case 17:case 18:this.$=a[x].trim(),g.setAccDescription(this.$);break;case 19:this.$=a[x-1];break;case 20:this.$=[Number(a[x-2]),...a[x]];break;case 21:this.$=[Number(a[x])];break;case 22:g.setXAxisTitle(a[x]);break;case 23:g.setXAxisTitle(a[x-1]);break;case 24:g.setXAxisTitle({type:"text",text:""});break;case 25:g.setXAxisBand(a[x]);break;case 26:g.setXAxisRangeData(Number(a[x-2]),Number(a[x]));break;case 27:this.$=a[x-1];break;case 28:this.$=[a[x-2],...a[x]];break;case 29:this.$=[a[x]];break;case 30:g.setYAxisTitle(a[x]);break;case 31:g.setYAxisTitle(a[x-1]);break;case 32:g.setYAxisTitle({type:"text",text:""});break;case 33:g.setYAxisRangeData(Number(a[x-2]),Number(a[x]));break;case 37:this.$={text:a[x],type:"text"};break;case 38:this.$={text:a[x],type:"text"};break;case 39:this.$={text:a[x],type:"markdown"};break;case 40:this.$=a[x];break;case 41:this.$=a[x-1]+""+a[x];break}},table:[e(t,i,{3:1,4:2,7:4,5:s,34:n,35:o,36:c}),{1:[3]},e(t,i,{4:2,7:4,3:8,5:s,34:n,35:o,36:c}),e(t,i,{4:2,7:4,6:9,3:10,5:s,8:[1,11],34:n,35:o,36:c}),{1:[2,4],9:12,10:[1,13],12:[1,14],14:[1,15],16:[1,16],18:[1,17],19:[1,18],21:[1,19],23:[1,20]},e(f,[2,34]),e(f,[2,35]),e(f,[2,36]),{1:[2,1]},e(t,i,{4:2,7:4,3:21,5:s,34:n,35:o,36:c}),{1:[2,3]},e(f,[2,5]),e(t,[2,7],{4:22,34:n,35:o,36:c}),{11:23,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:39,13:38,24:z,27:lt,29:40,30:41,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:45,15:44,27:ct,33:46,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:49,17:48,24:$,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{11:52,17:51,24:$,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},{20:[1,53]},{22:[1,54]},e(w,[2,18]),{1:[2,2]},e(w,[2,8]),e(w,[2,9]),e(Q,[2,37],{40:55,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L}),e(Q,[2,38]),e(Q,[2,39]),e(v,[2,40]),e(v,[2,42]),e(v,[2,43]),e(v,[2,44]),e(v,[2,45]),e(v,[2,46]),e(v,[2,47]),e(v,[2,48]),e(v,[2,49]),e(v,[2,50]),e(v,[2,51]),e(w,[2,10]),e(w,[2,22],{30:41,29:56,24:z,27:lt}),e(w,[2,24]),e(w,[2,25]),{31:[1,57]},{11:59,32:58,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},e(w,[2,11]),e(w,[2,30],{33:60,27:ct}),e(w,[2,32]),{31:[1,61]},e(w,[2,12]),{17:62,24:$},{25:63,27:ut},e(w,[2,14]),{17:65,24:$},e(w,[2,16]),e(w,[2,17]),e(v,[2,41]),e(w,[2,23]),{27:[1,66]},{26:[1,67]},{26:[2,29],28:[1,68]},e(w,[2,31]),{27:[1,69]},e(w,[2,13]),{26:[1,70]},{26:[2,21],28:[1,71]},e(w,[2,15]),e(w,[2,26]),e(w,[2,27]),{11:59,32:72,37:24,38:d,39:R,40:27,41:_,42:A,43:m,44:T,45:S,46:P,47:p,48:C,49:h,50:L},e(w,[2,33]),e(w,[2,19]),{25:73,27:ut},{26:[2,28]},{26:[2,20]}],defaultActions:{8:[2,1],10:[2,3],21:[2,2],72:[2,28],73:[2,20]},parseError:function(r,l){if(l.recoverable)this.trace(r);else{var u=new Error(r);throw u.hash=l,u}},parse:function(r){var l=this,u=[0],g=[],b=[null],a=[],F=this.table,x="",U=0,gt=0,Vt=2,xt=1,Bt=a.slice.call(arguments,1),k=Object.create(this.lexer),B={yy:{}};for(var Z in this.yy)Object.prototype.hasOwnProperty.call(this.yy,Z)&&(B.yy[Z]=this.yy[Z]);k.setInput(r,B.yy),B.yy.lexer=k,B.yy.parser=this,typeof k.yylloc>"u"&&(k.yylloc={});var tt=k.yylloc;a.push(tt);var Wt=k.options&&k.options.ranges;typeof B.yy.parseError=="function"?this.parseError=B.yy.parseError:this.parseError=Object.getPrototypeOf(this).parseError;function Ot(){var I;return I=g.pop()||k.lex()||xt,typeof I!="number"&&(I instanceof Array&&(g=I,I=g.pop()),I=l.symbols_[I]||I),I}for(var D,W,E,it,O={},q,M,dt,j;;){if(W=u[u.length-1],this.defaultActions[W]?E=this.defaultActions[W]:((D===null||typeof D>"u")&&(D=Ot()),E=F[W]&&F[W][D]),typeof E>"u"||!E.length||!E[0]){var et="";j=[];for(q in F[W])this.terminals_[q]&&q>Vt&&j.push("'"+this.terminals_[q]+"'");k.showPosition?et="Parse error on line "+(U+1)+`:
 `+k.showPosition()+`
 Expecting `+j.join(", ")+", got '"+(this.terminals_[D]||D)+"'":et="Parse error on line "+(U+1)+": Unexpected "+(D==xt?"end of input":"'"+(this.terminals_[D]||D)+"'"),this.parseError(et,{text:k.match,token:this.terminals_[D]||D,line:k.yylineno,loc:tt,expected:j})}if(E[0]instanceof Array&&E.length>1)throw new Error("Parse Error: multiple actions possible at state: "+W+", token: "+D);switch(E[0]){case 1:u.push(D),b.push(k.yytext),a.push(k.yylloc),u.push(E[1]),D=null,gt=k.yyleng,x=k.yytext,U=k.yylineno,tt=k.yylloc;break;case 2:if(M=this.productions_[E[1]][1],O.$=b[b.length-M],O._$={first_line:a[a.length-(M||1)].first_line,last_line:a[a.length-1].last_line,first_column:a[a.length-(M||1)].first_column,last_column:a[a.length-1].last_column},Wt&&(O._$.range=[a[a.length-(M||1)].range[0],a[a.length-1].range[1]]),it=this.performAction.apply(O,[x,gt,U,B.yy,E[1],b,a].concat(Bt)),typeof it<"u")return it;M&&(u=u.slice(0,-1*M*2),b=b.slice(0,-1*M),a=a.slice(0,-1*M)),u.push(this.productions_[E[1]][0]),b.push(O.$),a.push(O._$),dt=F[u[u.length-2]][u[u.length-1]],u.push(dt);break;case 3:return!0}}return!0}},It=function(){var V={EOF:1,parseError:function(l,u){if(this.yy.parser)this.yy.parser.parseError(l,u);else throw new Error(l)},setInput:function(r,l){return this.yy=l||this.yy||{},this._input=r,this._more=this._backtrack=this.done=!1,this.yylineno=this.yyleng=0,this.yytext=this.matched=this.match="",this.conditionStack=["INITIAL"],this.yylloc={first_line:1,first_column:0,last_line:1,last_column:0},this.options.ranges&&(this.yylloc.range=[0,0]),this.offset=0,this},input:function(){var r=this._input[0];this.yytext+=r,this.yyleng++,this.offset++,this.match+=r,this.matched+=r;var l=r.match(/(?:\r\n?|\n).*/g);return l?(this.yylineno++,this.yylloc.last_line++):this.yylloc.last_column++,this.options.ranges&&this.yylloc.range[1]++,this._input=this._input.slice(1),r},unput:function(r){var l=r.length,u=r.split(/(?:\r\n?|\n)/g);this._input=r+this._input,this.yytext=this.yytext.substr(0,this.yytext.length-l),this.offset-=l;var g=this.match.split(/(?:\r\n?|\n)/g);this.match=this.match.substr(0,this.match.length-1),this.matched=this.matched.substr(0,this.matched.length-1),u.length-1&&(this.yylineno-=u.length-1);var b=this.yylloc.range;return this.yylloc={first_line:this.yylloc.first_line,last_line:this.yylineno+1,first_column:this.yylloc.first_column,last_column:u?(u.length===g.length?this.yylloc.first_column:0)+g[g.length-u.length].length-u[0].length:this.yylloc.first_column-l},this.options.ranges&&(this.yylloc.range=[b[0],b[0]+this.yyleng-l]),this.yyleng=this.yytext.length,this},more:function(){return this._more=!0,this},reject:function(){if(this.options.backtrack_lexer)this._backtrack=!0;else return this.parseError("Lexical error on line "+(this.yylineno+1)+`. You can only invoke reject() in the lexer when the lexer is of the backtracking persuasion (options.backtrack_lexer = true).
 `+this.showPosition(),{text:"",token:null,line:this.yylineno});return this},less:function(r){this.unput(this.match.slice(r))},pastInput:function(){var r=this.matched.substr(0,this.matched.length-this.match.length);return(r.length>20?"...":"")+r.substr(-20).replace(/\n/g,"")},upcomingInput:function(){var r=this.match;return r.length<20&&(r+=this._input.substr(0,20-r.length)),(r.substr(0,20)+(r.length>20?"...":"")).replace(/\n/g,"")},showPosition:function(){var r=this.pastInput(),l=new Array(r.length+1).join("-");return r+this.upcomingInput()+`

package/dist/index.html

@@ -19,8 +19,8 @@
       type="text/css"
       href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
     />
-    <script type="module" crossorigin src="/assets/index-CNMzWvKV.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-PEmISxiy.css">
+    <script type="module" crossorigin src="/assets/index-CNo75dYr.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-B0qfCb1G.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vibe-forge/client",
   "type": "module",
-  "version": "0.2.0-alpha.8",
+  "version": "0.3.0",
   "imports": {
     "#~/*": [
       "./src/*",
@@ -33,8 +33,8 @@
     "typescript": "^5.6.3",
     "vite": "^5.4.8",
     "vitest": "^3.2.4",
-    "@vibe-forge/core": "0.2.0-alpha.8",
-    "@vibe-forge/register": "^0.2.0-alpha.8"
+    "@vibe-forge/core": "0.3.0",
+    "@vibe-forge/register": "^0.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

package/src/api.ts

@@ -21,6 +21,14 @@ export interface EntitySummary {
   rules: string[]
 }
 
+export interface RuleSummary {
+  id: string
+  name: string
+  description: string
+  always: boolean
+  globs?: string[]
+}
+
 export interface SpecDetail extends SpecSummary {
   body: string
 }
@@ -29,6 +37,10 @@ export interface EntityDetail extends EntitySummary {
   body: string
 }
 
+export interface RuleDetail extends RuleSummary {
+  body: string
+}
+
 export interface AutomationTrigger {
   id: string
   type: 'interval' | 'webhook' | 'cron'
@@ -96,11 +108,15 @@ export async function listSessions(filter: 'active' | 'archived' | 'all' = 'acti
   return res.json() as Promise<{ sessions: Session[] }>
 }
 
-export async function createSession(title?: string, initialMessage?: string): Promise<{ session: Session }> {
+export async function createSession(
+  title?: string,
+  initialMessage?: string,
+  model?: string
+): Promise<{ session: Session }> {
   const res = await fetch(`${SERVER_URL}/api/sessions`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ title, initialMessage })
+    body: JSON.stringify({ title, initialMessage, model })
   })
   return res.json() as Promise<{ session: Session }>
 }
@@ -115,6 +131,11 @@ export async function listEntities(): Promise<{ entities: EntitySummary[] }> {
   return res.json() as Promise<{ entities: EntitySummary[] }>
 }
 
+export async function listRules(): Promise<{ rules: RuleSummary[] }> {
+  const res = await fetch(`${SERVER_URL}/api/ai/rules`)
+  return res.json() as Promise<{ rules: RuleSummary[] }>
+}
+
 export async function getSpecDetail(path: string): Promise<{ spec: SpecDetail }> {
   const url = new URL(`${SERVER_URL}/api/ai/specs/detail`)
   url.searchParams.set('path', path)
@@ -129,6 +150,13 @@ export async function getEntityDetail(path: string): Promise<{ entity: EntityDet
   return res.json() as Promise<{ entity: EntityDetail }>
 }
 
+export async function getRuleDetail(path: string): Promise<{ rule: RuleDetail }> {
+  const url = new URL(`${SERVER_URL}/api/ai/rules/detail`)
+  url.searchParams.set('path', path)
+  const res = await fetch(url.toString())
+  return res.json() as Promise<{ rule: RuleDetail }>
+}
+
 export async function getConfig(): Promise<ConfigResponse> {
   const res = await fetch(`${SERVER_URL}/api/config`)
   return res.json() as Promise<ConfigResponse>

package/src/components/ConfigView.tsx

@@ -9,6 +9,7 @@ import type { AboutInfo, ConfigResponse, ConfigSource } from '@vibe-forge/core'
 
 import { getConfig, updateConfig } from '../api'
 import { AboutSection, ConfigSectionPanel, ConfigSourceSwitch, DisplayValue } from './config'
+import { AppSettingsPanel } from './config/AppSettingsPanel'
 import { cloneValue, getValueByPath, isEmptyValue } from './config/configUtils'
 
 export function ConfigView() {
@@ -75,6 +76,7 @@ export function ConfigView() {
     { key: 'mcp', icon: 'account_tree', label: t('config.sections.mcp'), value: currentSource?.mcp },
     { key: 'shortcuts', icon: 'keyboard', label: t('config.sections.shortcuts'), value: currentSource?.shortcuts },
     { key: 'group-app', type: 'group', label: t('config.groups.app') },
+    { key: 'appearance', icon: 'tune', label: t('config.sections.appearance') },
     { key: 'experiments', icon: 'science', label: t('config.sections.experiments'), value: data?.meta?.experiments },
     { key: 'about', icon: 'info', label: t('config.sections.about'), value: data?.meta?.about }
   ], [currentSource, data?.meta?.about, data?.meta?.experiments, t])
@@ -220,7 +222,10 @@ export function ConfigView() {
                     {tab.key === 'about' && (
                       <AboutSection value={tab.value as AboutInfo | undefined} />
                     )}
-                    {tab.key !== 'about' && !configTabKeys.has(tab.key) && (
+                    {tab.key === 'appearance' && (
+                      <AppSettingsPanel t={t} />
+                    )}
+                    {tab.key !== 'about' && tab.key !== 'appearance' && !configTabKeys.has(tab.key) && (
                       <DisplayValue value={tab.value} sectionKey={tab.key} t={t} />
                     )}
                     {configTabKeys.has(tab.key) && (

package/src/components/chat/NewSessionGuide.scss

@@ -15,19 +15,47 @@
 }
 
 .new-session-guide__announcements-header {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
+  gap: 12px;
   font-size: 13px;
   font-weight: 600;
   color: var(--text-color);
 }
 
+.new-session-guide__announcements-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
 .new-session-guide__announcements-icon {
   font-size: 18px;
   color: var(--sub-text-color);
 }
 
+.new-session-guide__announcements-close {
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: var(--sub-text-color);
+  cursor: pointer;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.new-session-guide__announcements-close:hover {
+  color: var(--text-color);
+}
+
+.new-session-guide__announcements-close .material-symbols-rounded {
+  font-size: 18px;
+}
+
 .new-session-guide__announcements-list {
   display: flex;
   flex-direction: column;
@@ -53,10 +81,6 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  padding: 16px;
-  background: var(--bg-color);
 }
 
 .new-session-guide__header {
@@ -92,7 +116,8 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  min-height: 160px;
+  height: 160px;
+  overflow: scroll;
 }
 
 .new-session-guide__list {
@@ -105,16 +130,13 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 10px 12px;
-  border-radius: 10px;
-  background: var(--tag-bg);
 }
 
 .new-session-guide__item-title {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   color: var(--text-color);
 }
@@ -126,13 +148,13 @@
 
 .new-session-guide__item-desc {
   font-size: 12px;
-  color: var(--sub-text-color);
+  color: var(--placeholder-color);
   line-height: 1.4;
 }
 
 .new-session-guide__meta {
   font-size: 11px;
-  color: var(--sub-text-color);
+  color: var(--placeholder-color);
 }
 
 .new-session-guide__empty {

package/src/components/chat/NewSessionGuide.tsx

@@ -1,15 +1,17 @@
 import './NewSessionGuide.scss'
 
 import { App, Button } from 'antd'
-import React from 'react'
+import { useAtom } from 'jotai'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
 import type { EntitySummary, SpecSummary } from '#~/api.js'
+import { showAnnouncementsAtom } from '#~/store/index.js'
 
 export function NewSessionGuide() {
   const { t } = useTranslation()
   const { message } = App.useApp()
+  const [showAnnouncements, setShowAnnouncements] = useAtom(showAnnouncementsAtom)
 
   const { data: specsRes } = useSWR<{ specs: SpecSummary[] }>('/api/ai/specs')
   const { data: entitiesRes } = useSWR<{ entities: EntitySummary[] }>('/api/ai/entities')
@@ -26,6 +28,7 @@ export function NewSessionGuide() {
   )
 
   const specs = specsRes?.specs ?? []
+  const alwaysSpecs = specs.filter(spec => spec.always)
   const entities = entitiesRes?.entities ?? []
   const isSpecsReady = specsRes != null
   const isEntitiesReady = entitiesRes != null
@@ -47,11 +50,20 @@ export function NewSessionGuide() {
 
   return (
     <div className='new-session-guide'>
-      {announcements.length > 0 && (
+      {showAnnouncements && announcements.length > 0 && (
         <div className='new-session-guide__announcements'>
           <div className='new-session-guide__announcements-header'>
-            <span className='material-symbols-rounded new-session-guide__announcements-icon'>campaign</span>
-            <span>{t('chat.newSessionGuide.announcements.title')}</span>
+            <div className='new-session-guide__announcements-title'>
+              <span className='material-symbols-rounded new-session-guide__announcements-icon'>campaign</span>
+              <span>{t('chat.newSessionGuide.announcements.title')}</span>
+            </div>
+            <button
+              type='button'
+              className='new-session-guide__announcements-close'
+              onClick={() => setShowAnnouncements(false)}
+            >
+              <span className='material-symbols-rounded'>close</span>
+            </button>
           </div>
           <div className='new-session-guide__announcements-list'>
             {announcements.map((item, index) => (
@@ -69,18 +81,17 @@ export function NewSessionGuide() {
               <span className='material-symbols-rounded new-session-guide__title-icon'>account_tree</span>
               <span>{t('chat.newSessionGuide.specs.title')}</span>
             </div>
-            <div className='new-session-guide__count'>{specs.length}</div>
+            <div className='new-session-guide__count'>{alwaysSpecs.length}</div>
           </div>
           <div className='new-session-guide__body'>
             {!isSpecsReady && (
               <div className='new-session-guide__loading'>{t('chat.newSessionGuide.loading')}</div>
             )}
-            {isSpecsReady && specs.length > 0 && (
+            {isSpecsReady && alwaysSpecs.length > 0 && (
               <div className='new-session-guide__list'>
-                {specs.map((spec) => (
+                {alwaysSpecs.map((spec) => (
                   <div key={spec.id} className='new-session-guide__item'>
                     <div className='new-session-guide__item-title'>
-                      <span className='material-symbols-rounded new-session-guide__item-icon'>route</span>
                       <span>{spec.name}</span>
                     </div>
                     <div className='new-session-guide__item-desc'>{spec.description}</div>
@@ -93,7 +104,7 @@ export function NewSessionGuide() {
                 ))}
               </div>
             )}
-            {isSpecsReady && specs.length === 0 && (
+            {isSpecsReady && alwaysSpecs.length === 0 && (
               <div className='new-session-guide__empty'>
                 <div className='new-session-guide__empty-desc'>{t('chat.newSessionGuide.specs.empty')}</div>
                 <Button type='primary' size='small' onClick={handleCreateSpec}>
@@ -121,7 +132,6 @@ export function NewSessionGuide() {
                 {entities.map((entity) => (
                   <div key={entity.id} className='new-session-guide__item'>
                     <div className='new-session-guide__item-title'>
-                      <span className='material-symbols-rounded new-session-guide__item-icon'>person</span>
                       <span>{entity.name}</span>
                     </div>
                     <div className='new-session-guide__item-desc'>{entity.description}</div>

package/src/components/chat/useChatModels.tsx

@@ -18,7 +18,14 @@ interface ModelSelectGroup {
 
 export function useChatModels() {
   const { t } = useTranslation()
-  const [selectedModel, setSelectedModel] = useState<string | undefined>(undefined)
+  const [selectedModel, setSelectedModel] = useState<string | undefined>(() => {
+    try {
+      const raw = localStorage.getItem('vf_chat_selected_model')
+      return raw == null || raw.trim() === '' ? undefined : raw
+    } catch {
+      return undefined
+    }
+  })
   const { data: configRes } = useSWR<ConfigResponse>('/api/config', getConfig)
 
   const mergedModelServices = useMemo(() => {
@@ -77,6 +84,17 @@ export function useChatModels() {
     })
   }, [availableModelSet, hasAvailableModels, resolvedDefaultModel])
 
+  useEffect(() => {
+    try {
+      if (selectedModel == null || selectedModel.trim() === '') {
+        localStorage.removeItem('vf_chat_selected_model')
+      } else {
+        localStorage.setItem('vf_chat_selected_model', selectedModel)
+      }
+    } catch {
+    }
+  }, [selectedModel])
+
   const modelOptions = useMemo<ModelSelectGroup[]>(() => {
     const buildOption = (params: {
       value: string

package/src/components/chat/useChatSession.ts

@@ -302,7 +302,7 @@ export function useChatSession({
     if (!session?.id) {
       setIsCreating(true)
       try {
-        const { session: newSession } = await createSession(undefined, text.trim())
+        const { session: newSession } = await createSession(undefined, text.trim(), selectedModel)
 
         await mutate('/api/sessions', (prev: { sessions: Session[] } | undefined) => {
           if (!prev?.sessions) return { sessions: [newSession] }

package/src/components/config/AppSettingsPanel.tsx

@@ -0,0 +1,33 @@
+import '../ConfigView.scss'
+
+import { Switch } from 'antd'
+import { useAtom } from 'jotai'
+
+import { showAnnouncementsAtom } from '#~/store/index.js'
+
+import { FieldRow } from './ConfigFieldRow'
+import type { TranslationFn } from './configUtils'
+
+export function AppSettingsPanel({ t }: { t: TranslationFn }) {
+  const [showAnnouncements, setShowAnnouncements] = useAtom(showAnnouncementsAtom)
+
+  return (
+    <div className='config-view__editor-wrap'>
+      <div className='config-view__section-header'>
+        <div className='config-view__section-title'>
+          <span className='material-symbols-rounded config-view__section-icon'>tune</span>
+          <span>{t('config.sections.appearance')}</span>
+        </div>
+      </div>
+      <div className='config-view__card'>
+        <FieldRow
+          title={t('config.appSettings.announcements.label')}
+          description={t('config.appSettings.announcements.desc')}
+          icon='campaign'
+        >
+          <Switch checked={showAnnouncements} onChange={setShowAnnouncements} />
+        </FieldRow>
+      </div>
+    </div>
+  )
+}

package/src/components/knowledge-base/KnowledgeBaseView.tsx

@@ -5,7 +5,8 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
-import type { EntitySummary, SpecSummary } from '#~/api.js'
+import type { EntitySummary, RuleSummary, SpecSummary } from '#~/api.js'
+import { useQueryParams } from '#~/hooks/useQueryParams.js'
 import { EntitiesTab } from './components/EntitiesTab.js'
 import { FlowsTab } from './components/FlowsTab.js'
 import { KnowledgeBaseHeader } from './components/KnowledgeBaseHeader.js'
@@ -13,6 +14,10 @@ import { RulesTab } from './components/RulesTab.js'
 import { SkillsTab } from './components/SkillsTab.js'
 import { TabLabel } from './components/TabLabel.js'
 
+interface KnowledgeQueryParams extends Record<string, string> {
+  kbTab: string
+}
+
 export function KnowledgeBaseView() {
   const { t } = useTranslation()
   const { message } = App.useApp()
@@ -26,14 +31,28 @@ export function KnowledgeBaseView() {
     isLoading: isEntitiesLoading,
     mutate: mutateEntities
   } = useSWR<{ entities: EntitySummary[] }>('/api/ai/entities')
+  const {
+    data: rulesRes,
+    isLoading: isRulesLoading,
+    mutate: mutateRules
+  } = useSWR<{ rules: RuleSummary[] }>('/api/ai/rules')
 
   const specs = specsRes?.specs ?? []
   const entities = entitiesRes?.entities ?? []
+  const rules = rulesRes?.rules ?? []
 
   const [specQuery, setSpecQuery] = React.useState('')
   const [specTagFilter, setSpecTagFilter] = React.useState<string[]>([])
   const [entityQuery, setEntityQuery] = React.useState('')
   const [entityTagFilter, setEntityTagFilter] = React.useState<string[]>([])
+  const [ruleQuery, setRuleQuery] = React.useState('')
+
+  const { values, update } = useQueryParams<KnowledgeQueryParams>({
+    keys: ['kbTab'],
+    defaults: {
+      kbTab: 'skills'
+    }
+  })
 
   const specTagOptions = React.useMemo(() => {
     const tags = new Set<string>()
@@ -81,8 +100,18 @@ export function KnowledgeBaseView() {
     })
   }, [entityQuery, entityTagFilter, entities])
 
+  const filteredRules = React.useMemo(() => {
+    const query = ruleQuery.trim().toLowerCase()
+    return rules.filter(rule => {
+      if (query === '') return true
+      const globText = (rule.globs ?? []).join(' ')
+      const haystack = `${rule.name} ${rule.description} ${globText}`.toLowerCase()
+      return haystack.includes(query)
+    })
+  }, [ruleQuery, rules])
+
   const handleRefresh = async () => {
-    await Promise.all([mutateSpecs(), mutateEntities()])
+    await Promise.all([mutateSpecs(), mutateEntities(), mutateRules()])
     void message.success(t('knowledge.actions.refreshed'))
   }
 
@@ -170,6 +199,11 @@ export function KnowledgeBaseView() {
       label: <TabLabel icon='gavel' label={t('knowledge.tabs.rules')} />,
       children: (
         <RulesTab
+          rules={rules}
+          filteredRules={filteredRules}
+          isLoading={isRulesLoading}
+          query={ruleQuery}
+          onQueryChange={setRuleQuery}
           onCreate={handleCreateRule}
           onImport={handleImportRule}
         />
@@ -177,10 +211,24 @@ export function KnowledgeBaseView() {
     }
   ]
 
+  const tabKeys = React.useMemo(() => tabs.map(tab => tab.key), [tabs])
+  const activeTab = tabKeys.includes(values.kbTab) ? values.kbTab : tabKeys[0]
+
+  React.useEffect(() => {
+    if (values.kbTab !== activeTab) {
+      update({ kbTab: activeTab })
+    }
+  }, [activeTab, update, values.kbTab])
+
   return (
     <div className='knowledge-base-view'>
       <KnowledgeBaseHeader onRefresh={handleRefresh} />
-      <Tabs className='knowledge-base-view__tabs' items={tabs} />
+      <Tabs
+        className='knowledge-base-view__tabs'
+        items={tabs}
+        activeKey={activeTab}
+        onChange={(key) => update({ kbTab: key })}
+      />
     </div>
   )
 }

package/src/components/knowledge-base/components/RuleItem.tsx

@@ -0,0 +1,79 @@
+import { Button, Empty, Tag, Tooltip } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { RuleDetail, RuleSummary } from '#~/api.js'
+import { getRuleDetail } from '#~/api.js'
+import { MarkdownContent } from '#~/components/chat/MarkdownContent'
+import { LoadingState } from './LoadingState'
+
+type RuleItemProps = {
+  rule: RuleSummary
+}
+
+export function RuleItem({ rule }: RuleItemProps) {
+  const { t } = useTranslation()
+  const [expanded, setExpanded] = React.useState(false)
+  const { data, isLoading } = useSWR<{ rule: RuleDetail }>(
+    expanded ? ['rule-detail', rule.id] : null,
+    () => getRuleDetail(rule.id)
+  )
+  const detail = data?.rule
+  const body = detail?.body ?? ''
+  const globList = rule.globs ?? []
+
+  return (
+    <div className='knowledge-base-view__item'>
+      <div className='knowledge-base-view__item-row'>
+        <div className='knowledge-base-view__item-main'>
+          <div className='knowledge-base-view__item-title'>
+            <span className='material-symbols-rounded knowledge-base-view__item-icon'>gavel</span>
+            <span>{rule.name}</span>
+          </div>
+          <div className='knowledge-base-view__item-desc'>{rule.description}</div>
+          {globList.length > 0 && (
+            <div className='knowledge-base-view__tag-list'>
+              {globList.map(glob => (
+                <Tag key={glob} className='knowledge-base-view__tag'>
+                  <span className='material-symbols-rounded knowledge-base-view__tag-icon'>folder</span>
+                  <span>{glob}</span>
+                </Tag>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className='knowledge-base-view__item-meta'>
+          {rule.always && (
+            <Tag color='blue'>{t('knowledge.meta.always')}</Tag>
+          )}
+          <Tooltip title={expanded ? t('knowledge.actions.collapse') : t('knowledge.actions.expand')}>
+            <Button
+              type='text'
+              className='knowledge-base-view__icon-button'
+              onClick={() => setExpanded(prev => !prev)}
+              icon={
+                <span className='material-symbols-rounded'>
+                  {expanded ? 'expand_less' : 'expand_more'}
+                </span>
+              }
+            />
+          </Tooltip>
+        </div>
+      </div>
+      {expanded && (
+        <div className='knowledge-base-view__detail'>
+          {isLoading && <LoadingState />}
+          {!isLoading && body.trim() === '' && (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('knowledge.rules.empty')} />
+          )}
+          {!isLoading && body.trim() !== '' && (
+            <div className='knowledge-base-view__markdown'>
+              <MarkdownContent content={body} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/knowledge-base/components/RuleList.scss

@@ -0,0 +1,5 @@
+.knowledge-base-view__rule-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}